Tabuľky v jazyku HTML (tag TABLE)

V tejto časti HTML tutoriálu si podrobnejšie prejdeme možnosti tvorby tabuliek.

Ako sme už načrtli v úvodnej časti HTML tutoriálu, základné elementy pre tvorbu tabuliek zastrešujú tieto tagy:

• tag table ako hlavný (obaľovací) element pre celú tabuľku
• tag tr pre vloženie riadku do tabuľky (angl. table row)
• tag td pre vloženie bunky do riadku tabuľky (angl. table data)

V ukážke nižšie vidíme zdrojový kód pre základnú štruktúru HTML tabuľky.

<table border="1">
  <tr>
    <td>riadok 1, bunka 1</td>
    <td>riadok 1, bunka 2</td>
  </tr>
  <tr>
    <td>riadok 2, bunka 1</td>
    <td>riadok 2, bunka 2</td>
  </tr>
</table>

K základným operáciám štruktúrovania tabuliek patrí používanie atribútov pre spájanie riadkov tabuľky, spájanie stĺpcov a nastavenie vizuálnych vlastností tabuľky (okrajov a zarovnania). Používame na to tieto tagy:

• atribút colspan pre spojenie dvoch buniek vedľa seba
• atribút rowspan pre spojenie dvoch buniek nad sebou
• atribút border pre nastavenie hrúbky okrajov
• atribút width pre nastavenie šírky tabuľky alebo bunky (buď percentuálne z celej šírky alebo v nejakej mierke, napr. v pixeloch [px])
• atribút cellpadding pre nastavenie odsadenia obsahu od okrajov bunky
• atribút cellspacing pre nastavenie odsadenia bunky od okolitých buniek tabuľky

Na ukážke HTML tabuľky nižšie vidíme, ako a správajú jednotlivé atribúty tabuľky.

<table border="2" cellspacing="10" cellpadding="7" width="75%">
  <tr>
    <td>riadok 1, bunka 1</td>
    <td>riadok 1, bunka 2</td>
  </tr>
  <tr>
    <td colspan="2">riadok 2, bunka 1 aj bunka 2 spolu</td>
  </tr>
  <tr>
    <td>riadok 3, bunka 1</td>
    <td rowspan="2">riadok 3 aj riadok 4 spolu, bunka 2</td>
  </tr>
  <tr>
    <td>riadok 4, bunka 1</td>
  </tr>
</table>

Oblasti HTML tabuľky

V tabuľke sa zvyčajne nachádzajú dva typy buniek: bunky obsahujúce názvy stĺpcov a bunky obsahujúce dáta. Na oddelenie názvov stĺpcov od dát sa zvykne tabuľka (resp. bunky) rozdeliť do oblastí:

• thead ako hlavička tabuľky, kde sa uvádzajú názvy stĺpcov

• tbody ako telo tabuľky, kde je samotný obsah tabuľky (hodnoty údajov)

• tfoot ako pätička tabuľky, kde sa uvádzajú napríklad súčty hodnôt

Okrem tagu td, ktorým sa štandardne definuje bunka tabuľky, existuje ešte tag th, ktorý sa zvykne používať pre bunky, ktoré sú súčasťou názvov.

Ak chceme tabuľku nejak pomenovať, vieme použiť tag caption pre popis tabuľky.

<table border="2">
  <caption>Tabuľka mojich hodnôt pre HTML tutoriál</caption>
  <thead>
    <tr>
      <th> TABUĽKA </th>
      <th>Stĺpec 1</th>
      <th>Stĺpec 2</th>
      <th>Stĺpec 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Riadok 1</th>
      <td>5</td>
      <td>4</td>
      <td>3</td>
    </tr>
    <tr>
      <th>Riadok 2</th>
      <td>3</td>
      <td>2</td>
      <td>7</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Spolu</th>
      <td>8</td>
      <td>6</td>
      <td>10</td>
    </tr>
  </tfoot>
</table>

