Tomáš Daněk

Tabulka umožňuje prezentovat data „dvojrozměrně“ – uživatel může tato data vnímat jak v řádcích tak ve sloupcích. To je u mnoha typů dat vhodný a většinou nenahraditelný prostředek např. u programů, ceníků, srovnávání atd.

Z této „dvojrozměrnosti“ však vyplývají i nevýhody, tabulka musí být prezentována ve dvojrozměrném výstupu (obrazovce) a pokud možno celá najednou. Bohužel ne všechna zařízení pro práci s webem (např. čtečky obrazovky) mají tyto schopnosti. Proto je lepší použití tabulky nejprve zvážit, a pokud je data možné reprezentovat jinou formou (např. pomocí výčtu), použít tuto formu nebo ji alespoň nabídnout jako alternativu k tabulce.

Každá tabulka v (X)HTML je tvořena svým titulkem a samotnými daty. Ta se nacházejí v takzvaných buňkách. Každá buňka patří minimálně do jednoho řádku a jednoho sloupce. Řádky se mohou seskupovat do skupin řádků a sloupce do skupin sloupců.

Příklad jednoduché tabulky:

<table border="1" cellspacing="0" summary="Tabulka obsahuje
  3 sloupce a 1 řádek a ukazuje možnosti zobrazení tabulek
  u webových stránek.">
  <caption>Jednoduchá tabulka</caption>
  <tr>
    <th>Hlavičková buňka</th>
    <td>Datová buňka 1</td>
    <td>Datová buňka 2</td>
  </tr>
</table>

Tabulka <table>

Povolený obsah:

• titulek (nadpis) <caption>
  • nepovinný
  • pouze jeden
• definice skupiny sloupců <colgroup> a vlastností sloupců <col>
  • nepovinný
  • libovolné množství
• záhlaví <thead>
  • nepovinný
  • pouze jeden
• zápatí <tfoot>
  • nepovinný
  • pouze jeden
• tělo: <tbody> nebo řádek <tr>
  • povinný
  • jeden, nebo více (odlišná témata s jiným významem)

Pomocí atributu summary vždy uvádějte popis tabulky tj. souhrn účelu a struktury tabulky pro nevizuální interprety.

Řádky tabulky <tr>

Povolený obsah:

• hlavičková buňka <th>
• datová buňka <td>

Hlavičková <th> a datová <td> buňka tabulky

Povolený obsah:

• blokové elementy
• řádkové elementy
• text

Některé povolené atributy:

• rowspan – přes kolik řádků se daná buňka rozpíná
  • výchozí hodnotou je 1
  • hodnota 0 znamená, že buňka se rozpíná přes všechny řádky od toho, v kterém se nachází, až po konec skupiny řádků (thead, tbody a tfoot), v které se nachází
• colspan – přes kolik sloupců se daná buňka rozpíná
  • výchozí hodnotou je 1
  • hodnota 0 znamená, že buňka se rozpíná přes všechny sloupce od toho, v kterém se nachází, až po konec skupiny sloupců (colgroup), v které se nachází

Poznámka:

Do prázdných buněk je vhodné vložit znakovou entitu &nbsp; nebo mezeru z důvodu zpětné kompatibility prohlížečů.

Příklad složitější tabulky:

