Tabuľka

V jazyku HTML má každá časť tabuľky svoju vlastnú značku. Základným (vrchným) elementom je tag table (tabuľka), ktorý určuje, že sa jedná o tabuľku. Jeho obsahom sú riadky, ktoré sú určené tagom tr (table row – riadok tabuľky). Riadok potom obsahuje bunky, ktoré majú značku td (table data cell – bunka tabuľky s dátami, table data/dáta tabuľky). Obsah tabuľky sa teda definuje po riadkoch, v ktorých zaradom definujeme bunky, čiže hodnoty stĺpcov v danom riadku. Poďme si to ukázať na jednoduchej tabuľke s dvomi riadkami, kde každý riadok bude obsahovať tri hodnoty, takže to bude tabuľka 2x3 – dva riadky a tri stĺpce. Troška predbeheneme a rovno si vysvetlíme aj základný atribút tabuľky. Ak by sme tento atribút rovno nepoužili, nebolo by pre vás zreteľne jasné, že sa jedná o tabuľku. Videli by ste iba textové údaje vedľa seba (kľudne si to vyskúšajte aj bez atribútu, ako to vyzerá). Pre lepšiu ukážku teda použijeme atribút border (hranica), ktorý určuje hrúbku vonkajšieho okraju (orámovania) tabuľky. Zadefinovanie hodnoty tohto atribútu nám spôsobí aj zvýraznenie hraníc medzi jedotlivými bunkami. Jeho hodnota je číselná a určuje počet pixelov :

<table border="1">
     <tr>
        <td>Riadok 1 - Stlpec 1</td>
        <td>Riadok 1 - Stlpec 2</td>
        <td>Riadok 1 - Stlpec 3</td>
    </tr>
    <tr>
        <td>Riadok 2 - Stlpec 1</td>
        <td>Riadok 2 - Stlpec 2</td>
        <td>Riadok 2 - Stlpec 3</td>
    </tr>
</table>

Každá tabuľka by mala mať svoju hlavičku, aby bolo jasné, o aké údaje sa jedná. Mohli by sme to spraviť jednoduchým pridaním jedného riadku na začiatok a ako hodnoty buniek (td) by sme dali názvy stĺpcov. Pre bunky hlavičky však existuje v jazyku špeciálna značka th (table head – hlavička tabuľky). Jej použitie je rovnaké ako bunky s dátami (td), význam, prečo to má osobitnú značku pochopíte neskôr. V nasledujúcej ukážke havičky si ale môžete všimnúť, že text v bunkách hlavičky bude automaticky (defaultne) tučným písmom (bold):

<table border="1">
    <tr>
        <th>P.c.</th>
        <th>Nazov</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Bol raz jeden zivot</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Kacerovo</td>
    </tr>
</table>

Určite ste niekedy videli tabuľku, v ktorej boli niektoré bunky zlúčené (zlúčiť bunky/merge cells v Exceli). Niekedy je jedna bunka cez dva, cez tri alebo viacej riadkov. Niekedy je to hneď od prvého riadku, niekedy v strede tabuľky a podobne. Alebo je zlúčená cez viacej stĺpcov a niekedy dokonca aj cez viac stĺpcov aj riadkov (napríklad 4 bunky spolu ako jedna). Toto sa dá docieliť aj v jazyku HTML pomocou dvoch atribútov buniek na to určených. Použitie týchto dvoch atribútov je podľa mňa jednou z tých ťažších vecí na pochopenie, ale hádam to spolu dokážeme. Začnime teda s atribútom, ktorý nám docieli, že obsah našej bunky bude presahovať cez viacej riadkov. Meno tohto atribútu je rowspan (riadkové rozpätie/rozsah) a jeho hodnotou je počet riadkov, cez ktoré má presahovať. Keď sme nepoužívali zlúčené bunky, definovali sme tabuľku tak, že sme určovali jej riadky a v každom riadku zaradom všetky bunky, ako sme si ich predstavovali. Takže ak sme chceli, aby mala tabuľka tri stĺpce, v každom riadku sme definovali zaradom prvú, druhú a tretiu td. V tomto prípade, kedy chceme použiť bunku, ktorá bude presahovať cez viacej riadkov, musíme mať ale na vedomí, že daná bunka presahuje aj do riadku, v ktorom ju nedefinujeme, pretože zlúčenie ide smerom od hora dole. V tom riadku teda na mieste, kde by mala byť norámlne bunka, ale tentoraz tam bude zasahovať naša zlúčená, ktorá bola definovaná v niektorom z predošlích riadkov, bunku nedefinujeme. Takže počet definovaných buniek bude v danom riadku menší o počet buniek, ktoré nám zasahujú z iných riadkov. Možno to znie komplikovane, poďme si to ale vyskúšať pre lepšie pochopenie. Spravíme si tabuľku, ktorá bude 3x2. V prvom stĺpci bude však zlúčená bunka cez prvé dva riadky:

