Solomon columns

We haven't talked about tables for a long time. And what about them to talk about? They need to make out. The tabular presentation of information is one of the important tools for delivering data to the user and undoubtedly should be convenient and easy to read.

There are various methods of visual delimitation of information in tables for greater convenience of perception. Such as the separation of the rows of the table in different colors. This method is known as "Striped Tables".

Today I would like to talk about the columns (columns) of the table. Admit how many times you cursed, prescribing a class for each cell in each row, to highlight a particular column with background color? :)
')
Now it is of course already in the past, there are solutions using JS, CSS3 and all sorts of js-frameworks. We will not consider them now, since no one canceled the search.

There is a simple, cross-browser solution based only on HTML / CSS. Namely colgroup . This decision is not at all new, but for some reason undeservedly forgotten by many developers. Let's go straight to the markup:

<table>
<caption> / :</caption>
<colgroup>
<col />
<col class="alt" />
<col />
<col class="alt" />
<col />
</colgroup>
<tr>
<th>FF2/3</th>
<th>IE6/7</th>
<th>Opera</th>
<th>Safari</th>
<th>Other</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

How does this code differ from the usual table layout? The presence of the colgroup and col tags. Actually colgroup is the parent container for col elements that define the columns we need. It is enough to specify a class and voila for one or another column - we have columns selected according to your taste.

This is what CSS looks like:

table {
border: 1px solid #333;
border-collapse: collapse;
}
th, td {
padding: 2em;
text-align: center;
border-spacing: 1em;
}
th {
background: #ddd;
color: #fff;
}
/* */
col.alt {
background: #ddf;
}

In principle, nothing complicated, and even more innovative, is not here. In this way, you can set the style for any column in the table.

Tested in FF2 / 3, IE6 / 7, Opera 9.5, Safari | (Win). A working example can be viewed .

Upd: List of supported style rules.