Tabulky (table)

Doba čtení: cca 3 min

Co jsou tabulky a k čemu slouží?

Tabulka je způsob, jak uspořádat data do řádků a sloupců. Používáme ji tehdy, když chceme přehledně zobrazit informace, které spolu nějak souvisejí – například rozvrh hodin, ceník, srovnání vlastností nebo výsledky měření.

Důležité pravidlo: tabulka patří na data, ne na rozvržení stránky. V minulosti se tabulky používaly k tvorbě layoutu webu – to je dnes špatná praxe. Na rozvržení slouží CSS. Tabulka má smysl jen tam, kde skutečně zobrazujeme tabulková data.

Základní struktura tabulky

Tabulka se skládá z několika tagů, které do sebe vzájemně patří:

<table> – obaluje celou tabulku
<tr> – table row, jeden řádek tabulky
<td> – table data, jedna buňka s daty
<th> – table header, buňka záhlaví (prohlížeč ji zobrazí tučně a na střed)

Jednoduchá tabulka se dvěma sloupci a dvěma řádky dat vypadá takto:

<table>
			  <tr>
				<th>Jméno</th>
				<th>Věk</th>
			  </tr>
			  <tr>
				<td>Jana</td>
				<td>28</td>
			  </tr>
			  <tr>
				<td>Tomáš</td>
				<td>34</td>
			  </tr>
			</table>

Sémantické části tabulky

Pro přehlednější kód a lepší přístupnost se tabulka dělí na tři části:

<thead> – záhlaví tabulky (řádek s názvy sloupců)
<tbody> – tělo tabulky (samotná data)
<tfoot> – patička tabulky (například součty), nepovinná

Toto rozdělení není povinné, ale je správnou praxí. VoiceOver díky němu dokáže uživateli lépe sdělit, kde se v tabulce nachází.

<table>
			  <thead>
				<tr>
				  <th>Produkt</th>
				  <th>Cena</th>
				</tr>
			  </thead>
			  <tbody>
				<tr>
				  <td>Jablko</td>
				  <td>5 Kč</td>
				</tr>
				<tr>
				  <td>Hruška</td>
				  <td>7 Kč</td>
				</tr>
			  </tbody>
			  <tfoot>
				<tr>
				  <td>Celkem</td>
				  <td>12 Kč</td>
				</tr>
			  </tfoot>
			</table>

Tabulky a přístupnost

Pro VoiceOver a další odečítače obrazovky je správně označená tabulka klíčová. Uživatel slyší název sloupce i řádku ke každé buňce, ale jen tehdy, když je tabulka správně napsaná. Zde jsou nejdůležitější pravidla:

Záhlaví sloupců vždy označuj tagem <th>, ne <td>.
Přidej atribut scope k záhlaví: scope="col" pro sloupec, scope="row" pro řádek. VoiceOver pak přesně ví, k čemu záhlaví patří.
Popis tabulky lze přidat tagem <caption> hned za otevírací <table>. VoiceOver ho přečte jako nadpis tabulky.

<table>
			  <caption>Přehled výsledků testu</caption>
			  <thead>
				<tr>
				  <th scope="col">Jméno</th>
				  <th scope="col">Výsledek</th>
				</tr>
			  </thead>
			  <tbody>
				<tr>
				  <td>Marie</td>
				  <td>92 %</td>
				</tr>
			  </tbody>
			</table>

Sloučení buněk

Někdy potřebuješ, aby jedna buňka zabírala více sloupců nebo řádků. K tomu slouží atributy:

colspan="2" – buňka se roztáhne přes 2 sloupce
rowspan="2" – buňka se roztáhne přes 2 řádky

<tr>
			  <td colspan="2">Tato buňka zabírá dva sloupce</td>
			</tr>

Se slučováním buněk zacházej opatrně – složité sloučené tabulky jsou pro odečítače obrazovky obtížně srozumitelné. Pokud to jde, preferuj jednoduché tabulky bez sloučení.

Tip od Zdeňka

Zdeněk radí: Jako nevidomý mám tabulky opravdu rád – ale jen tehdy, když jsou správně napsané. Špatná tabulka bez záhlaví je pro VoiceOver noční můra, dobrá tabulka s scope a caption je naopak přehledná a rychlá na čtení. Vždy si proto představ, jak tabulku uslyší někdo, kdo ji nevidí – a podle toho ji napiš.