Hlavní strana » Návody » Tabulky
Dlouhá léta se na stránkách používal tabulkový layout (někteří ho používají dodnes). S nástupem kaskádových stylů se situace naštěstí daleko zlepšila. Tabulka je především určená pro tabulková data, nikoliv pro samotnou strukturu stránky. Naučte se kaskádové styly, pokud budete na rozvrh webu stále používat tabulku, pravděpodobně nikdy nedocílíte sémantického webu.
Někteří jedinci mají tabulku spojenou výhradně s tabulkovým layoutem a tak se bojí tabulku použít i kdekoliv jinde. To znamená i na tabulková data. Odmítají zde použít tabulku a vymýšlejí nesmysly jako desítky plovoucích divů, které se všemožně obtékají, proplouvají mezi sebou a kříží se. Jiní například tabulku stvoří tak, že jednotlivé oddíly absolutně napozicují. Taky „bezva” řešení.
Takže prosím vás, na tabulková data používejte tabulku, je to jediné možné správné řešení, žádné plovoucí oddíly ani absolutní pozicování. Tabulková data jsou například výsledky nějakých hodnot v závislosti na něčem (dalo by se říci graf přepsaný do textové podoby) - třeba základní hodnoty goniometrických funkcí. Stejně tak mohou být tabulková data spisovatelé a jejich hlavní díla, rok narození a styl, jakým obvykle psali. Často se také tabulka na webu používá v případě, kdy porovnáváte dva výrobky, který z nich má lepší to a který je zase lepší v tomhle. Další časté použití je třeba ceník nějakých produktů. Určitě se nebojte používat tabulky.
Tabulku začínáme značkou <table>, to patrně všichni víte. Po této značce by měla následovat značka <caption>, což je vlastně takový nadpis tabulky - slouží k rychlému zorientování, k čemu ta tabulka slouží nebo co v ní nalezneme. V souvislosti s tímto ještě zmíním atribut summary, který by měl obsahovat detailnější obsah tabulky. Atribut se vkládá do značky <table>.
Dále můžeme využít tři podobné značky na celkové rozdělení tabulky: <thead>, <tbody> a <tfoot>. První značka, <thead>, ohraničuje záhlaví tabulky, to znamená obvykle první řádek tabulky, kde se nachází popisky sloupců a kde vlastně ještě žádná tabulková data nejsou, nacházejí se zde pouze ty popisky. Další značka, <tbody>, potom obsahuje tělo tabulky, neboli samotný obsah. Tento tag může být použít vícekrát, v závislosti na tom, kolik různých částí tabulka má. Například pokud máte v tabulce nějaké datumy, můžete pomocí <tbody> oddělit datumy v letošním a loňském roce. Poslední značka, <tfoot>, tvoří zápatí a obvykle obsahuje nějaké součty nebo celkový souhrn tabulky. Tyto tři značky však nejsou povinné a mnohdy se ani použít nedají. Pokud je však můžete použít, učiňte tak.
Samotná tabulka se pak tvoří další trojicí značek a sice: <tr>, <th> a <td>. Jednotlivé řádky tabulky tvoříme pomocí značky <tr>. Druhá značka, <th>, by měla určovat hlavičkovou informaci, měla by tedy býti v elementu <thead>. No a konečně na datové informace máme značku <td>, která, stejně jako předchozí značka, tvoří jednotlivé sloupce tabulky. A ještě jedna ukázková tabulka:
<table summary="ceník našich služeb - grafický návrh, tvorba kódu a programování aplikací">
<caption>
Ceník našich služeb
</caption>
<thead>
<tr>
<th>služba</th>
<th>cena bez dph</th>
<th>cena s dph</th>
</tr>
</thead>
<tbody>
<tr>
<td>grafický návrh</td>
<td>1000,-</td>
<td>1190,-</td>
</tr>
<tr>
<td>kodérské služby</td>
<td>2000,-</td>
<td>2380,-</td>
</tr>
<tr>
<td>programování aplikací</td>
<td>3000,-</td>
<td>3570,-</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>celkem za web</td>
<td>6000,-</td>
<td>7140,-</td>
</tr>
</tfoot>
</table>
«« Logické formátování » rozcestník « Formuláře »»
o web se stará Lukáš Havrlant (kontakt)