Základy stránky
Prehľad o tvorbe tabuliek
Vytváranie tabuliek
Kontajnerový tabuľkový element združuje skupinu ostatných elementov, ktoré definujú jednotlivé riadky a v nich samostatné bunky (cells). Tabuľky sa skladajú s riadkov a stĺpcov, ktoré tvoria bunky. Každá bunka je zasa kontajnerom pre dáta. Bunky tabuliek môžu obsahovať prakticky akýkoľvek iný element, napr. hyperlinky alebo obrázky.Tabuľky majú takýto formát:
<table>
<tr>
<td>Bunka 1-1</td><td> Bunka 1-2</td><td> Bunka 1-3</td>
</tr>
<tr>
<td> Bunka 2-1</td><td> Bunka 2-2</td><td> Bunka 2-3</td>
</tr>
<tr>
<td> Bunka 3-1</td><td> Bunka 3-2</td><td> Bunka 3-3</td>
</tr>
</table>
| Bunka 1-1 | Bunka 1-2 | Bunka 1-3 |
| Bunka 2-1 | Bunka 2-2 | Bunka 2-3 |
| Bunka 3-1 | Bunka 3-2 | Bunka 3-3 |
Najdôležitejším elementom je <table>, ktorý obklopuje všetky ostatné elementy. Vo vnútri elementu <table> sa nachádzajú aj ďalšie kontajnerové elementy ako definícia riadku (element <tr> - table row, riadok tabulky) a buniek (element <td> - table data, data tabulky). Do tabuliek sa niekedy vkladá aj záhlavie a to kontajnerovým elementom <caption>, kde sa zadáva aj vysvetľujúci text.
Element <table>
Každá tabuľka začína elementom <table> do ktorého sa postupne pridávajú ostatné elementy a dáta, z ktorých sa skladá vlastná tabuľka. Medzi tagy <table> a </table> použijete element <tr> k definovania riadku. Vo vnútri riadku vytvoríme bunky elementom <td>, do ktorého vložíte obsah bunky.Musíte dať pozor na to aby tabulky maly rovnaký počet stlpcov v každom riadku. Ak teda napríklad prvý riadok má <td> elementy, druhý riadok musí mať takisto 3 <td> elementy, a tak aj v tretom a štvrtom riadku. Ak sa pomílite, v tabulke budú chýbať bunky, bude sa zobrazovať úplne inak akoby ste chceli.
Tabuľky sú svojim spôsobom podobné ostatným kontajnerovým elementom ako napr. zoznamy a odstavcové elementy.
Príklad jednoduchej tabulky:
<table border ="1">
<caption>Rozdelenie tried podľa ročníka</caption>
<tr>
<td>1. ročník</td>
<td>2. ročník</td>
<td>3. ročník</td>
<td>4. ročník</td>
</tr>
<tr>
<td>1.A</td>
<td>2.A</td>
<td>3.A</td>
<td>4.A</td>
</tr>
<tr>
<td>1.B</td>
<td>2.B</td>
<td>3.B</td>
<td>4.B</td>
</tr>
<tr>
<td>1.C</td>
<td>2.C</td>
<td>3.C</td>
<td>4.C</td>
</tr>
</table>
| 1. ročník | 2. ročník | 3. ročník | 4. ročník |
| 1.A | 2.A | 3.A | 4.A |
| 1.B | 2.B | 3.B | 4.B |
| 1.C | 2.C | 3.C | 4.C |
Nadpis a doplňujúci text tabuľky
Element <caption> slúži na zadávanie nadpisu alebo doplňujúceho textu.Napr.
<caption>
<b>Počet žiakov </b>podľa<i>prieskumov z roku 2006</i>
</caption>
Do vnútra elementu <caption> môžete uzavrieť akékoľvek elementy napr. zoznamy, hyperlinky na webovú stránku, štýly písma.
Nadpis tabulky by mal nasledovať ihneď po otváraciom tagu <table>. Dajte pozor takisto na to, že v tabulke sa môže vyskytovať iba jediný <caption>.
Najčastejším spôsobom zobrazovania nadpisu tabulky je hore. Pokiaľ chcete, aby sa text zobrazil niekde inde (napr. dole), použijete k tomu atribút align. Možné hodnoty atributu align sú top pre zarovnanie nad tabuľkou, bottom pre umiestnenie pod tabuľku.
<caption align= "bottom"> Rozdelenie tried podľa ročníka <caption>
Riadky tabuliek
Dva najpoužívanejšie atribúty elementu riadok <tr> sú align a valign. Prvý atribút nastavuje zarovnanie buniek v riadku vodorovnom smere, druhý zasa v horizontálnom smere.Napr.
<table border="1">
<caption>Prieskum dievčat a chlapcov v škole v 1. triedach.</caption>
<tr align="center">
<td>Rok prieskumu</td>
<td>Chlapci</td>
<td>Dievčatá</td>
</tr>
<tr align="right">
<td>2004</td>
<td>100%</td>
<td>0%</td>
</tr>
<tr align="right">
<td>2005</td>
<td>85%</td>
<td>15%</td>
</tr>
<tr align="right">
<td>2006</td>
<td>90%</td>
<td>10%</td>
</tr>
</table>
| Rok prieskumu | Chlapci | Dievčatá |
| 2004 | 100% | 0% |
| 2005 | 85% | 15% |
| 2006 | 90% | 10% |
Povolené hodnoty atribútu align sú: center(na stred), left (k lavému okraju) a right (k pravému okraju). Atribút valign akceptuje varianty top (k hornému okraju), bottom (k dolnému okraju) a center (na stred). Presné nastavenia zarovnania k okraju v horizontálnom alebo vertikálnom smere sa hodí hlavne pre obrázky.
Napr.:
<table border="1">
<tr valign="top">
<td><img src="img1.jpg"></td>
<td><img src="img2.jpg"></td>
<td><img src="img3.jpg"></td>
</tr>
</table>
Porovnanie
 |
 |
 |
