V minulých dvoch článkoch (tu a tu) sme sa naučili základnú koncepciu značkovacieho jazyka HTML, ukázali sme si použitie vlastnosti (atribútov) jednotlivých HTML tagov a zanorovanie tagov. Dnes sa trošku pohrajeme s tabuľkami a ukážeme si ich rozsiahle možnosti.
Tabuľky
Tabuľky slúžia na lepšie zobrazenie štrukturovaných dát. Tabuľkový formát sa používa od nepamäti a z praktického života určite poznáte napr. veľkostné tabuľky, rozličné cenníky, reštauračné menu a podobné veci. To všetko môže byť tvorené tabuľkami.
Najčastejšie sa pri tabuľkách stretávame s týmito HTML tagmi:
table – základný tag označujúci tabuľku. Párový tag
tr – označuje riadok v tabuľke. Nepovinne párový tag. Považujte ho za párový.
td – označuje bunku v tabuľke. Tiež nepovinne párový tag, ale považujme ho za párový.
Pomocou týchto troch tagov dokážeme vytvoriť základnú tabuľku. Možno ste si všimli takú zaujímavosť, že riadok síce vieme určite pomocou tagu tr avšak stĺpec nevieme určiť. Tak to je správne. V HTML tabuľka prakticky stĺpce nemá, má len riadky a v nich bunky. Tak to funguje.
Zrobme si jednoduchú tabuľku
Týmto sme si vytvorili prvú veľmi jednoduchú tabuľku. Náš kód bude vyzerať takto:
| Prvá bunka | Druhá bunka | Tretia bunka |
Skúsime si teraz pridať druhý riadok, do ktorého ale umiestnime iný počet buniek (teda stĺpcov) a uvidíme, čo sa stane
| Prvá bunka | Druhá bunka | Tretia bunka | |
| Prvá bunka | Druhá bunka | Tretia bunka | Štvrtá bunka |
Ako môžeme vidieť, prvý riadok má tri bunky (tri stĺpce), ale druhý riadok ich má štyri. Preto nastala taká malá grafická katastrofa. Tabuľka totiž musí mať v každom riadku rovnaký počet buniek (nie je to však HTML chyba, ak nemá, len grafická chyba). Ak teda niekedy potrebujeme takúto tabuľku, je potrebné jej doplniť tzv. prázdne bunky. Takto:
| Prvá bunka | Druhá bunka | Tretia bunka | |
| Prvá bunka | Druhá bunka | Tretia bunka | Štvrtá bunka |
Hlavička, pätička a telo
Každej HTML tabuľke vieme doplniť hlavičku, pätičku a telo tabuľky. Príklad, ktorý sme si ukázali vyššie tieto veci neobsahuje, ale mohol by. V tomto prípade sme vlastne priamo použili len telo tabuľky. Bez hlavičky a bez pätičky.
Na vloženie hlavičky, pätičky a tela použiejem príznačné tagy. Všetky sú párové
thead – hlavička tabuľky
tbody – telo tabuľky
tfoot – pätička tabuľky
th – Hlavičková bunka
Tag th budeme využívať v hlavičke stránky ako hlavičkovú bunku (čiže namiesto td).
| Nadpis 1 | Nadpis 2 | Nadpis 3 | Nadpis 4 |
|---|---|---|---|
| Prvá bunka | Druhá bunka | Tretia bunka | Štvrtá bunka |
| Prvá bunka | Druhá bunka | Tretia bunka | Štvrtá bunka |
| Pätička 1 | Pätička 2 | Pätička 3 | Pätička 4 |
Vidíme, že tag th je ako hlavičková bunka automaticky hrubším písmom. Ostatné tagy slúžia prakticky len na lepšiu orientáciu v tabuľke. V tejto tabuľke sú viac-menej zbytočné, ak by sme však mali tabuľku s 1 000 riadkami, pomohlo by nám, ak by sme mali označené hlavičky, teda názvy jednotlivých stĺpcov.
Ďalšie harakiri s tabuľkami
Často využívanou funkcionalitou je zlučovanie buniek (cell-merging). Môžeme zlučovať bunky naprieč riadkami i stĺpcami. Slúžia na to dva atribúty
rowspan – zlúči riadky
colspan – zlúči stĺpce
Používame ich v bunkách, alebo riadkoch a ako hodnotu atribútu zadáme číslo, ktorým určíme počet buniek, ktoré sa majú zlúčiť.
| Prvá bunka zlúčená s bunkou pod ňou | Tretia bunka | Štvrtá bunka |
| Prvá bunka zlúčená s druhou | ||
To by bolo k tabuľkám asi všetko, samozrejme, je tam ešte plno veci, ktoré by sa dali napísať, ale toto je základ, s ktorým sa človek stretáva často aj v dnešnej dobe. Plno možnosti tabuliek som za 15 rokov práce s HTML nevyužil ani ja. A väčšina možnosti tabuliek je dnes už aj tak zastaralá a nahradzuje sa CSSkom (napr. nastavenie pozadia na tabuľke, nastavenie rámu a pod.)
