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

Řešení CSS: Pruhované tabulky

Pro tabulky, zvláště pro ty delší, je často vhodné použít styl zobrazující sudé a liché řádky střídavě jinou barvou. Nejběžnější způsob, jak toho dosáhnout, je použít pro sousední řádky tabulky různé třídy a jim pak nastavit různou barvu pozadí. Ve skutečnosti stačí dokonce použít třídu jen jednu.

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

Pozn.: Úmyslně je zde použito pozadí pro buňky tabulky (td) a ne pro řádky (tr), protože některé (starší) prohlížeče pozadí prvků tr nezobrazí.

Co ovšem udělat v případě, že je tabulka již vygenerovaná, nebo podobu kódu nemůžeme ovlivnit a řádkům tabulky potřebné třídy nastavit? CCS3 na to už pamatuje a pro podobné účely jsou zde nové pseudo-třídy :nth-child (viz např. ukázka na W3C). Bohužel je v této chvíli prohlížeče nepodporují, takže jako řešení je to ještě nepoužitelné. Až bude podpora CSS3 širší, styl pro takovou "pruhovanou" tabulku se udělá velmi jednoduše, například takto:

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

S omezením na podporu CSS2 ale mnoho nástrojů na takovéto stylování nezbývá. Jistou obezličkou může být použití selektoru +, který dokáže vypovědět o lokálním kontextu daného prvku. Pozná ale pouze jaký prvek prvku ve stránce předchází, širší kontext dostupný není. Přesto ho můžeme aspoň u krátkých tabulek použít (musíme ovšem znát maximální počet jejích řádků). Označuje-li selektor tr (kterýkoli) řádek tabulky, selektor tr+tr je pak "řádek tabulky, kterému předchází řádek tabulky", čemuž vyhovují všechny řádky tabulky kromě prvního. Selektor tr+tr+tr je "řádek tabulky, kterému předchází řádek tabulky, kterému předchází řádek tabulky" — tj. řádky od třetího dále, atd. Styl pak může být definován takto:

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 }
Parsing error: mismatched tag at line 154