Jak udělat tabulku v HTML

Tabulka se hodí vždy, když potřebujete přehledně zobrazit data v řádcích a sloupcích – ceník, rozvrh, přehled parametrů. V HTML na ni stačí pár jednoduchých značek a za chvíli si vlastní tabulku složíte. Hned na začátku ale jedno důležité pravidlo: tabulka je na data, ne na rozvržení stránky. K tomu se vrátíme na konci.

Z čeho se tabulka skládá

Tabulka stojí na třech značkách, které do sebe zapadají:

• <table> – celá tabulka (obal kolem všeho).
• <tr> – jeden řádek (table row).
• <td> – jedna buňka v řádku (table data).

Nejmenší smysluplná tabulka – dva řádky po dvou buňkách – vypadá takto:

<table>
  <tr>
    <td>Jablka</td>
    <td>25 Kč</td>
  </tr>
  <tr>
    <td>Hrušky</td>
    <td>30 Kč</td>
  </tr>
</table>

Počet <tr> určuje počet řádků, počet <td> uvnitř řádku počet sloupců. Hlídejte, ať má každý řádek stejně buněk – jinak se tabulka „rozjede".

Hlavička tabulky

Záhlaví sloupců (třeba „Zboží" a „Cena") se píše značkou <th> místo <td>. Prohlížeč text v <th> sám ztuční a vycentruje a je to zároveň důležité pro přístupnost – čtečky obrazovky pak vědí, co která buňka znamená.

<table>
  <tr>
    <th>Zboží</th>
    <th>Cena</th>
  </tr>
  <tr>
    <td>Jablka</td>
    <td>25 Kč</td>
  </tr>
</table>

A takhle vypadá hotová tabulka v prohlížeči (s trochou vzhledu, ke kterému se hned dostaneme):

Spojení více buněk do jedné

Někdy potřebujete, aby jedna buňka zabrala víc sloupců nebo řádků. Na to jsou dva 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">Celkem: 55 Kč</td>
</tr>

Trochu vzhledu přes CSS

Samotná tabulka je bez čar a nalepená na sebe. Ohraničení, odsazení a barvu hlavičky přidáte pár řádky CSS:

table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ccc; padding: 8px 12px; text-align: left; }
th { background: #f0f4f8; }

border-collapse: collapse sloučí dvojité čáry mezi buňkami do jedné – bez něj má tabulka kolem buněk ošklivé mezery.

Kdy tabulku použít a kdy ne

Ano: ceníky, rozvrhy, technické parametry, srovnání – zkrátka cokoli, co má přirozeně řádky a sloupce.

Ne: na rozvržení celé stránky (menu nahoře, obsah, patička dole). Dřív se to tak dělalo, dnes je to ale chyba – web se pak hůř upravuje a na mobilu se rozpadne. Na rozvržení používejte CSS (flexbox nebo grid), jak jsme si ukazovali v návodech o CSS.

Časté chyby

• Různý počet buněk v řádcích. Když má jeden řádek tři buňky a druhý dvě, tabulka se zdeformuje. Dopočítejte prázdnou <td></td>.
• Zapomenuté </tr> nebo </td>. Neuzavřená buňka rozhodí celou tabulku – značky vždy párujte.
• Tabulka na rozvržení stránky. Viz výše: na layout nepatří, jen na data.