TABLES 101
Lesson Three

by Florence W Deems

Current time is 11:07:23

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


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

Let's do a similar table and eliminate the borders and cellspacing.

table 2, row 1, cell 1 table 2, row 1, cell 2 table 2, row 1, cell 3
table 2, row 2, cell 1
table 2, row 3, cell 1 - totally contains table 3
table 3, row 1, cell 1 table 3, row 1, cell 2 table 3, row 1, cell 3
table 3, row 2, cell 1
table 2, row 3, cell 2

The cell with the blue bgcolor uses a property called "rowspan," similar to "colspan," except the cell spans two rows instead of two columns.

You can use a table like this, with no borders or cellspacing, but with cellpadding to make different colored sections on a web page. The web page would be entirely included inside the first or outer table.

If you feel like trying some advanced tabling, take a peek at the following: Flo's Colspan, Rowspan & Combo Tute

and Page Design with Left & Right Sidebars

Lesson One Lesson Two Lesson Three
Row Tag Alignment for Table Cells
Thursday 19th of October 2017 11:07:23 PM

See Flo's Other Tutes


by
~ Arbor Hosting ~