Colorizing Tables

When tables are very wide, the eye may wander up or down onto another row. Providing a different background or font color for every two or three rows helps the reader's eye focus on the correct data.

I'll show you how to do that.

I'll also show you how to highlight single data cells to make them stand out.

Here is an overview of how to do it:

1. Define two CSS classes:

   • A class to apply to specific table rows.
   • A class to apply to specific table data cells.

2. To colorize tables rows and individual table data cells:

   • To colorize an entire table row, use the CSS class for table rows in the TR tag.
   • To colorize an individual table data cell, use the CSS class for table data cells in the TD tag.

3. To colorize an entire table column: Use the CSS class for table data cells in every TD tag of the column.

   (The HTML tags COL and COLGROUP do not work as expected in several popular browsers. I recommend colorizing each TD tag of the column, instead.)

Here is an example. The code follows.

In practice, the colors may be more subtle. The dramatic colors in the example are for demonstrating with clarity.

Here are the CSS definitions the example uses to colorize a table row and a table data cell.

<style type="text/css">
.enhancedrow { background-color:yellow; font-weight:bold; }
.enhancedcell { background-color:blue; color:white; }
</style>

Change the definitions as you see fit. Things to consider: A different font. Different colors. Different font sizes. Borders. Background image instead of solid color.

Here is the table. It is marked with "***" where the CSS definitions are used.

<table border="1" cellpadding="5" cellspacing="0">

<tr>
<th></th>
<th>Water</th>
<th>Air</th>
<th>Fire</th>
<th>Earth</th>
</tr>

<tr>
<td>Spring thunderclouds</td>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
<td>No</td>
</tr>

<tr>
<td>Roasting chestnuts</td>
<td>No</td>
<td>No</td>
<!-- *** Table data cell colorized on next line *** -->
<td class="enhancedcell">Yes</td>
<td>Yes</td>
</tr>

<!-- *** Table row colorized on next line *** -->
<tr class="enhancedrow">
<td>Winter snowbanks</td>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
<td>Yes</td>
</tr>

<tr>
<td>Ice cream on a hot summer day</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>

</table>

If a colorized table data cell is located in a colorized row, the data cell will be the data cell's specified style and the rest of the row will be the row's specified style.

Whenever you have a very wide table or want to emphasize specific table rows or data cells, make a CSS definition and use it in the table.

Will Bontrager