HTML a CSS pro začátečníky (část 07): Tabulky (01)

Tabulky jsou docela složité struktury, které se skládají z řádků a sloupců. Vnější základní strukturu tabulek vždy tvoří prvek table.

<table>
…
</table>

Uvnitř tohoto prvku probíhá vlastní definice tabulky. Mimochodem, je doporučeno během implementace tabulky v HTML přiřadit rámeček. Tak si můžete lépe představit, jak přesně probíhají řádky a sloupce. K tomu přiřadíte počátečnímu <table> kombinaci atributů border="1". (Vezměte na vědomí, že atribut border by neměl být v HTML používán. Místo toho se k daným CSS vlastnostem uchylujeme. O tom později víc).

<table border="1">
…
</table>

Pokračujeme s definicí řádků tabulky. To se děje pomocí prvku tr.

<table border="1">
   <tr></tr>
</table>

To ale ještě nevede k požadovanému výstupu. Následně je třeba definovat sloupce. To se opět provádí pomocí prvku td.

<table border="1">
   <tr>
      <td></td>
   </tr>
</table>

Nyní můžete definovat první obsah tabulky. To se definuje mezi <td> a </td>.

<table border="1">
   <tr>
      <td>Obsah 1</td>
   </tr>
</table>

Teprve teď se vyplatí podívat na výsledek v prohlížeči.

Zatím to není zas tak překvapivé, koneckonců tabulka momentálně sestává jen z jedné buňky. Nyní můžete přidat další sloupec. To se opět provádí pomocí prvku td. Dbejte na to, abyste ho definovali uvnitř prvku tr.

<table border="1">
   <tr>
      <td>Obsah 1</td>
      <td>Obsah 2</td>
   </tr>
</table>

Zde opět pohled na výsledek.

Pro přidání dalších řádek do tabulky jednoduše vytvoříte další prvek tr, ve kterém pak opět definovali požadované prvky td.

Zde je další příklad:

<table border="1">
   <tr>
      <td>Obsah 1</td>
      <td>Obsah 2</td>
   </tr>
   <tr>
      <td>Obsah 3</td>
      <td>Obsah 4</td>
   </tr>
</table>

Pohled na výsledek v prohlížeči poskytuje následující:





Tímto způsobem můžete vytvářet i rozsáhlé tabulky.

Definovat hlavičku, tělo a patu

Tabulky lze rozdělit na logické oblasti. Jednou z nich je hlavička, jedna nebo více oblastí dat a patička. Následující příklad ukazuje, jak to může vypadat:

<table border="1">
  <thead>
    <tr>
      <th>Odjezd</th>
      <th>Příjezd</th>
      <th>Nástupiště</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Berlín</td>
      <td>Stralsund</td>
      <td>5</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlín</td>
      <td>Hamburk</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Mnichov</td>
      <td>Berlín</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

A zde je pohled na výsledek v prohlížeči:





Rozdělení na uvedené oblasti nemá zjevný vizuální efekt. Samozřejmě se nabízí otázka: Proč byste se pak měli obtěžovat a tyto oblasti definovat? Na to existují dva dobré důvody:

• Pomocí CSS lze oblasti podle potřeby různě formátovat.

• Prohlížeče při tisku dlouhých tabulek mohou opakovat tabulkovou hlavičku a tabulkovou patu na každé stránce.

Hlavička tabulky je zavedena pomocí thead. Začínají řádky tabulky patřící do hlavičky. Nezapomeňte uzavřít hlavičku </thead>.

Pokud má tabulka získat patičku, musí být tato definována před tělem tabulky. Pata je zahájena pomocí <tfoot>. Následně mohou následovat opět jedna nebo více řádků patřících do paty. Patu tabulky ukončíte pomocí </tfoot>.

Samotné tělo tabulky se definuje uvnitř prvku tbody. Toto tbody může být vícekrát použito. Každé tělo tabulky se uzavře pomocí </tbody>.

Proč byste například v tabulce používali více prvků tbody? Příkladem může být tabulka německé fotbalové ligy. V takové tabulce obvykle existuje více oblastí.

• Mistři

• Účastníci Ligy mistrů

• Kvalifikanti Ligy mistrů

• Účastníci Evropské ligy

• Střed pole

• Play-off

• Sestupující

Každou tuto oblast můžete umístit do vlastního prvku tbody a poté je formátovat pomocí CSS odlišně.

Předdefinování sloupců

To, jak je tabulka zobrazena v prohlížečích, závisí přirozeně především na existujícím počtu řádků a sloupců. Proces zobrazení tabulky pro prohlížeč však není zcela jednoduchý. Prohlížeč totiž musí nejprve celou tabulku načíst, než ji může zobrazit. Zejména u velmi rozsáhlých tabulek to může samozřejmě trvat určitý čas. Tento problém lze obejít tím, že se přímo sdělí prohlížeči, ze kolika sloupců tabulka skutečně sestává.

<table>
   <colgroup span="2"></colgroup>
   <tr>
     <th>ISBN</th>
     <th>Titul</th>
     <th>Cena</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Krátké dějiny téměř všeho</td>
     <td>29,95 eur</td>
   </tr>
 </table>

Pomocí colgroup se zahájí předdefinování sloupcových informací. Všimněte si, že většina atributů dostupných v dřívějších verzích HTML pro colgroup již v HTML5 není povolena. Ze všech je nyní povolen pouze atribut span. Jako hodnotu očekává tento atribut span počet sloupců v tabulce.

Prvek colgroup je umístěn přímo za zahajujícím <table>. Sloupce samotné jsou pak definovány jednotlivými prvky col.

Při použití colgroup jsou obecně k dispozici dvě možnosti:

• S atributem span

• Bez atributu span

Pokud není použit atribut span, musí být uvnitř prvku colgroup pro každý sloupec, který by měl být zahrnut v grupě sloupců, definován jednotlivý prvek col. Všimněte si, že prvek col je samostatný prvek.

<table>
   <colgroup>
   <col />
   <col />
 </colgroup>
   <tr>
     <th>ISBN</th>
     <th>Titul</th>
     <th>Cena</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Krátké dějiny téměř všeho</td>
     <td>29,95 eur</td>
   </tr>
 </table>

Existuje také hybridní forma.

<table> 
 <colgroup> 
 <col> 
 </colgroup> 
 <colgroup span="2"></colgroup>
 …

Tato metoda je vždy praktická, pokud je sloupec předdefinován samostatně, zatímco ostatní jsou seskupeny do jedné skupiny.