8. HTML - vytváření tabulek

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_08

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: HTML - vytváření tabulek

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Vytváření tabulek pomocí jazyka HTML.

Klíčová slova: tabulka, table, řádek, tr, buňka, td, hlavička tabulky, thead, tělo tabulky, tbody.

Metodické zhodnocení: Žáci se naučí vytvářet tabulky pomocí jazyka HTML.

Ověřeno: 4. 3. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

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

8.2 HTML - vytváření tabulek (cvičení)

Úkol č.1

Založte si ve složce WWW novou složku CV08.
Ze složky CV07 si zkopírujte všechny HTML soubory a složku IMG.

Úkol č.2

V souboru cleneni.html vytvořte před nadpisem "Použité zdroje" jednoduchou tabulku podle následujícího klíče:
- tabulka bude vyjmenovávat kraje České republiky, jejich krajská města a písmeno registrační značky,
- bude tedy tvořit 3 sloupce a odpovídající počet řádků,
- záhlaví (hlavička) tabulky se bude skládat ze dvou řádků,
- první řádek záhlaví tabulky bude obsahovat text "Kraje České republiky" a bude vodorovně sloučený přes celý řádek (celkem 3 buňky),
- druhý řádek záhlaví bude obsahovat text "Název kraje", "Krajské město", "RZ",
- pro zobrazení ohraničení doplňte do značky <table> atribut border="2".
Zkontrolujte na případné a chyby a uložte.