Jste zde

Domů » 1. sada: Základy HTML a CSS » 8. HTML - vytváření tabulek

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í:

  1. Vymezení části HTML souboru pro tabulku
  2. Hlavička tabulky
  3. Tělo tabulky
  4. Řádek tabulky
  5. 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