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

				
					<table>
    <tr>
        <td>Prvá bunka</td>
        <td>Druhá bunka</td>
        <td>Tretia bunka</td>
    </tr>
</table>
				
			

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

				
					<table>
    <tr>
        <td>Prvá bunka</td>
        <td>Druhá bunka</td>
        <td>Tretia bunka</td>
    </tr>
    <tr>
        <td>Prvá bunka</td>
        <td>Druhá bunka</td>
        <td>Tretia bunka</td>
        <td>Štvrtá bunka</td>
    </tr>
</table>
				
			
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:

				
					<table>
    <tr>
        <td>Prvá bunka</td>
        <td>Druhá bunka</td>
        <td>Tretia bunka</td>
        <td></td>
    </tr>
    <tr>
        <td>Prvá bunka</td>
        <td>Druhá bunka</td>
        <td>Tretia bunka</td>
        <td>Štvrtá bunka</td>
    </tr>
</table>
				
			
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). 

				
					<table>
    <thead>
        <tr>
            <th>Nadpis 1</th>
            <th>Nadpis 2</th>
            <th>Nadpis 3</th>
            <th>Nadpis 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Prvá bunka</td>
            <td>Druhá bunka</td>
            <td>Tretia bunka</td>
            <td>Štvrtá bunka</td>
        </tr>
        <tr>
            <td>Prvá bunka</td>
            <td>Druhá bunka</td>
            <td>Tretia bunka</td>
            <td>Štvrtá bunka</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Pätička 1</td>
            <td>Pätička 2</td>
            <td>Pätička 3</td>
            <td>Pätička 4</td>
        </tr>
    </tfoot>
</table>
				
			
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ť. 

				
					<table>
    <tr>
        <td rowspan="2">Prvá bunka zlúčená s bunkou pod ňou</td>
        <td>Tretia bunka</td>
        <td>Štvrtá bunka</td>
    </tr>
    <tr>
        <td colspan="2">Prvá bunka zlúčená s druhou</td>
    </tr>
</table>
				
			
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.)

Najnovšie články

Zanikne PHP?

Áno, do piatich rokov PHPčko zanikne. Zo všetkých ľudí sa stanú vegáni. Všetci do jedného budeme jazdiť na ekologických elektro vozidlách… V skutočnosti však  PHPčko

Nenechajte zhniť svoju webstránku

Mnohé webové stránky po roku, či dvoch, vyzerajú hrozne. Dôvod je jednoduchý. Sú zanedbané. O svoju webovú stránku sa musíte starať, alebo túto úlohu zveriť

Nové projekty

Ikry

Ďalší e-shopík, tentokrát som ale riešil len redesign existujúceho e-shopu, nakoľko funkcionalita už bola vytvorená. Ide o CBD e-shop s celkom širokým sortimentom.

Sarka

Vintage obchod s oblečením. Veraže sme sa dosť natrápili, ale napokon to všetko dobre dopadlo 🙂

Dela Clair

V spolupráci s firmou WAME s.r.o. sme vytvorili tento šperkový e-shop. Grafika inšpirovaná hotovou šablónou bola upravená na mieru grafikom a mnou prevedená do funkčnej

Táto webstránka používa súbory cookies