HTML tagy, ktoré musíš poznať #3

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á bunkaDruhá bunkaTretia 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á bunkaDruhá bunkaTretia bunka
Prvá bunkaDruhá bunkaTretia 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á bunkaDruhá bunkaTretia bunka
Prvá bunkaDruhá bunkaTretia 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 1Nadpis 2Nadpis 3Nadpis 4
Prvá bunkaDruhá bunkaTretia bunkaŠtvrtá bunka
Prvá bunkaDruhá bunkaTretia bunkaŠtvrtá bunka
Pätička 1Pätička 2Pätička 3Pä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 ňouTretia 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.)

Pozrite aj

50 odtieňov odžubu

Dobre bráško. Už ma to nebaví. Aby si vedel, ako sa vyhnúť podvodom, musíš najprv vedieť, ako sa veci majú a ako fungujú. Potom nenaletíš…

E-mail v mobile

Ako tie mailové servery vlastne fungujú a ako dostať e-maily do telefónu?