English-only | Jenom česky | Bilingual/Dvojjazyčně

CSS Technique: Striped Tables

Often, especially for longer tables, we'd like to use a style displaying alternate background color of even and odd rows. The most obvious way to do this is to assign a different class name to adjacent table rows and set their color in CSS. In fact, only one class is enough.

td {
   background: white
   }
.even td {
   background: #f0f0ff
   }

...

<table>
   <tr>
      <td>1</td><td>Jan Kovář</td><td>Brno</td>
   </tr>
   <tr class="even">
      <td>2</td><td>John Smith</td><td>New York</td>
   </tr>
   ...
</table>
1Jan KovářBrno
2John SmithNew York
3Hans SchmiedHamburg
4Kovács JánosBudapest
5Janusz KowalskiKrakow
6Jano KováčBratislava
7Jean ForgeronLyon
8Juan HerradorValladolid

Note: Intentionally, table cells (td) background is used, instead of table rows (tr) background, because some (older) browsers don't display background of the tr element.

Anyway, what can we do if the table is already given, we are not able to change the code and add the class names to the table rows? CSS3 is ready for this, there is new pseudo-class :nth-child (see an W3C example). Unfortunately, today's browsers are not supporting it, therefore it's not a usable solution yet. After the CSS3 support is wider, we can do a style for a "striped" table very simply — i.e. this way:

tr:nth-child(even) td { background: white }
tr:nth-child(odd)  td { background: #f0f0ff }

Staying resticted to the CSS2, we have not many tools for styling like this. As a kind of solution, we could use the + selectors, which can tell information about the local context of selected element. Though it knows only which element is preceding, the full context is not accessible. Still we can use it, at least with short tables (we must know the maximal row count). A selector tr describes (any) table row, a selector tr+tr describes "a table row preceded by a table row", which is suitable to all table rows but the first one. A selector tr+tr+tr is "a table row preceded by a table row preceded by a table row" — this means all rows from the third one, etc. The style could be defined like this:

tr td { background: white }
tr+tr td { background: #f0f0ff }
tr+tr+tr td { background: white }
tr+tr+tr+tr td { background: #f0f0ff }
tr+tr+tr+tr+tr td { background: white }
tr+tr+tr+tr+tr+tr td { background: #f0f0ff }

Attention, these selectors are beeing gradually tightened up, their order is important. I.e., if we group all selectors with same background color, it will stop working. This idea was sent to me by Libor Tvrdík and I thank him for it. Anyway, this is very limited solution. First, we have to know the maximum number of table rows (the example above is working till the sixth row — from seventh row, each row fits the last selector and the same color will be used).

There is moreover a problem with limited browser support. Especially IE5 and IE6 don't understand these selectors — but in Firefox, Opera, or Safari it works fine. Try the Example 1, if your browsers supports such construction. Parsing error: mismatched tag at line 154