<rowspan><colspan>

  • PluTunium
  • Professor
  • Professor
  • User avatar
  • Posts: 812
  • Loc: Touring the USA

Post 3+ Months Ago

I always see this
Code: [ Select ]
<TD COLSPAN="1"> and also <TD ROWSPAN="1">

- any number where the 1 is...
I was wondering what does this do? those COLSPAN and ROWSPAN...?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Posts: 6376
  • Loc: twitter.com/unflux

Post 3+ Months Ago

see if i can explain this -- if you have a table with 3x3, and in the last
row all the way across, you decide to merge the 3 cells into 1. now
you have in 1 table, a single-celled row under 2 rows with 3 cells.
the colspan tells how many columns across the table the single cell
goes. follow me?

in this example, if you set colspan=2, then the last row would end at
the 2nd column, and leave a blank at the end of the row. This is what
the last row would 'span' across table.

This is useful for formatting text in tables, or if creating a funky shaped
table is necessary in splicing an image up.

Hope this helps, i'm sure more input is needed.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Here I will follow up with an example because words are hard to explain. Here is a table 3 x 3 as Unflux described:

<table border="1" width="200" height="200"><tr><td bgcolor="#882222">cell 1</td><td bgcolor="#228822">cell 2</td><td bgcolor="#882222">cell 3</td></tr><tr><td bgcolor="#228822">cell 4</td><td bgcolor="#882222">cell 5</td><td bgcolor="#228822">cell 6</td></tr><tr><td bgcolor="#882222">cell 7</td><td bgcolor="#228822">cell 8</td><td bgcolor="#882222">cell 9</td></tr>
</table>

Code: [ Select ]
<table border="1" width="200" height="200">
<tr>
<td bgcolor="#882222">cell 1</td>
<td bgcolor="#228822">cell 2</td>
<td bgcolor="#882222">cell 3</td>
</tr>
<tr>
<td bgcolor="#228822">cell 4</td>
<td bgcolor="#882222">cell 5</td>
<td bgcolor="#228822">cell 6</td>
</tr>
<tr>
<td bgcolor="#882222">cell 7</td>
<td bgcolor="#228822">cell 8</td>
<td bgcolor="#882222">cell 9</td>
</tr>
</table>
  1. <table border="1" width="200" height="200">
  2. <tr>
  3. <td bgcolor="#882222">cell 1</td>
  4. <td bgcolor="#228822">cell 2</td>
  5. <td bgcolor="#882222">cell 3</td>
  6. </tr>
  7. <tr>
  8. <td bgcolor="#228822">cell 4</td>
  9. <td bgcolor="#882222">cell 5</td>
  10. <td bgcolor="#228822">cell 6</td>
  11. </tr>
  12. <tr>
  13. <td bgcolor="#882222">cell 7</td>
  14. <td bgcolor="#228822">cell 8</td>
  15. <td bgcolor="#882222">cell 9</td>
  16. </tr>
  17. </table>




Now here is a table where cell 2 has a colspan of 2 and cell 7 has a colspan of 2.

<table border="1" width="200" height="200"><tr><td bgcolor="#882222">cell 1</td><td bgcolor="#228822" colspan="2">cell 2</td></tr><tr><td bgcolor="#228822">cell 4</td>
<td bgcolor="#882222">cell 5</td><td bgcolor="#228822">cell 6</td>
</tr><tr><td bgcolor="#882222" colspan="2">cell 7</td><td bgcolor="#882222">cell 9</td></tr></table>

Code: [ Select ]
<table border="1" width="200" height="200">
<tr>
<td bgcolor="#882222">cell 1</td>
<td bgcolor="#228822" colspan="2">cell 2</td>
</tr>
<tr>
<td bgcolor="#228822">cell 4</td>
<td bgcolor="#882222">cell 5</td>
<td bgcolor="#228822">cell 6</td>
</tr>
<tr>
<td bgcolor="#882222" colspan="2">cell 7</td>
<td bgcolor="#882222">cell 9</td>
</tr>
</table>
  1. <table border="1" width="200" height="200">
  2. <tr>
  3. <td bgcolor="#882222">cell 1</td>
  4. <td bgcolor="#228822" colspan="2">cell 2</td>
  5. </tr>
  6. <tr>
  7. <td bgcolor="#228822">cell 4</td>
  8. <td bgcolor="#882222">cell 5</td>
  9. <td bgcolor="#228822">cell 6</td>
  10. </tr>
  11. <tr>
  12. <td bgcolor="#882222" colspan="2">cell 7</td>
  13. <td bgcolor="#882222">cell 9</td>
  14. </tr>
  15. </table>


As you can see what happens is the cell now takes up two cells worth of space. You can do the same with rowspan which takes up multiple rows of space. In this example cell 1 has a rowspan of 2 and cell 6 has a rowspan of 2:

<table border="1" width="200" height="200"><tr><td bgcolor="#882222" rowspan="2">cell 1</td><td bgcolor="#228822">cell 2</td><td bgcolor="#882222">cell 3</td></tr>
<tr><td bgcolor="#882222">cell 5</td><td bgcolor="#228822" rowspan="2">cell 6</td></tr><tr><td bgcolor="#882222">cell 7</td>
<td bgcolor="#228822">cell 8</td></tr></table>

Code: [ Select ]
<table border="1" width="200" height="200">
<tr>
<td bgcolor="#882222" rowspan="2">cell 1</td>
<td bgcolor="#228822">cell 2</td>
<td bgcolor="#882222">cell 3</td>
</tr>
<tr>
<td bgcolor="#882222">cell 5</td>
<td bgcolor="#228822" rowspan="2">cell 6</td>
</tr>
<tr>
<td bgcolor="#882222">cell 7</td>
<td bgcolor="#228822">cell 8</td>
</tr>
</table>
  1. <table border="1" width="200" height="200">
  2. <tr>
  3. <td bgcolor="#882222" rowspan="2">cell 1</td>
  4. <td bgcolor="#228822">cell 2</td>
  5. <td bgcolor="#882222">cell 3</td>
  6. </tr>
  7. <tr>
  8. <td bgcolor="#882222">cell 5</td>
  9. <td bgcolor="#228822" rowspan="2">cell 6</td>
  10. </tr>
  11. <tr>
  12. <td bgcolor="#882222">cell 7</td>
  13. <td bgcolor="#228822">cell 8</td>
  14. </tr>
  15. </table>
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

oooh purdy! :-D Very good explination!
  • PluTunium
  • Professor
  • Professor
  • User avatar
  • Posts: 812
  • Loc: Touring the USA

Post 3+ Months Ago

Thank you UNFLUX for Telling me what it is. And thankyou BWM for giving me an example! I wouldn't have understood it with out those Visual examples! Thank you :)

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 65 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.