<table border="1">
    <tr>
        <td rowspan="2">Zlucena bunka v 1.riadku</td>
        <td>Bunka 1.riadku</td>
    </tr>
    <tr>
        <td>Bunka 2.riadku</td>
    </tr>
    <tr>
        <td>Bunka 3.riadku</td>
        <td>Bunka 3.riadku</td>
    </tr>
</table>

Poďme si prejsť tento kód postupne, aby sme ho spolu chápali. V prvom riadku sme zadefinovalu bunku, ktorej atribút rowspan má hodnotu 2. To znamená, že chceme, aby zasahoval cez dva riadky, resp. aby zlúčil bunky od toho miesta, kde je zadefinovaný (1.riadok, 1.stĺpec) smerom nadol o 2 miesta (vrátane seba), takže o jedno smerom dolu. Bunku v 1.riadku a v 1.stĺpci sme zadefinovali aj s atribútom, po nej sme zadefinovali druhú bunku prvého riadku. Všimnite si, že v druhom riadku definujeme bunku iba raz a jej obsah sa nachádza v druhom stĺpci. Je to preto, pretože bunku na 2.riadku a v 1.stĺpci nedefinujeme, pretože sme ju už zadefinovali v prvom riadku, je to tá naša zlúčená bunka. V treťom riadku definujeme už obe bunky, pretože zlúčená bunka už na toto miesto nezasahuje. Ak by sme tento ístý kód použili s hodnotou atribútu 3, nemuseli by sme prvú bunku definovať ani v treťom riadku (skúste si to vyskúšať a skúste si aj skúsiť iné rozmery tabuliek a aj rôzne zlúčenia).

Rovnakým spôsobom funguje aj atribút pre zlúčenie bunky cez viacej stĺpcov, len smer zlúčenia je tentoraz zľava doprava. Meno atribútu je colspan (column – stĺpec) a jeho hodnota je číslo, ktoré určuje počet stĺpcov, ktoré má bunka zaberať. Pri používaní týchto atribútov sa často rodia chyby. Najčastejšie sú dve, dobré bude, ak si ich vyskúšate a uvidíte, čo sa môže stať a prečo to tak je. Prvá je, že sa zadefinuje viac buniek (td), ako je potrebné. V tom prípade bude výsledok vyzerať inak, ako sme si predstavovali. Výsledná tabuľka bude mať viacej stĺpcov alebo riadkov, ako sme chceli a niektoré bunky nebudú na správnom mieste. Stáva sa to vtedy, keď zadefinujeme bunku na riadku/stĺpci (podľa toho či sme očakávali rowspan alebo colspan), kde zasahuje zlúčená bunka z predchádzajúceho riadku/stĺpca. Druhá chyba je, že opačne zabudneme bunku zadefinovať. Stáva sa to vtedy, keď ju nezadefinujeme na riadku/stĺpci, kde si myslíme, že zasahuje bunka z iného riadku/stĺpca. Poďme si teraz ukázať tabuľku s obidvoma atribútmi :

<table border="1">
    <tr>
        <td rowspan="2">Zlucena bunka v 1.riadku</td>
        <td>Bunka 1.riadku</td>
    </tr>
    <tr>
        <td>Bunka 2.riadku</td>
    </tr>
    <tr>
        <td colspan="2">Bunka 3.riadku cez dva stĺpce</td>
    </tr>
</table>

Na tejto ukážke by som rád poukázal ešte na jednu vec, ktorú ste si možno všimli. Pri používaní colspanu je výhodou, že sa zlúčenie odzrkadľuje iba v aktuálnom riadku. Myslím tým to, že ak má mať napríklad riadok 4 bunky a na druhej použijeme colspan 2 (čiže definujeme iba tri td), stačí sa nám dívať na bunky len aktuálneho riadku (tr), aby sme si boli istý správnym počtom buniek. Kdežto keď používame rowspan, musíme v každom riadku sledovať, či v predchádzajúcom alebo ešte predtým nebol použitý niekde rowspan, aby sme nezadefinovali náhodou bunku navyše. Všimnime si ešte, že zlúčenie môže byť iba s rovnakým počtom buniek nadol alebo doprava. Myslím tým to, že nemôžeme bunky zlúčiť napríklad jedna z jedného riadku dve z ďalšieho, do tvaru písmena L.

Na záver by som ešte podotkol, že tak ako pri položkách zoznamu, tak aj obsahom buniek v tabuľke môže byť čokoľvek, hociktorý iný element, napríklad aj samotná tabuľka (tabuľka v tabuľke – používa sa pri zložejších požiadavkach na vzhľad tabuľky). Skúste sa už s nadobutnutými vedomosťami troška pohrať. Skúste si spraviť tabuľku, kde obsahom bunky bude obrázok, odkaz, alebo si skúste vložiť do bunky inú tabuľku.