<table border="1" cellspacing="0" summary="Tabulka obsahuje
  6 sloupců a 10 řádků. V prvním řádku je uveden popis sloupců.
  1. soupec obsahuje den, 2. pořádanou akci, 3. čas,
  4. učastníky, 5. místo a 6. poznámky.">
  <caption>Program na&nbsp;víkend</caption>
  <colgroup class="den"><!-- nastaveni tridy pro prvni sloupec -->
    <col />
  </colgroup>
  <colgroup class="akce"><!-- nastaveni tridy pro druhy az treti
    sloupec -->
    <col span="2" /><!-- nastaveni atributu zahrnuje 2 sloupce -->
  </colgroup>
  <thead>
    <tr>
      <th>Den</th>
      <th>Akce</th>
      <th>Čas [h]</th>
      <th>Účast</th>
      <th>Místo</th>
      <th>Poznámky</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="2">Pátek</th>
      <td>Příjezd</td>
      <td>do 19.00</td>
      <td>Všichni</td>
      <td>Hlavní vchod</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Ubytování</td>
      <td>19.00–20.00</td>
      <td>Všichni</td>
      <td>Perníková chaloupka</td>
      <td>Přezůvky nutné</td>
    </tr>
    <tr>
      <th rowspan="4">Sobota</th>
      <td>Snídaně</td>
      <td>8.00–8.30</td>
      <td>Všichni</td>
      <td rowspan="2">Jídelna</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Oběd</td>
      <td>12.00–13.00</td>
      <td>Pouze zájemci</td>
      <td>Vlastní příbor</td>
    </tr>
    <tr>
      <td>Svačina</td>
      <td>15.00–15.30</td>
      <td>Muži</td>
      <td>Ovocný sad</td>
      <td>Vlastní žebřík</td>
    </tr>
    <tr>
      <td>Večeře</td>
      <td>18.00–19.00</td>
      <td>Do hmotnosti 80&nbsp;kg</td>
      <td>Palouček před jídelnou</td>
      <td>Vlastní deka nutná</td>
    </tr>
    <tr>
      <th rowspan="3">Neděle</th>
      <td>Snídaně</td>
      <td>8.00–8.30</td>
      <td>Všichni</td>
      <td rowspan="2">Jídelna</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Oběd</td>
      <td>12.00–13.00</td>
      <td>Pouze zájemci</td>
      <td>Vlastní příbor</td>
    </tr>
    <tr>
      <td>Odjezd</td>
      <td>13.00</td>
      <td>Všichni</td>
      <td>Hlavní parkoviště</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

Alternativní způsob zobrazení složitější tabulky:

<h3>Program na&nbsp;víkend</h3>
<h4>Pátek</h4>
<ul>
  <li>Příjezd
    <ul>
      <li><strong>Čas:</strong> do 19.00&nbsp;h</li>
      <li><strong>Účast:</strong> Všichni</li>
      <li><strong>Místo:</strong> Hlavní vchod</li>
    </ul>
  </li>
  <li>Ubytování
    <ul>
      <li><strong>Čas:</strong> 19.00–20.00&nbsp;h</li>
      <li><strong>Účast:</strong> Všichni</li>
      <li><strong>Místo:</strong> Perníková chaloupka</li>
      <li><strong>Poznámka:</strong> Přezůvky nutné</li>
    </ul>
  </li>
</ul>
<h4>Sobota</h4>
<ul>
  <li>Snídaně
    <ul>
      <li><strong>Čas:</strong> 8.00–8.30&nbsp;h</li>
      <li><strong>Účast:</strong> Všichni</li>
      <li><strong>Místo:</strong> Jídelna</li>
    </ul>
  </li>
  <li>Oběd
    <ul>
      <li><strong>Čas:</strong> 12.00–13.00&nbsp;h</li>
      <li><strong>Účast:</strong> Pouze zájemci</li>
      <li><strong>Místo:</strong> Jídelna</li>
      <li><strong>Poznámka:</strong> Vlastní příbor</li>
    </ul>
  </li>
  <li>Svačina
    <ul>
      <li><strong>Čas:</strong> 15.00–15.30&nbsp;h</li>
      <li><strong>Účast:</strong> Muži</li>
      <li><strong>Místo:</strong> Ovocný sad</li>
      <li><strong>Poznámka:</strong> Vlastní žebřík</li>
    </ul>
  </li>
  <li>Večeře
    <ul>
      <li><strong>Čas:</strong> 18.00–19.00&nbsp;h</li>
      <li><strong>Účast:</strong> Do hmotnosti 80&nbsp;kg</li>
      <li><strong>Místo:</strong> Palouček před jídelnou</li>
      <li><strong>Poznámka:</strong> Vlastní deka nutná</li>
    </ul>
  </li>
</ul>
<h4>Neděle</h4>
<ul>
  <li>Snídaně
    <ul>
      <li><strong>Čas:</strong> 8.00–8.30&nbsp;h</li>
      <li><strong>Účast:</strong> Všichni</li>
      <li><strong>Místo:</strong> Jídelna</li>
    </ul>
  </li>
  <li>Oběd
    <ul>
      <li><strong>Čas:</strong> 12.00–13.00&nbsp;h</li>
      <li><strong>Účast:</strong> Pouze zájemci</li>
      <li><strong>Místo:</strong> Jídelna</li>
      <li><strong>Poznámka:</strong> Vlastní příbor</li>
    </ul>
  </li>
  <li>Odjezd
    <ul>
      <li><strong>Čas:</strong> 13.00&nbsp;h</li>
      <li><strong>Účast:</strong> Všichni</li>
      <li><strong>Místo:</strong> Hlavní parkoviště</li>
    </ul>
  </li>
</ul>