HTML & CSS pre začiatočníkov (časť 07): Tabuľky (01)

Tabuľky sú pomerne zložité stavby, ktoré sa skladajú z riadkov a stĺpcov. Vonkajšia konštrukcia tabuliek vždy tvorí prvok table.

<table>
…
</table>

V tomto prvku sa vykonáva skutočné definovanie tabuliek. Je mimochodom odporúčané priradiť tabuľke obrysový rám počas implementácie v HTML. Tak môžete lepšie pochopiť, ako presne sú riadky a stĺpce umiestnené. Preto priradíte prvku <table> kombináciu hodnôt atribútu border="1". (Pamätajte, že atribút border by sa nemal používať v HTML. Miesto toho sa používajú príslušné vlastnosti CSS. O tom však neskôr viac).

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

Pokračujeme definovaním riadkov tabuliek. To sa deje prostredníctvom prvku tr.

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

To však ešte nevedie k požadovanému výstupu. Ďalším krokom je totiž definovanie stĺpcov. Opäť sa to deje prostredníctvom prvku td.

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

Teraz môžete definovať prvý obsah tabuľky. Definuje sa medzi <td> a </td&ampgt;.

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

Až teraz sa oplatí pozrieť sa na výsledok v prehliadači.

td. Dajte si pozor, aby ste ho definovali v rámci prvku tr.

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

Znova sa pozrite na výsledok.

Na pridanie ďalších riadkov do tabuľky jednoducho vytvorte ďalší prvok tr, v ktorom sa potom opäť definujú žiadané prvky td.

Takže tu je ďalší prí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>

Pozrite sa na výsledok v prehliadači, zobrazí sa nasledovné:





Takto môžete vytvárať aj rozsiahle tabuľky.

Nastavenie hlavičky, tela a päty

Tabuľky môžete rozdeliť do logických oblastí. Ide o hlavičku, jednu alebo viacero oblastí s údajmi a päta. Nasledujúci príklad ukazuje, ako by to mohlo vyzerať:

<table border="1">
  <thead>
    <tr>
      <th>Odchod</th>
      <th>Príchod</th>
      <th>Nástupište</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Berlín</td>
      <td>Stralsund</td>
      <td>5</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlín</td>
      <td>Hamburg</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Mníchov</td>
      <td>Berlín</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

A tu je pohľad na výsledok v prehliadači:





Rozdelenie do uvedených oblastí nemá zjavne žiadny vizuálny účinok. Samozrejme, opýta sa človek: Prečo by sa malo venovať úsiliu a tieto oblasti definovať? Na to existujú dva dobré dôvody:

• Pomocou CSS môžete oblasti podľa potreby odlišne formátovať.

• Pri tlači dlhých tabuliek môžu prehliadače opakovať hlavičku tabuľky a jej pätu na každej strane.

Hlavička tabuľky sa začne značkou thead. Nasledujú riadky tabuľky, ktoré patria do oblasti hlavičky. Nezabudnite znova zavrieť hlavičku </thead>.

Ak má tabuľka získať päty, musí byť táto nevyhnutne definovaná pred telom tabuľky. Fľaša sa uvádza pomocou značky <tfoot>. Nasledovať môže opäť jeden alebo viac riadkov, ktoré patria do oblasti päty. Päta tabuľky sa uzavrie značkou </tfoot>.

Samotné telo tabuľky sa definuje vnútri prvku tbody. Tento tbody môže byť viackrát. Telo tabuľky sa uzavrie vždy pomocou </tbody>.

Prečo by ste napríklad v tabuľke mali použiť viacero prvkov tbody? Pekným príkladom môže byť tabuľka Bundesligy. V takejto tabuľke je bežne viacero oblastí.

• Majster

• Účastníci Ligy majstrov

• Kvalifikant Ligy majstrov

• Účastníci Európskej ligy

• Šedé stredu

• Záchranári

• Zostupujúci

Do každej z týchto oblastí by ste mohli vložiť vlastný prvok tbody a tieto potom pomocou CSS inak formátovať.

Definovanie predvolených stĺpcov

Ako je tabuľka zobrazená v prehliadačoch, závisí samozrejme predovšetkým od počtu riadkov a stĺpcov. Proces zobrazovania tabuľky nie je pre prehliadač úplne jednoduchý. Skutočnosť je taká, že prehliadač musí vždy najskôr celú tabuľku načítať, než ju môže zobraziť. Pri veľmi rozsiahlych tabuľkách to môže samozrejme trvať určitý čas. Tento problém sa dá obísť tým, že sa priamo prehliadaču oznámi, z koľkých stĺpcov tabuľka v skutočnosti pozostáva.

<table>
   <colgroup span="2"></colgroup>
   <tr>
     <th>ISBN</th>
     <th>Titulok</th>
     <th>Cena</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Krátky príbeh o takmer všetkom</td>
     <td>29,95 eur</td>
   </tr>
 </table>

Predvolené stĺpce sa zavádzajú pomocou colgroup. Treba si uvedomiť, že väčšina atribútov dostupných v predchádzajúcich verziách HTML pre colgroup už v HTML5 nie je povolená. Je povolený iba atribút span, ktorý očakáva počet stĺpcov v tabuľke.

Element colgroup nasleduje tesne za úvodným <table>. Stĺpce samotné sa potom definujú jednotlivými prvkami col.

Pri použití colgroup máte zásadne dve možnosti:

• S atribútom span

• Bez atribútu span

Ak nevyužijete atribút span, musí byť v rámci elementu colgroup pre každý stĺpec, ktorý má byť pokrytý skupinou stĺpcov, definovaný prvok col. Myslite na to, že col je samostatným prvkom.

<table>
   <colgroup>
   <col />
   <col />
 </colgroup>
   <tr>
     <th>ISBN</th>
     <th>Titulok</th>
     <th>Cena</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Krátky príbeh o takmer všetkom</td>
     <td>29,95 eur</td>
   </tr>
 </table>

Mimochodom, existuje aj zmiešaná forma.

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

Je to vždy užitočné, keď sa jeden stĺpec má preddefinovať samostatne, ale ostatné sa majú zoskupiť do skupiny.