6. diel - Jednoduché tabuľky v HTML

V minulej lekcii, Zoznamy v HTML , sme si ukázali tagy k tvorbe zoznamu, medzi ktoré patria <datalist>, <ul>, <li>, <ol>, <dd>, <dt>, <dl> a ďalej atribúty reversed, start, type a value.

Často sa stáva, že na stránkach potrebujeme tabuľku. Tabuľka nám umožňuje vkladať do jej buniek elementy, ktoré sú potom pekne usporiadané. Na rozdiel od odsekov, ktoré sa vždy skladajú pod seba, si môžeme text v tabuľke skladať úhľadne vedľa seba. V bunkách môžu byť okrem textu samozrejme aj obrázky a ďalšie elementy. To sa môže hodiť napríklad k zobrazovaniu nejakých výsledkov, parametrov, štatistík. Napríklad na ITnetwork sa tabuľky okrem iného využívali na výpis programov a lekcií. Z hľadiska responzivity však tieto tabuľky boli nahradené alternatívou, tzv. Grid systémom. Do teraz však tabuľka má využitie (hoci sa to nezdá) napríklad v kalendári:

V administračné sekcii taky môžeme vidieť zoznam článkov v tabuľke, avšak nie je to úplne najideálnejšie:

<table>

Tabuľka sa označuje tagom <table> a obsahuje jednotlivé riadky. Tabuľka má jediný atribút:

border - Označuje šírku rámčeka okolo buniek tabuľky. Predvolená hodnota je 0 a bez uvedenia nemá tabuľka teda žiadny rámček. Pretože formátovanie sa presunulo do CSS, border má podľa nového štandardu HTML5 obsahovať iba hodnoty "" (prázdna hodnota) alebo "1". Tým sa odlíši, či tabuľku používame k obyčajnému rozvrhnutie elementov na stránke (tzv. Layout) alebo v nej máme naozaj nejaké dáta.<tr>

Riadky vkladáme do tabuľky pomocou tagu <tr> (ako T able R ow = riadok tabuľky). Riadok obsahuje jednotlivé bunky.

<td>

Bunky do riadku vkladáme tagom <td> (ako T able D ata = dáta tabuľky). Bunka môže obsahovať text, obrázky a ľubovoľné ďalšie elementy. Predvolené formátovanie je zarovnanie vľavo.

Jednoduchá tabuľka o 3 stĺpcoch a 2 riadkoch by mohla vyzerať takto:

<table border="1">
    <tr>
        <td>První buňka</td>
        <td>Druhá buňka</td>
        <td>A třetí</td>
    </tr>
    <tr>
        <td>Začneme další řádek</td>
        <td>Druhá v druhém řádku</td>
        <td>Poslední buňka</td>
    </tr>
</table>

výsledok:

<th>

Tag <th> môže okrem buniek (<td>) obsahovať tiež špeciálne hlavičkové bunky <th>. Tie sa vkladajú do prvého riadku tabuľky a ten je potom chápaný ako hlavička. Predvolené formátovanie je zarovnanie na stred a tučné písmo. Tabuľka s hlavičkou by mohla vyzerať napr. Takto (pridali sme i obrázky):

<table border="1">
    <tr>
        <th>Náhled</th>
        <th>Typ</th>
        <th>Procesor</th>
        <th>Graf. karta</th>
        <th>Skladem</th>
    </tr>
    <tr>
        <td><img src="images/notebook1.jpg" alt="Notebook" /></td>
        <td>ABC123</td>
        <td>Intel Atom</td>
        <td>NVIDIA</td>
        <td>Ano</td>
    </tr>
    <tr>
        <td><img src="images/notebook2.jpg" alt="Notebook" /></td>
        <td>WTF845</td>
        <td>AMD</td>
        <td>ATI</td>
        <td>Ano</td>
    </tr>
    <tr>
        <td><img src="images/notebook3.jpg" alt="Notebook" /></td>
        <td>OMG666</td>
        <td>Neuvedeno</td>
        <td>Neuvedeno</td>
        <td>Ne</td>
    </tr>
</table>

výsledok:

Atribúty tagov <td> a <th>

colspan

