When presenting a table of data or information it is often nice to alternate the background colour of the rows, rather than showing a border around each table cell.
When we create our first HTML table showing data it will look something like this:
|
Product |
Description |
Price |
| Apples |
Fresh from Kent orchards |
£1.20 |
| Bananas |
Windward Isles, Fairtrade standard |
£2.22 |
| Olives |
Taken from sheltered olive groves in Italy |
£6.00 |
| Raspberries |
Picked fresh each morning, from Scotland |
£1.95 |
The HTML code for this table is shown below:
<TABLE cellSpacing="1" cellPadding="1" border="1">
<TR>
<TD align="center"><STRONG>Product</STRONG></TD>
<TD align="center"><STRONG>Description</STRONG></TD>
<TD align="center"><STRONG>Price</STRONG></TD>
</TR>
<TR>
<TD>Apples</TD>
<TD>Fresh from Kent orchards</TD>
<TD>£1.20</TD>
</TR>
<TR>
<TD>Bananas</TD>
<TD>Windward Isles, Fairtrade standard</TD> <TD>£2.22</TD>
</TR>
<TR>
<TD>Olives</TD>
<TD>Taken from sheltered olive groves in Italy</TD> <TD>£6.00</TD>
</TR>
<TR>
<TD>Raspberries</TD>
<TD>Picked fresh each morning, from Scotland</TD> <TD>£1.95</TD>
</TR>
</TABLE>
We can make the table look better by removing the border around each of the table cells. In the example below the border has been removed and I have selected two differnet grey colours for each of the table rows. A bright contrasting colour has been set for the heading row.
| Product |
Description |
Price |
| Apples |
Fresh from Kent orchards |
£1.20 |
| Bananas |
Windward Isles, Fairtrade standard |
£2.22 |
| Olives |
Taken from sheltered olive groves in Italy |
£6.00 |
| Raspberries |
Picked fresh each morning, from Scotland |
£1.95 |
The HTML code is shown below:
<TABLE cellSpacing="1" cellPadding="2" border="0">
<TR bgcolor="gold">
<TH>Product</TH>
<TH>Description</TH>
<TH>Price</TH>
</TR>
<TR bgcolor="gainsboro">
<TD>Apples</TD>
<TD>Fresh from Kent orchards</TD>
<TD>£1.20</TD>
</TR>
<TR bgcolor="whitesmoke">
<TD>Bananas</TD>
<TD>Windward Isles, Fairtrade standard</TD> <TD>£2.22</TD>
</TR>
<TR bgcolor="gainsboro">
<TD>Olives</TD>
<TD>Taken from sheltered olive groves in Italy</TD>
<TD>£6.00</TD>
</TR>
<TR bgcolor="whitesmoke">
<TD>Raspberries</TD>
<TD>Picked fresh each morning, from Scotland</TD>
<TD>£1.95</TD>
</TR>
</TABLE>
As can be seen in the code above for each of the <tr> row start tags I have added a definition for the background colour for that row. In the first or it is gold, with the subsequent rows alternating between gainsboro (#dcdcdc) and whitesmoke (#f5f5f5). I have used the pre-defined colour names, simply beacuse they are easier to remember than the rgb colour codes.
I have also changed the tag used in the header of the table from <td> to <th>. This tag will render the table cell with pre-defined properties, bold and centred, meaning that I can removing the code associated with these.
NAT July 2005