Tabulky v HTML

Tabulky obsahují data uspořádaná dvojrozměrně – do řádků a sloupců. HTML5 obsahuje konstrukce, jejichž prostřednictvím je můžete vytvářet a upravovat.

Prvky pro vytvoření tabulky

Celá tabulka je nesena prvkem <table>. Jeho atributům, jež mají vliv na vzhled tabulky, se budu věnovat později. Nyní se zmíním alespoň o důležitém atributu summary, který má podobný význam jako alt u obrázků – měl by stručně shrnout obsah a strukturu tabulky pro nevizuální klienty. Na rozdíl od alt ale není povinný a doporučuje se používat jej pouze u rozsáhlejších a složitějších tabulek.

Tělo prvku <table> obsahuje vlastní data tabulky. Ta jsou uspořádána do řádků, přičemž každý řádek je tvořen prvkem <tr> (Table Row). Obsahuje jednotlivé buňky (pole) tabulky. Pro vytvoření buňky existují dva prvky. Jedná-li se o běžnou buňku, použijte prvek <td> (Table Data). Pokud je dotyčná buňka záhlavím řádku či sloupce, sáhněte po prvku <th> (Table Header).

Titulek

Každou tabulku můžete opatřit titulkem. K tomu slouží prvek <caption>, jehož tělem je titulek tabulky. Jeho výskyt je nepovinný. Pokud jej však použijete, musí být prvním prvkem uvnitř <table> a smí se v každé tabulce vyskytnout jen jednou. Teprve za ním následuje vlastní obsah tabulky. Například

<table>
   <caption>Tabulka 1: Výnosy a náklady</caption>
   ...
</table>

Příklad

Podívejme se na fiktivní tabulku výnosů a nákladů jakési fiktivní firmy za první čtvrtletí. Bude mít tři sloupce a pět řádků.

<table>
<caption>Tabulka 1: Výnosy a náklady za 1. čtvrtletí</caption>
<tr>
  <th>Měsíc</th>  <th>Výnosy</th> <th>Náklady</th>
</tr>
<tr>
  <th>Leden</th>  <td>12360</td>  <td>8619</td>
</tr>
<tr>
  <th>Únor</th>   <td>9833</td>   <td>6587</td>
</tr>
<tr>
  <th>Březen</th> <td>14209</td>  <td>10318</td>
</tr>
<tr>
  <th>Celkem</th> <td>36402</td>  <td>25542</td>
</tr>
</table>

Formátovaný výsledek bude vypadat takto:

K ideálu má nepochybně daleko – například by čísla měla být zarovnána doprava, aby stejné řády byly pod sebou. Jak zasahovat do formátování tabulky se dozvíte níže.

Související témata

• Formátování tabulek a jejich obsahu
• Nepravidelné tabulky
• Sloupce
• Skupiny řádků a sloupců