<rowspan><colspan>

  • PluTunium
  • Professor
  • Professor
  • User avatar
  • Joined: Jul 10, 2003
  • Posts: 812
  • Loc: Touring the USA
  • Status: Offline

Post September 25th, 2003, 3:56 pm

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...?
http://www.silverringthing.com
http://www.xxxchurch.com
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post September 25th, 2003, 3:56 pm

  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 6382
  • Loc: twitter.com/unflux
  • Status: Offline

Post September 25th, 2003, 8:52 pm

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.
UNFLUX.FOTO
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8926
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post September 25th, 2003, 9:12 pm

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>
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Joined: Jun 15, 2003
  • Posts: 4583
  • Loc: Maryland
  • Status: Offline

Post September 26th, 2003, 1:05 pm

oooh purdy! :-D Very good explination!
Pixel Acres V2
  • PluTunium
  • Professor
  • Professor
  • User avatar
  • Joined: Jul 10, 2003
  • Posts: 812
  • Loc: Touring the USA
  • Status: Offline

Post September 26th, 2003, 3:51 pm

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 :)
http://www.silverringthing.com
http://www.xxxchurch.com

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 84 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.