|
|
|
V prvej tabuľke je zarovnanie buniek vertikálne hore (top), v druhej tabuľke je zarovnanie bunky na vertikálny stred (middle).
Bunky tabuliek
Element <td> má mimo iných aj atribúty align a valign tak isto ako element <tr>.Napr.
<td align="center" valign="bottom">
Atribút align určuje zarovnanie dát v bunke v horizontálnom smere. Jeho povolené hodnoty sú left (k ľavému okraju) a right (k pravému okraju) a center(na stred). Všimnite si že atribút align v elementu <td> je vlastne nadbytočný, pretože rovnaký účel plní už atribút align v elemente <tr>, ktorý nastavuje zarovnanie všetkých buniek v rovnakom riadku. Takže tento atribút sa skoro vôbec nepoužíva iba keď tak na špeciálne účely.
Podobne atribút valign hovorí, ako sa majú dáta v bunke vertikálne zarovnať. Možné hodnoty sú varianty top (k hornému okraju), bottom (k dolnému okraju) a center (na stred).
Napr.
<table border="1">
<tr>
<td valign="top"><img src="img1.jpg"></td>
<td valign="bottom"><img src="img2.jpg"></td>
<td valign="middle"><img src="img3.jpg"></td>
</tr>
</table>
|
|
|
Prvá bunka tabuľky je zarovnaná ku vrchu(top), stredná na spodok(bottom) a posledná na stred.
Zlučovanie tabuliek
Občas sa vám stane, že budete potrebovať spojiť viac buniek v jednom riadku alebo v stĺpci do jednej. Obvykle kvôli tomu, že tieto bunky majú obsahovať rovnakú informáciu. Na zlučovanie buniek nám funguje atribút colspan (column span, presahovanie stĺpca) a rowspan (row span, presahovanie riadku). Do hodnoty atribútu zapisujem číslo ktoré nám určí cez koľko riadkov alevo stĺpcov bude bunka presahovať. Bunky cez ktoré sa bude presahovať sa vymažú.Napr.
<table border="1">
<caption>Rozvrh hodín na pondelok a utorok</caption>
<tr align="center">
<td>-</td>
<td>1. hod</td>
<td>2. hod </td>
<td>3. hod </td>
<td>4. hod</td>
<td>5. hod </td>
</tr>
<tr align="center">
<td>Po</td>
<td rowspan="2">TEV</td>
<td colspan="2">UCT</td>
<td>MAT</td>
<td>NEJ</td>
</tr>
<tr align="center"> <td>Ut</td>
<td colspan="3">MAT</td>
<td>IVT</td>
</tr>
</table>
| - | 1. hod | 2. hod | 3. hod | 4. hod | 5. hod |
| Po | TEV | UCT | MAT | NEJ | |
| Ut | MAT | IVT | |||
Farba buniek a riadkov
Okrem doposiaľ uvedených nastavení sa dá meniť aj farba pozadia niektorých buniek alebo dokonca celých riadkov. Každý z doposiaľ uvedených elementov má povolený atribút bgcolor, ktorý práve definuje farbu pozadia. Ako hodnotu atribútu bgcolor zadávajte meno farby alebo hexadecimálne číslo.Napr.
<table border="1">
<tr align="center" bgcolor="silver">
<td>-</td>
<td>1. hod</td>
<td>2. hod</td>
<td>3. hod</td>
<td>4. hod</td>
<td>5. hod </td>
</tr>
<tr align="center">
<td bgcolor="#999999">Po</td>
<td rowspan="2">TEV</td>
<td colspan="2">UCT</td>
<td>MAT</td>
<td>NEJ</td>
</tr>
<tr align="center">
<td bgcolor="#999999">Ut</td>
<td colspan="3">MAT</td>
<td>IVT</td>
</tr>
</table>
| - | 1. hod | 2. hod | 3. hod | 4. hod | 5. hod |
| Po | TEV | UCT | MAT | NEJ | |
| Ut | MAT | IVT | |||
Ako vidíte farba pozadia v tabuľke môže napríklad veľmi zlepšiť priehľadnosť stránky.
Prehľad ostatných atribútov tabuliek
V tejto chvíli už poznáte základné princípy vytvárania a fungovania tabuliek, takže môžeme postúpiť na trochu ťažšie možnosti elementu <table>.- Width – Nastavuje relatívnu (vzhľadom k veľkosti okna prehliadača) alebo absolútnu šírku tabuliek. Jednotky sú buď pixely pre absolútnu šírku alebo % zo šírky okna prehliadača(v tomto prípade sa musí k číslu doplniť percento %, napr. width="50%"), táto veľkosť sa tým pádom mení v závislosti z naťahovaním alebo zmenšovaním okna prehliadača.
- Height – Velmi pdobný atribút ako width len nastavuje relatívnu (vzhľadom k veľkosti okna prehliadača) alebo absolútnu výšku tabuliek. Jednotky sú buď pixely pre absolútnu výšku alebo % z výšky okna prehliadača(v tomto prípade sa musí k číslu doplniť percento %, napr. height="50%"), táto veľkosť sa tým pádom mení v závislosti z naťahovaním alebo zmenšovaním okna prehliadača.
- Border – Určuje šírku okrajov tabuľky. Hodnoty sú celé čísla v pixeloch.
- Align – jeho použitie je podobné ako u elementu <img>, teda pre nastavenie plávajúcich (floating) tabuliek obkolesených textom.
- Cellspacing – nastavuje ako ďaleko od vonkajšieho okraju tabuľky majú začať jednotlivé bunky. Hodnotou je číslo v pixeloch.
- Cellpadding - nastavuje šírku medzery medzi obsahom bunky a ich okrajom. Hodnotou je číslo v pixeloch.
Atribút width
Štandardne je tabuľka tak široká ako je nutné(podľa šírky najdlhšieho riadku tabuľky). Iba ak už nestačí šírka okna prehliadača sa obsah začne zalamovať do viacerých riadkov. Keď užívateľ zväčší okno automaticky sa usporiadajú rozmery tabuľky.Toto chovanie ide atribútom width ovplyvniť. Hodnotou atribútu môže byť buď šírka v percentách alebo v pixeloch. Pokiaľ je rozmer zadaný percentuálne, bude sa tabuľka stále pri zmene šírky okna automaticky meniť tak, aby stáýle vyhovovala relatívnej šírke.
Napr.
<table border="1" width="70%">
<tr>
<td>-</td>
<td>1. hod</td>
<td>2. hod</td>
</tr>
<tr>
<td>Po</td>
<td>TEV</td>
<td>UCT</td>
</tr>
<tr>
<td>Ut</td>
<td>MAT</td>
<td>IVT</td>
</tr>
</table>
| - | 1. hod | 2. hod |
| Po | TEV | UCT |
| Ut | MAT | IVT |
Ako vidíte, tak atribút width nastaví šírku na zadanú veľkosť i v prípade, že dáta toľko miesta nepotrebujú. Napr. tabuľka s width="100%" zaberie celú šírku okna bez ohľadu na celkovú šírku najdlhšieho riadku.
Atribút height
Štandardne je tabuľka tak vysoká ako je nutné(podľa šírky najvyššieho dáta v tabuľke).Toto chovanie ide atribútom height zmeniť. Hodnotou atribútu môže byť buď výška v percentách alebo v pixeloch. Pokiaľ je rozmer zadaný percentuálne, bude sa tabuľka stále pri zmene výšky okna automaticky meniť tak, aby stáýle vyhovovala relatívnej výške.
Napr.
<table border="1" height="200" >
<tr >
<td>-</td>
<td>1. hod</td>
<td>2. hod</td>
</tr>
<tr>
<td>Po</td>
<td>TEV</td>
<td>UCT</td>
</tr>
<tr>
<td>Ut</td>
<td>MAT</td>
<td>IVT</td>
</tr>
</table>
| - | 1. hod | 2. hod |
| Po | TEV | UCT |
| Ut | MAT | IVT |
Ako vidíte, tak atribút height nastaví výšku na zadanú veľkosť i v prípade, že dáta toľko miesta nepotrebujú. Napríklad tabuľka s height="100%" zaberie celú výšku okna bez ohľadu na celkovú výšku najvyššieho dáta.
Atributy border a align
Obyčajne sa nevykresľuje okolo tabuliek alebo buniek nejaký okraj. Okraj nastavujeme atribútom border (okraj). Hrúbka obvodového vonkajšieho okraju sa zadáva to tohto atribútu pomocou hodnoty v pixeloch. Ak nastavíme hodnotu atribútu border="0" nebude vykreslený žiadny okraj.Napr.
<table border="8">
Atribút align elementu <table> určuje zarovnanie celej tabulky na stránke. Hodnoty sa zadávaju ako pri <tr> a <td>. Zarovnanie na stred spôsobí umiestnenie tabulky do stredu stránky, zarovnanie naľavo alebo napravo spôsobí z tabulky plávajúci(floating) objekt okolo ktorého obteká text.
Napr.
<table border="8" align="center">
<tr align="center">
<td>Rok prieskumu</td>
<td>Chlapci</td>
<td>Dievčatá</td>
</tr>
<tr align="right">
<td>2004</td>
<td>100%</td>
<td>0%</td>
</tr>
<tr align="right">
<td>2005</td>
<td>85%</td>
<td>15%</td>
</tr>
<tr align="right">
<td>2006</td>
<td>90%</td>
<td>10%</td>
</tr>v
</table>
| Rok prieskumu | Chlapci | Dievčatá |
| 2004 | 100% | 0% |
| 2005 | 85% | 15% |
| 2006 | 90% | 10% |
Atribúty cellspacing a cellpading
Atribúty cellspacing a cellpading poskytujú skutočnú kontrolu nad veľkosťou bunky v tabuľke. Atribút cellspacing nastavuje medzeru medzi bunkami v pixeloch. Atribútom cellspacing takisto zväčšíme veľkosť vnútorných okrajov, dokonca aj keď je atribút border zmeníme na nižšiu hodnotu.Napríklad
<table border="1" cellspacing="10">
Napríklad
<table border="1" cellspacing="10">
<tr align="center">
<td>Rok prieskumu</td>
<td>Chlapci</td>
<td>Dievčatá</td>
</tr>
<tr align="right">
<td>2004</td>
<td>100%</td>
<td>0%</td>
</tr>
<tr align="right">
<td>2005</td>
<td>85%</td>
<td>15%</td>
</tr>
<tr align="right">
<td>2006</td>
<td>90%</td>
<td>10%</td>
</tr>
</table>
| Rok prieskumu | Chlapci | Dievčatá |
| 2004 | 100% | 0% |
| 2005 | 85% | 15% |
| 2006 | 90% | 10% |
Ak do elementu <table> nezadáme atribút border="1" stále nám ale funguje atribút cellspacing.
Druhý atribút cellpadding špecifikuje medzeru, ktorá má byť zobrazená medzi okrajmi bunky a jej dátami. Jednotkami sú pixely. Nadefinovaná hodnota atribútu cellpadding je 1 (pokiaľ atribút v elemente <table> neuvediete). Môžete nastaviť cellpadding="0", ktoré spôsobí, že obsah bude „narazený“ rovno na jej okraj bez medzery. Toto sa hlavne využíva ak sa má tabulka dávať dojem jedného obrázku, ktorý je spojený z viacerých buniek tabulky.
Napríklad
<table border="1" cellpadding="10">
Napr.
<table border="1" cellpadding="10">
<tr align="center">
<td>Rok prieskumu</td>
<td>Chlapci</td>
<td>Dievčatá</td>
</tr>
<tr align="right">
<td>2004</td>
<td>100%</td>
<td>0%</td>
</tr>
<tr align="right">
<td>2005</td>
<td>85%</td>
<td>15%</td>
</tr>
<tr align="right">
<td>2006</td>
<td>90%</td>
<td>10%</td>
</tr>
</table>
| Rok prieskumu | Chlapci | Dievčatá |
| 2004 | 100% | 0% |
| 2005 | 85% | 15% |
| 2006 | 90% | 10% |
Použite v praxi:
Ak chceme vytvoriť dojem oblúku používa sa najčastejšie tabuľka. Do rohu tabuľky vložíme obrázok "rohu".Napríklad
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="roh.jpg" align="absbottom"></td>
<td width="50" bgcolor="#457fb9"></td>
</tr>
<tr>
<td width="30" height="50" bgcolor="#457fb9"></td>
<td></td>
</tr>
</table>
 |
|
Tabuľky sa najčastejšie využívajú na zoskupovanie obrázkov do jedného alebo na vytváranie celej webovej aplikácie.
