TABLES 101 - Lesson Three

Current time is 06:04:09

COLSPAN Placing a table within a table is used a lot for creating complex tables. Here's a very simple example: T1 row 1, cell 1 T1 row 1, cell 2 T1 row 2, cell 1 T2 row 1, cell 1 T2 row 1, cell 2 T2 row 2, cell 1 <table bgcolor="white" width="460" border="10" cellpadding="15"> <tr> <td>T1 row 1, cell 1</td> <td>T1 row 1, cell 2</td></tr> <tr><td>T1 row 2, cell 1</td></tr> <tr><td><table border="3"> <tr><td>T2 row 1, cell 1</td> <td>T2 row 1, cell 2</td></tr> <tr><td>T2 row 2, cell 1</td></tr></table> </td></tr></table> Note in the above example that in T 1, row 2, cell 1 (#1-2-1), this cell extends only across the width of row 1, cell 1, and not across under row 1, cell 2. How can we make this #1-2-1 extend clear across the width of the table? We'll add colspan="2" to the <td> of #1-2-1, since we want its width to span the two cells in the row above it. Now that attribute in the data cell tag will look like this: <td colspan="2">table 1, row 2, cell 1</td> table 1, row 1, cell 1 table 1, row 1, cell 2 table 1, row 2, cell 1 table 2, row 1, cell 1 table 2, row 1, cell 2 table 2, row 2, cell 1 You can also do this for the cell in the second row of the table inside the bigger table: table 1, row 1, cell 1 table 1, row 1, cell 2 table 1, row 2, cell 1 table 2, row 1, cell 1 table 2, row 1, cell 2 table 2, row 2, cell 1 If you feel like trying some advanced tabling, take a peek at the following: Flo's Colspan, Rowspan & Combo Tute This may be easier to follow than the above Easy Table Templates Includes templates featuring colspan and rowspan Netscape's Complete Table Tutorial Lesson One Lesson Two Lesson Three Row Tag Alignment for Table Cells Saturday 22nd of November 2008 06:04:09 PM See Flo's Other Tutes Copyright© by Tone By Tone Dot Net Tandem Tooters ~ Arbor Hosting ~