Áttekinthetőbbé, könnyebben átláthatóvá válik egy táblázat, ha minden második vagy harmadik sorának háttere eltér a többitől. Ekkor az eltérő színű sorok vezetik a szemet.
Az :nth-child(szám) kijelölő segítségével meghatározott számú sorokhoz saját tulajdonságokat rendelhetünk.
Minden második sor színének módosítása:
<style>...
tr:nth-child(2n) { background:#33FF66; }
</style>
Minden harmadik sor színének módosítása:
<style>...
tr:nth-child(3n) { background:#33FF66; }
</style>
Példa:
Forráskód
<style>
thead tr {background-color: orange;}
tr {background-color: #00CC66;}
tr:nth-child(2n) {
background-color: #33FF66;}
</style>
...
<body>
<table>
<thead><tr>
<th> thead 1 </th>
<th> thead 2 </th>
<th> thead 3 </th>
</tr><thead>
<tbody>
<tr>
<th> th 1 </th>
<td> td 1 </td>
<td> td 2 </td>
</tr> <tr>
<th> th 2 </th>
<td> td 3 </td>
<td> td 4 </td>
</tr> <tr>
<th> th 3 </th>
<td> td 5 </td>
<td> td 6 </td>
</tr> <tr>
<th> th 4 </th>
<td> td 7 </td>
<td> td 8 </td>
</tr> <tr>
<th> th 5 </th>
<td> td 9 </td>
<td> td 10 </td>
</tr>
<tbody>
<tfoot><tr>
<td colspan="5">tfoot</td>
</tr> </tfoot>
</table>
</body>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_tablazat_csikozasa_01.html ;