More Table Attributes

Table Borders

A nice simple one to start with - use the BORDER attribute in the TABLE tag to specify how wide a border to show, or 0 for no border at all.

Background Colours

You can use the BGCOLOR attribute (with a standard hex code) in any of the TABLE, TR or TD tags. Remember to make sure your text shows up on the colour you choose - you can always use the FONT tag in or around table tags to change the fonts colour too. remember though that being able to read your text is more important than it looking good.

Cell Spanning

Cell Spanning allows you to stretch cells over many columns or rows. An example of column spanning:

<TABLE WIDTH="300">
<TR>
<TD ALIGN="CENTER" COLSPAN="2">Row 1 Cell 1</TD>
</TR>
<TR>
<TD>Row 2 Cell 1</TD>
<TD>Row 2 Cell 2</TD>
</TR>
</TABLE>

Use the COLSPAN attribute in the TD cell with the number of columns the cell should stretch over. Then just miss out the appropriate number of cells (in this case 1), and all should work fine.

You can do exactly the same thing with rows, using ROWSPAN:

<TABLE WIDTH="300">
<TR>
<TD VALIGN="MIDDLE" ROWSPAN="2">Row 1 Cell 1</TD>
<TD>Row 1 Cell 2</TD>
</TR>
<TR>
<TD>Row 2 Cell 2</TD>
</TR>
</TABLE>

NB: keep track of where you need to miss cells out.

Here's a more complicated example:

<TABLE WIDTH="400">
<TR>
<TD ALIGN="CENTER" COLSPAN="3">Row 1 Cell 1</TD>
</TR>
<TR>
<TD ROWSPAN="2">Row 2 Cell 1</TD>
<TD ALIGN="CENTER" COLSPAN="2">Row 2 Cell 2</TD>
</TR>
<TR>
<TD>Row 3 Cell 2</TD>
<TD>Row 3 Cell 3</TD>
</TR>
</TABLE>

That just about covers tables. You'll use much more than you think for laying out your pages - this site uses huge tables to layout pages. Don't believe us? Click here to view this page but with the main table borders turned on.

Next we move onto lists.