Cookies

Na naší webové stránce používáme soubory cookies pro její správné fungování, přizpůsobení analytických dat a dynamiky obsahu pro uživatele. Více informací o cookies.

Potvrzením zároveň ukládáte souhlas se zpracováním osobních údajů v rámci nařízení GDPR.

Tabulky v HTML

Tabulky pro HTML přehledně
Předchozí Následující

#1 Tabulka

Tabulka slouží k rozdělení informací do sloupců a řádků. Vše co se nalézá v tabulce je mezi tagy <table> a </table>.

Řádky a sloupce

Každý řádek začíná tagem <tr> („table row“) a končí </tr>. Do řádku se vkládají buňky. Sloupce jako prvek neexistují, jelikož se vytváří sami podle toho kolik je v daném řádků buněk. Z tohoto důvodu tak lze vytvářet i zubaté tabulky, které mají jiný počet sloupců v každém řádku. Většinou se však doporučuje mít kvůli vzhledu v každém řádku stejný počet sloupců i když prázdných.

Buňky tabulky

Každá buňka tabulky je definována prvkem <td> – „table data“, který vytváří celky obsahu. Obsahem může být text, obrázky, nadpisy…

<table>
 <tr>
  <td>První buňka</td>
  <td>Druhá buňka</td>
 </tr>
 <tr>
  <td>Třetí buňka</td>
 </tr>
</table>

Hlavička tabulky

V některých tabulkách je potřeba mít také zvýrazněnou hlavičku nebo sloupec tabulky, který tabulku definuje (často pro seznamy). Pokud takovou buňku potřebujeme, nahradíme tag <td> s tagem <th> – „table header“ – který definuje právě zvýrazněnou buňku – hlavičku. Hlavička tabulky má tučné formátování a zarovnání na střed.

Příklad tabulky, kde je jako hlavička ID a název položky, v následujících řádcích již vyjmenované položky.

<table>
 <tr>
  <th>ID</th>
  <th>Název</th>
 </tr>
 <tr>
  <td>1</td>
  <td>AB10</td>
 </tr>
 <tr>
  <td>2</td>
  <td>B2C0</td>
 </tr>
 <tr>
  <td>3</td>
  <td>C024</td>
 </tr>
</table>