Complex tables

In a straightforward table, all cells in a row have the same height and all cells in a column have the same width.
But sometimes you want to do something less regular. For instance, this cell spreads across the table.
This cell has the attribute colspan="3". It spans three columns.
I've put in BR tags so it doesn't go right across the window (at full width - otherwise it would).
I've also put in background colors to the tables to help readability.

this cell is just the first column this cell is in the second column this cell takes up the third column

On the other hand, you may want a cell across rows.
This cell has the attribute rowspan="3".
It spans three rows. this cell is just the first row

this cell is in the second row

this cell takes up the third row

Here's an ordinary row again with two cells

Note how, in this case, because the first cell has occupied a cell on rows 2 and 3,
when it comes to writing rows 2 and 3 only one cell (TD) is given for each row.
The browser "remembers" that the space is already taken.
This cell has colspan="2" and again uses BRs.

OK, so you know what you want your table to look like, but can't easily work out the rowspans and colspans? Here's my basic rule for complex (but not too complex) tables (assumes all cells are rectangular):

Draw the table you want out on paper. Extend every line separating cells to the edge of the whole table, so you get a regular grid. Code each row and each cell as you come to it, starting as you would expect in the top left of the table. If a cell covers more than one of your grid elements, look to see whether it spans a number of rows or a number of columns, and put in a rowspan or colspan accordingly. Every one of your cells has just one TD.

(And, yes, you could get this effect with a table, but I've done it here much more simply with a BLOCKQUOTE.)

However, this rule doesn't always work perfectly. Occasionally you might want a table more like this, which uses a table within a table. The outer table doesn't have borders.

a1	b1	c1
a1	b2	c2
a3	b3	c3

My advanced rule is an addition to the basic rule. First, see if there seem to be any parts that look like sub-tables, and don't draw out any of the lines from this sub-table. Then apply the basic rule with the sub-table seen as one whole thing. When you come to writing out the sub-table, put the new, inner TABLE tag within the TD of the outer table. When you use sub-tables, be particularly careful to get all the end tags in the right places, or else it might go haywire!

Of course you can achieve exactly the same effects without any table borders if you want to - it's just harder to see where the table cells are.

In a straightforward table, all cells in a row have the same height and all cells in a column have the same width. But sometimes you want to do something less regular. For instance, this cell spreads across the table. This cell has the attribute `colspan="3"`. It spans three columns. I've put in BR tags so it doesn't go right across the window (at full width - otherwise it would). I've also put in background colors to the tables to help readability.
this cell is just the first column	this cell is in the second column	this cell takes up the third column

On the other hand, you may want a cell across rows. This cell has the attribute `rowspan="3"`. It spans three rows.	this cell is just the first row
	this cell is in the second row
	this cell takes up the third row
Here's an ordinary row again	with two cells
Note how, in this case, because the first cell has occupied a cell on rows 2 and 3, when it comes to writing rows 2 and 3 only one cell (TD) is given for each row. The browser "remembers" that the space is already taken. This cell has `colspan="2"` and again uses BRs.