Tables (4)

More Examples, Colspan & Rowspan

Let's make a large table with lettered cells to help you have a look at it in detail. I have excluded the <TD width=""> attributes on these examples for clarity reasons.

The code for this table is:

<TABLE cellpadding="2" cellspacing="3" bordercolor="#0000FF" border="2" width="65%">
<TR>
<TD align="center"> R1C1 </TD>
<TD align="center"> R1C2 </TD>
<TD align="center"> R1C3 </TD>
<TD align="center"> R1C4 </TD>
</TR>
<TR>
<TD align="center"> R2C1 </TD>
<TD align="center"> R2C2 </TD>
<TD align="center"> R2C3 </TD>
<TD align="center"> R2C4 </TD>
</TR>
<TR>
<TD align="center"> R3C1 </TD>
<TD align="center"> R3C2 </TD>
<TD align="center"> R3C3 </TD>
<TD align="center"> R3C4 </TD>
</TR>
<TR>
<TD align="center"> R4C1 </TD>
<TD align="center"> R4C2 </TD>
<TD align="center"> R4C3 </TD>
<TD align="center"> R4C4 </TD>
</TR>
</TABLE>

Here's another example:

...and here is the code:

<TABLE border="2" bordercolor="#0000FF" cellpadding="3" cellspacing="2" width="65%">
<TR>
<TD align="center"> R1C1 </TD>
<TD align="center" colspan="2" rowspan="4"> R1C2 </TD>
<TD align="center"> R1C4 </TD>
</TR>
<TR>
<TD align="center"> R2C1 </TD>
<TD align="center"> R2C4 </TD>
</TR>
<TR>
<TD align="center"> R3C1 </TD>
<TD align="center"> R3C4 </TD>
</TR>
<TR>
<TD align="center"> R4C1 </TD>
<TD align="center"> R4C4 </TD>
</TR>
</TABLE>

and finally...

The code for this one is:

<TABLE border="2" bordercolor="#0000FF" cellpadding="1" cellspacing="2" width="65%">
<TR>
<TD align="center" colspan="4"> R1C1 </TD>
</TR>
<TR>
<TD align="center"> R2C1 </TD>
<TD align="center"> R2C2 </TD>
<TD align="center"> R2C3 </TD>
<TD align="center"> R2C4 </TD>
</TR>
<TR>
<TD align="center" colspan="4"> R3C1 </TD>
</TR>
<TR>
<TD align="center"> R4C1 </TD>
<TD align="center"> R4C2 </TD>
<TD align="center"> R4C3 </TD>
<TD align="center"> R4C4 </TD>
</TR>
</TABLE>

Colspan & Rowspan

You will have noticed a new word introduced here - 'colspan'. This is where an individual cell covers a number of cells. Have a look at the examples above again and see how it is done.

In essence, to introduce a colspan command it must be nested within its own <TR> and </TR> commands. The cell must be told how many columns or rows it is covering (colspan="4" or colspan="3"), and this must be the total number of cells either vertically (columns) or horizontally (rows).

So a table that you want to have one cell covering two smaller cells below it looks like this:

There are obviously two small cells and one large one, so we have a colspan of 2. Here's the code:

<TABLE border="2" bordercolor="#0000FF" cellpadding="1" cellspacing="2" width="40%">
<TR>
<TD align="center" colspan="2">Top cell</TD>
</TR>
<TR>
<TD align="center">Left cell</TD>
<TD align="center">right cell</TD>
</TR>
</table>

If we had three small cells we would obviously have a colspan of 3 and so on. The theory is similar for rows (horizontal) as well as columns (vertical), except I now dictate the number of rows with a 'rowspan' command. So if I wanted to make this:

I would write this:

<TABLE border="2" bordercolor="#0000FF" cellpadding="3" cellspacing="2" width="40%">
<TR>
<TD align="center" colspan="2" rowspan="2">Left</TD>
<TD align="center">right</TD>
<TR>
<TD align="center">right</TD>
</TR>
</TR>
</table>

But what if we don't want lines between cells? No problem, click here for the next page where I show you how it's done.