Ak chceme umiestniť popis tabuľky dole (pod tabuľku), stačí pridať CSS pravidlo do atribútu style (caption-side:bottom). Podobne vieme upraviť aj zarovnanie v bunkách tabuľky (cez parameter text-align:right - zarovnanie doprava).

<table border="2" cellpadding="4">
  <caption style="caption-side:bottom">Tabuľka mojich hodnôt pre HTML tutoriál</caption>
  <thead>
    <tr>
      <th> TABUĽKA </th>
      <th>Stĺpec 1</th>
      <th>Stĺpec 2</th>
      <th>Stĺpec 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Riadok 1</th>
      <td style="text-align:right">5</td>
      <td style="text-align:right">4</td>
      <td style="text-align:right">3</td>
    </tr>
    <tr>
      <th>Riadok 2</th>
      <td style="text-align:right">3</td>
      <td style="text-align:right">2</td>
      <td style="text-align:right">7</td>
    </tr>
  </tbody>
</table>

Tagy pre oblasti tabuľky thead, tbody a tfoot sú tzv. sémantické tagy. Sémantické tagy sú také, ktorých úlohou je definovať význam (v našom prípade rozlíšiť dáta tabuľky od názvov stĺpcov). O sémantike v jazyku HTML si viac povieme neskôr. Nateraz stačí vedieť, že existujú takéto obaľovacie tagy v tabuľke, pomocou ktorých vieme oddeliť dáta od popisu dát, keby sme to niekedy potrebovali.

Definovanie vlastností pre riadky a stĺpce tabuľky

Keď chceme nastaviť nejaké vlastnosti pre riadok tabuľky, je to pomerne jednoduché. Stačí tieto vlastnosti zadať do tagu tr a oni sa aplikujú na všetky vnorené bunky (všetky bunky tohto riadku).

V prípade stĺpcov je to zložitejšie. Preto existujú tagy colgroup a col, pomocou ktorých vieme zadefinovať vlastnosti po stĺpcoch (naprieč všetkými riadkami). Pre spojenie viac stĺpcov vieme použiť atribút span, kde ako hodnotu uvedieme počet stĺpcov. Tieto tagy sa zvyknú dávať na začiatok tabuľky hneď za otvárací tag table

<table border="2" cellspacing="9">
  <colgroup>
    <col style="background-color: pink;">
    <col span="3" style="background-color: lime;">
  </colgroup>
  <thead>
    <tr style="background-color: orange;">
      <th> TABUĽKA </th>
      <th>Stĺpec 1</th>
      <th>Stĺpec 2</th>
      <th>Stĺpec 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Riadok 1</th>
      <td>5</td>
      <td>4</td>
      <td>3</td>
    </tr>
    <tr>
      <th>Riadok 2</th>
      <td>3</td>
      <td>2</td>
      <td>7</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Spolu</th>
      <td>8</td>
      <td>6</td>
      <td>10</td>
    </tr>
  </tfoot>
</table>

Poznámka na záver k štýlovaniu tabuliek: v rámci tejto kapitoly HTML tutoriálu o tabuľkách sme si ukázali aj použitie atribútov, ktoré nastavujú vizuálnu podobu tabuľky (zmena hrúbky okrajov buniek, farba pozadia a pod.). Tieto vizuálne vlastnosti sa v jazyku HTML nezvyknú používať a ani neodporúčajú. My sme ich takto uvádzali pre jednoduchšie vysvetlenie a tiež preto, že nie každý pozná jazyk CSS, ktorým sa dá dosiahnuť to isté, a ešte efektívnejšie. Pre vizuálne (grafické) úpravy dokumentu je lepšie použiť jazyk CSS. Vkladanie pravidiel CSS na vizuálnu úpravu vlastností sme demonštrovali cez atribút style. Viac o použití jazyka CSS na štýlovanie HTML dokumentov nájdete v kapitole Úvod do CSS

HTML tabuľky - zhrnutie tutoriálu