8.1 HTML - vytváření tabulek (studijní text)

Vytváření tabulek pomocí HTML není až tak jednoduché, je potřeba dodržet požadovanou strukturu. Tabulka se skládá z několika částí:

Vymezení části HTML souboru pro tabulku
Hlavička tabulky
Tělo tabulky
Řádek tabulky
Buňka tabulky

1. Vymezení části HTML souboru pro tabulky

tabulka se vymezuje párovou značkou <TABLE> (stejně jako HTML soubor se vymezuje značkou <html>)
v podstatě tím říkáte: "Tady začíná tabulka a tady tabulka končí."

libovolný obsah
<table>
  obsah tabulky
</table>
libovolný obsah

2. Hlavička tabulky

každá tabulka obsahuje hlavičku (záhlaví), která se vymezuje párovou značkou <THEAD>
v hlavičce jsou většinou uvedeny popisy sloupců tabulky

<table>
  <thead>
    obsah hlavičky
  </thead>
</table>

3. Tělo tabulky

tělo tabulky obsahuje hlavní obsah tabulky a vymezuje ho párová značka <TBODY>

<table>
  <thead>
    obsah hlavičky
  </thead>
  <tbody>
    hlavní obsah tabulky
  </tbody>
</table>

4. Řádek tabulky

každá tabulka se skládá z jednotlivých řádků, které vymezuje párová značka <TR>
alespoň jeden řádek musí obsah hlavička tabulky, tělo tabulky a patička tabulky (pokud je definována)

<table>
  <thead>
    <tr>
    první řádek
    </tr>
  </thead>
  <tbody>
    <tr>
    druhý řádek
    </tr>
    <tr>
    třetí řádek
    </tr>
  </tbody>
</table>

5. Buňka tabulky

buňka tabulky je nejmenší nedělitelná část tabulky
rozděluje každý řádek na požadovaný počet buněk neboli sloupců
existují dva typy buněk:
- buňka záhlaví tabulky se vymezuje párovou značkou <TH>
- buňka těla tabulky se vymezuje párovou značkou <TD>

<table>
  <thead>
    <tr>
      <th>první buňka prvního řádku</th>
      <th>druhá buňka prvního řádku</th>
      <th>třetí buňka prvního řádku</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>první buňka druhého řádku</td>
      <td>druhá buňka druhého řádku</td>
      <td>třetí buňka druhého řádku</td>
    </tr>
    <tr>
      <td>první buňka třetího řádku</td>
      <td>druhá buňka třetího řádku</td>
      <td>třetí buňka třetího řádku</td>
    </tr>
  </tbody>
</table>

Vodorovné sloučení buněk

Vodorovné sloučení buněk (neboli sloučení v řádku) se provádí pomocí atributu COLSPAN s hodnotou uvádějící počet sloučených buněk. Atribut colspan lze použít jen u značek <td> nebo <th>.

<table>
  <thead>
    <tr>
      <th colspan="3">sloučené všechny tři buňky prvního řádku</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>první buňka druhého řádku</td>
      <td>druhá buňka druhého řádku</td>
      <td>třetí buňka druhého řádku</td>
    </tr>
    <tr>
      <td>první buňka třetího řádku</td>
      <td colspan="2">sloučená druhá a třetí buňka třetího řádku</td>
    </tr>
  </tbody>
</table>

Výsledek

Svislé sloučení buněk

Svislé sloučení buněk (neboli sloučení v sloupci) se provádí pomocí atributu ROWSPAN s hodnotou uvádějící počet sloučených buněk. Atribut ROWSPAN lze použít jen u značek <TD> nebo <TH>.

<table>
  <thead>
    <tr>
      <th>první buňka prvního řádku</th>
      <th>druhá buňka prvního řádku</th>
      <th>třetí buňka prvního řádku</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">sloučené první buňky druhého a třetího řádku</td>
      <td>druhá buňka druhého řádku</td>
      <td>třetí buňka druhého řádku</td>
    </tr>
    <tr>
      <td>druhá buňka třetího řádku</td>
      <td>třetí buňka třetího řádku</td>
    </tr>
  </tbody>
</table>

Výsledek