Susedné bunky v tabuľke môžeme zlučovať. Ak budeme zlučovať bunky v riadku, zapíšeme bunku len raz a dáme ju atribút colspan. Ten bude mať hodnotu, koľko buniek prepája. V tabuľke uvedenej vyššie sa ponúka prepojiť bunky Neuvedeno v jednu. Hodnota colspan bunky bude teda 2 (spájame 2 bunky v riadku) a druhú bunku zmažeme. Kód by vyzeral takto:

<table border="1">
  <tr>
        <th>Náhled</th>
        <th>Typ</th>
        <th>Procesor</th>
        <th>Graf. karta</th>
        <th>Skladem</th>
    </tr>
    <tr>
        <td><img src="images/notebook1.jpg" alt="Notebook" /></td>
        <td>ABC123</td>
        <td>Intel Atom</td>
        <td>Nvidia</td>
        <td>Ano</td>
    </tr>
    <tr>
        <td><img src="images/notebook2.jpg" alt="Notebook"></td>
        <td>WTF845</td>
        <td>AMD</td>
        <td>ATI</td>
        <td>Ano</td>
    </tr>
    <tr>
        <td><img src="images/notebook3.jpg" alt="Notebook" /></td>
        <td>OMG666</td>
        <td colspan="2">Neuvedeno</td>
        <td>Ne</td>
    </tr>
  </tbody>
</table>

A výsledok:

rowspan

Obdobne môžeme spájať aj bunky v stĺpci a to pomocou atribútu rowspan, ktorý udáva, cez koľko riadkov sa spája. Urobme si ďalšie ukážku:

<table border="1">
    <tr>
        <td rowspan="2">Sloupec s rowspan</td>
        <td>Druhý sloupec</td>
    </tr>
    <tr>
        <td>Druhý sloupec</td>
    </tr>
    <tr>
        <td>A nový řádek</td>
        <td>Již není ovlivněn</td>
    </tr>
</table>

Rovnako ako u colspan, aj tu niekoľko buniek vynecháme. Tie sú potom nahradené bunkou raz s atribútom rowspan. V druhom riadku sme teda vynechali 1. bunku, pretože do nej zasahuje 1. bunka 1. riadku:

headers

Atribút udáva hlavičky, ktorým sa bunka viaže. Jeho hodnotou je zoznam id hlavičiek oddelených medzerou. V prehliadačoch sa atribút nijako neprejaví, ale môže mať význam u hlasových čítačiek.

scope

Na rozdiel od vyššie uvedených atribútov je scope iba pre tagy <th>. Tag určuje, či sa popisek v hlavičkové bunke vzťahuje k stĺpci alebo k riadku. Opäť je jeho význam iba pre hlasové čítačky.

hodnoty:

• col - Hlavička patrí stĺpci
• row - Hlavička patrí riadku
• colgroup - Hlavička patrí viac stĺpcom
• rowgroup - Hlavička patrí viac riadkom

V minulosti sa tabuľky používali pre tvorbu tzv. Layoutu stránky (rozdelenie stránky na odkazovú lištu, logo a obsah) a aj keď to u statických stránok prakticky lepšie nejde, je to z významového hľadiska nevhodné. Webová sémantika sa zaoberá významom jednotlivých elementov. Použitie tabuľky na rozloženie stránky je teda nesémantické, pretože aj keď sa web vykreslí správne, tabuľka má obsahovať nejaké hodnoty a nie celý webový obsah. Našťastie sa zistilo, že práve toto na návštevnosť stránok nemá žiadny vplyv. Poznáte rozdiel medzi tagom <strong> a <b> ? Obaja vyzerajú rovnako, ale zvýrazňovať text tagom <b> je nesémantické, pretože tento tag nedáva texte absolútne žiadny vyšší význam, len hovorí, že sa má k vykreslenie použiť tučný font. Naopak <strong> hovorí: "Tento text je dôležitý". Sémantika je to, čo to znamená, nie to, ako to vyzerá. Je veľmi dôležitá, pretože sémantické webové stránky majú potom výhodu vo vyhľadávačoch a majú často vyššiu návštevnosť.

Tabuľky ešte nie sú úplne rozobraté, ďalšie tagy si preto necháme na nabudúce.