Tabulky bývaly ve světě webdesignu mocným hráčem. V dobách, kdy podpora CSS v prohlížečích byla mrzká, se pomocí tabulek řešilo rozmístěná jednotlivých prvků na stránce – tzv. tabulkový layout, který však měl své nevýhody (například delší načítání takto utvořené stránky).
I když se dnes se stránkami tvořenými pomocí tabulek můžeme setkat, k rozvržení prvků na stránkách bychom měli využívat CSS. Avšak i dnes mají tabulky své nezastupitelné místo. Využíváme je pro tabulková data; prostě pro obsah, který chceme mít v tabulce (a který se samozřejmě do tabulky hodí).
Pro tvorbu tabulek využíváme následujících tagů.
| Tag | Význam tagu |
|---|---|
| table | Ohraničuje tabulku; je párový. |
| tr | Řádek tabulky (z anglického table row); i když v některých verzích HTML tento tag nemusí být párový, doporučuji ho jako párový psát. |
| td | Buňka tabulky; tento tag doporučuju psát opět jako párový. |
Nyní již máme dostatek informací k tomu, abychom dokázali sestrojit jednoduchou tabulku.
Vytvoříme si tabulku 3 × 2 (3 řádky, 2 sloupce).
<table>
<tr><td>Horní levá buňka</td><td>Horní pravá buňka</td></tr>
<tr><td>Prostřední levá buňka</td><td>Prostřední pravá buňka</td></tr>
<tr><td>Dolní levá buňka</td><td>Dolní pravá buňka</td></tr>
</table>
Výsledek, tak, jak se nám zobrazí v prohlížeči vypadá pak takto:
| Horní levá buňka | Horní pravá buňka |
| Prostřední levá buňka | Prostřední pravá buňka |
| Dolní levá buňka | Dolní levá buňka |
Zatím nic moc, že? Proto si prozradíme několik atributů.
| Atributy pro table | Význam atributu |
|---|---|
| cellspacing | Vnější okraj buněk; hodnotu zadáváme jako číslo bez jednotky, prohlížeč si domyslí pixely. |
| cellpadding | Vnitřní okraj buněk |
| border | Rámeček, ve všech prohlížečích se však nevykreslí stejně; hodnota je číslo, prohlížeč si opět domyslí pixely. |
| width | Šířka tabulky; pozor, jedná se však o minimální šířku. Pokud zadáme šířku v procentech, bere se šířka z nadřazeného prvku (třeba okna prohlížeče). Zadáváme-li pixely, zase nemusíme psát jednotky. Je-li však obsah delší, než námi nastavená minimální šířka, je její rozměr ignorován. |
| height | Výška tabulky, platí stejná pravidla jako pro šířku. Pokud však je nadřazený prvek tabulky okno prohlížeče, tabulka na výšku zadanou v procentech nereaguje (teda aspoň mně). Navíc verzi HTML, kterou používáme k výkladu se tento atribut dvakrát nezamlouvá. |
Všechny tyto atributy lze nastavit i pomocí CSS, a měli bychom to tak dělat. Ale pokud se například na stránku díváme s vypnutými styly, cellspacing a cellpadding se může hodit.
| Atributy pro td | Význam atributu |
|---|---|
| rowspan | Sloučení buněk v rámci řádku; jako hodnotu zadáváme takové číslo, kolik buněk chceme spojit. |
| colspan | Sloučení buněk v rámci sloupce |
Tabulky 2. část, aneb další info
| Tag | Význam tagu |
|---|---|
| th | Buňka v hlavičce tabulky. Tento tag je příbuzný tagu td, akorát text vložený do th je zarovnán na střed a vykresluje se tučným písmem (viz například tuto tabulku). |
| caption | Nadpis tabulky; píše se za tag table. Je to párový tag. |
| col | Nastavuje vlastnost jednomu sloupci tabulky. Nepárový tag. |
Opět bude nejlepší si vše ukázat na příkladu:
<table border=“1″ cellpadding=“10″>
<caption>Moje tabulka</caption>
<col style=“background-color: #FFDDCC“>
<tr><th>Něco</th> <th>Popis něčeho</th></tr>
<tr><td>houba mycí</td> <td>vodní živočich</td></tr>
<tr><td>rýhonosec pcháčový</td> <td>brouk</td></tr>
<tr><td>sametka podzimní</td> <td>roztoč</td></tr>
</table>
Pokud nevíte, co zápis style=“background-color: #FFDDCC“ znamená, můžete se podívat do sekce CSS.
Pro tag col si uvedeme jeden atribut.
| Atribut pro col | Význam atributu |
|---|---|
| span | Udává, na kolik sloupců se má daná vlastnost aplikovat. |
Následující dva zápisy tabulky by pak měly znamenat to samé…
<table border=“1″ cellpadding=“10″>
<col style=“background-color: #FFDDCC“>
<col style=“background-color: #FFDDCC“>
<tr><td>rýhonosec pcháčový</td> <td>brouk</td></tr>
<tr><td>sametka podzimní</td> <td>roztoč</td></tr>
</table>
<table border=“1″ cellpadding=“10″>
<col span=“2″ style=“background-color: #FFDDCC“>
<tr><td>rýhonosec pcháčový</td> <td>brouk</td></tr>
<tr><td>sametka podzimní</td> <td>roztoč</td></tr>
</table>
