Rychlá příručka - HTML - Tabulky

Tagy <table>, <tr> a <td> - vytvoření tabulky

Základní tabulka začíná tagem <table>, protože slovo table znamená v překladu z angličtiny do češtiny tabulka, podívejte se. Tento tag je párový a mezi <table> </table> bude vše, co se této jedné tabulky bude týkat. Jak víte, tabulka je rozdělená vždy na řádky a v nich je ještě dále rozdělená na jednotlivé buňky. Takto se tabulka vytváří i v jazyce HTML. Hned po tagu <table> se tedy vytvoří řádek pomocí tagu <tr>. Tento tag je také párový a tam, kde budete chtít ukončit řádek, napíšete </tr>. Nyní v tomto řádku musíme vytvořit jednotlivé buňky, pro ně existuje tag <td>. I tento tag je párový a to, co bude mezi <td> </td>, bude jednou buňkou. V této buňce pak může být cokoliv. Tagů <tr> </tr> bude v tabulce tolik, kolik budeme chtít řádků. Tagů <td> </td> bude pak v řádku tolik, kolik budeme chtít v tomto řádku jednotlivých buněk. Pro tabulky existuje mnoho parametrů, o nichž se dočtete v dalších článcích, i kaskádových stylů, o nichž se dočtete zde.

Parametry colspan a rowspan tagu <td> - sloučení buněk

Pokud vytvoříte pouze základní tabulku pomocí tagů <table>, <tr> a <td> (všechny jsou párové), bude tabulka vypadat velmi nevzhledně, proto pro ni existuje velké množství parametrů, o nichž se dočtete níže, a kaskádových stylů, na to se můžete podívat sem. Jedny z parametrů, kterými lze upravit tabulku, jsou parametry colspan a rowspan. Oba parametry se píší k tagu <td>, budou tedy platit pro buňku. Oba parametry také mají v uvozovkách číslo, které bude vyjadřovat počet buněk. Parametr colspan zařizuje sloučení buněk vodorovně. Pokud mám tedy např. v prvním řádku pět buněk a ve druhém řádku chci první buňku širokou jako první tři buňky v prvním řádku, do uvozovek parametru colspan tagu <td> ve druhém řádku napíši číslici 3. Pak bude druhá buňka na druhém řádku začínat na úrovni čtvrté buňky prvního řádku. Oproti tomu parametr rowspan sloučí buňky svisle. Důležité ale je vědět, že se buňka vždy roztahuje s parametrem rowspan směrem dolů. Pokud mám tedy např. v prvním řádku pět buněk a první z nich chci roztáhnout i do druhého řádku, použiji parametr rowspan, který bude mít v uvozovkách číslici 2. Na druhém řádku pak bude první buňka začínat na úrovni druhé buňky v prvním řádku.

Parametry tagu <table>

Parametry, které budou psány k tagu <table>, platí pro celou tabulku a všechny její řádky a buňky v řádcích, pokud nebude mít řádek nebo buňka v řádku parametr jako <table>, ale s jinou hodnotou, poté se dává přednost jim. První parametr, který si uvedeme pro tag <table>, je align. V uvozovkách může mít left, center nebo right. Zarovnává nejen celou tabulku, ale i všechen obsah v jednotlivých buňkách doleva, doprostřed nebo doprava. Další parametr, parametr width, který má v uvozovkách číslo, jež vyjadřuje velikost v pixelech, určuje šířku tabulky. Pokud chceme udat hodnotu v procentech, za číslo v uvozovkách se napíše %. Parametr cellspacing určuje velikost prostoru mezi jednotlivými buňkami, proto se píše do uvozovek tohoto parametru číslo, které bude opět myšleno v pixelech. Parametr cellpadding určuje velikost prostoru uvnitř buněk mezi obsahem buňky a hranicí buňky. Do uvozovek tohoto parametru se také píše číslo, které bude myšleno v pixelech. Parametr bgcolor určuje barvu pozadí tabulky, proto má v uvozovkách anglicky napsanou barvu. Pokud chceme vložit na pozadí tabulky ale raději obrázek, použijeme parametr background, který bude mít v uvozovkách cestu k obrázku, která musí vypadat takto (je to stejné s tagem <img>). Další parametr, border, nastavuje šířku rámečku okolo tabulky a okolo každé buňky, proto má v uvozovkách číslo, které je opět myšleno v pixelech. Ohraničení pak můžeme rozdělit na dvě části – light (levá a horní strana) a dark (pravá a dolní strana). Každé této části pak můžeme nastavit jinou barvu ohraničení. Pomocí parametru bordercolorlight se nastaví část light, pomocí parametru bordercolordark se nastaví část dark. Pokud chceme nastavit jednotnou barvu celého ohraničení, použijeme jen parametr bordercolor, který bude mít v uvozovkách anglicky napsanou barvu.

Parametry tagů <tr> a <td>

Pokud napíšeme nějaký parametr k tagu <tr>, bude platit pro všechny buňky v tomto řádku. Prvním parametrem, který může být jako parametr tagu <tr>, je align, ten zarovná obsah ve všech buňkách řádku. V uvozovkách bude left, center nebo right. Další parametr, který můžeme použít jako parametr tagu <tr>, je bgcolor. Ten má v uvozovkách anglicky napsanou barvu, která bude pozadím všech buněk v tomto řádku. Pokud napíšeme nějaký parametr k tagu <td>, bude platit pouze pro tuto jednu buňku. Prvním parametrem, který může být jako parametr tagu <td>, je align, ten zarovná obsah v buňce. V uvozovkách bude left, center nebo right, to ale jistě znáte už nazpaměť, protože je to velmi častý a velmi používaný parametr. Další parametr, který můžeme použít jako parametr tagu <td>, je width. Ten nastaví šířku buňky, v uvozovkách má proto číslo, které bude vyjadřovat velikost buňky v pixelech. Další parametr pro tag <td> je bgcolor. Tento parametr má v uvozovkách anglicky napsanou barvu, tou bude pak vyplněna buňka. Na pozadí buňky můžeme použít i obrázek, to lze pomocí parametru background, který bude mít v uvozovkách cestu k obrázku, ta se dělá takto (stejně s tagem <img>). To je asi všechno, co se týká základních úprav tabulek.

© 2013 Petr Lhotský - petrlhotsky@windowslive.com