Webmaster

HTML : Tables
Contents ]
Jérôme Versavel

A Touch of Colour

You will have noticed that our table background was transparent. In this case, the background image or colour of the page is visible. But you can also customise it if you want to by defining a background colour for the table, and even for each cell as well as the borders.

  • To change the background colour for a table or a cell, use the BGCOLOR attribute in conjunction with the <TABLE> and <TD> tags.

  • To define a colour for the borders, set the BORDERCOLOR attribute of the <TABLE> tag.

Here is an example of a table with a blue background and red borders. The cell in the middle is white:

<TABLE BORDER="2" BGCOLOR="#0000FF" BORDERCOLOR="#FF0000">
<TR><TD>A</TD><TD>B</TD><TD>C</TD></TR>
<TR><TD>D</TD><TD BGCOLOR="#FFFFFF">E</TD><TD>F</TD></TR>
<TR><TD>G</TD><TD>H</TD><TD>I</TD></TR>
</TABLE>

The result speaks for itself:




Distinguishing rows. To distinguish between rows and hence make them easier to read, for instance in the case of a long list, alternate the cell background colour every other line.