Playing with Cells

In a table, all the lines typically have the same number of cells, and all the columns have the same number of lines. To change this default behaviour, the <TD> and <TH> tags accept two interesting attributes: COLSPAN, which sets the number of columns spanned by the current cell, and ROWSPAN, which sets the number of lines spanned by the current cell.

Two short examples are better than a long speech:

<TABLE BORDER="1">
<TR><TD COLSPAN="2">1</TD></TR>
<TR><TD>2</TD><TD>3</TD></TR>
</TABLE>

Which produces the following result:




The width of the first table cell spans two columns (colspan="2").

Now look at this code:

<TABLE BORDER="1">
<TR><TD ROWSPAN="2">1</TD><TD>2</TD></TR>
<TR><TD>3</TD></TR>
</TABLE>

Here is the rendering:




This time, the height of the first cell spans two lines (rowspan="2"), which offsets the other cells. You can also combine these attributes to create fancy tables.