Tabulky obecně slouží k přehlednému zobrazení dat.

table

Tabulka. Uzavírá celou strukturu tabulky, obsahuje další elementy; zejména řádky tabulky <tr>.

Tag <table> může mít kromě obecných mnoho dalších atributů:

Všechny výše uvedené atributy (vyjma frame, rules a summary) jsou zastaralé. Doporučují se nahradit CSS styly (border, padding pro tag td, width, height, background pro tag table).

Cellspacing se přes CSS styl nahradit nedá (border-spacing nefunguje v Exploreru).

Bordercolorlight a bordercolordark fungující v Exploreru se přes CSS styly nahradit nedají.

Tag <table>, atribut align

Co se týká šířky tabulek, atribut width nastavuje pouze minimální šířku, nikoli vždy šířku skutečnou. Skutečná šířka může být větší, pokud bude větší součet šířek sloupců. Každý sloupec je tak široký, jak je široká jeho nejširší buňka.

Tag <table>, atribut frame

Název atributu „frame“ nemá nic společného s rámy! V praxi je lepší atribut frame nepoužívat a grafického efektu docílit správným použitím css stylu border u tagu <table>

Tag <table>, atribut rules

Atributy frame a rules fungují jedině při nenulovém rámečku (nesmí být <table border=“0″>. V praxi je lepší atribut rules nepoužívat a požadovaného efektu dosáhnout pomocí CSS stylu border aplikovaného na buňky tabulky (tagy <td>).

Časté překlepy: celspacing, celpadding, cellpading, celpading. Správně je to cellspacing a cellpadding.

Speciální styly pro tabulku

V souvislosti s tagem <table> prosím věnujte pozornost stylům border-collapse:collapse (z dvojitých rámečků udělá jednoduché) a table-layout: fixed (rychlejší vykreslování).

tr

Řádek tabulky. Z angl. table row. Musí být uvnitř elementu <table> a smí obsahovat pouze buňky (<td> a <th>). Přípustnými (ale zastaralými a neužívanými) atributy jsou height, background, bgcolor. Jde o tag párový, ale pokud se neuvede koncová značka, tak se v prohlížeči nic zlého nestane, protože to je stejně vždycky před začátkem nového řádku nebo před koncem tabulky. Slušností je ovšem tag tr ukončovat, už pro přehlednost.

td

Buňka tabulky. Musí být umístěna v řádku <tr>. <td> je párový tag, ale pokud se neuzavře, tak si s tím prohlížeče poradí. Kromě obecných atributů má tyto:

Atributy tagu <td>

Všechny výše zníněné atributy s výjimkou rowspan a colspan jsou považovány za zastaralé a doporučuje se nahrazování pomocí stylů. V praxi se ovšem občas neobejdete bez width a height.

Tag <td>, atribut align

Tag <td>, atribut valign

Velmi složité téma jsou šířky buněk. Základní pravidlo říká, že všechny buňky v jednom sloupci jsou stejně široké. Šířka sloupce je vzata od jeho nejširší buňky. Výsledná šířka buněk je dále ovlivněna jednak atributem width, ale také obsahem buňky, nastavením šířky tabulky a šířkou ostatních sloupců buněk.

Výška buňky je jednodušší záležitost, protože vertikálního místa je nekonečno (kdežto horizontální je omezeno šířkou stránky/okna). U výšky tedy většinou platí, že co nastavíte, to platí, přičemž v případě konfliktu vyhrává větší výška.

Tag <td>, atributy rowspan, colspan

Atributy rowspan a colspan vlastně spojují buňky (nebo lépe řečeno vyznačují přesah). Rowspan přesahuje buňku do dalších řádků, colspan do sloupců. Na místě, kam buňka přesáhla, se do HTML zápisu nic nedává.

Příklad tabulky 2×2 se spojeným levým sloupečkem

A výsledek:

th

Hlavičková buňka. Chová se úplně stejně jako <td> pouze s tím rozdílem, že text je tučný a v buňkách vystředěný. Má stejný zápis i atributy jako <td>.>

caption

Nadpis tabulky (hlavička). V HTML zápisu má následovat za značkou <table> před prvním řádkem. Zobrazuje se jako vystředěný text nad tabulkou.

Atributy tagu <caption>

Atribut valign=bottom způsobí zobrazení pod tabulkou. Atribut valign výjimečně nelze nahradit CSS stylem vertical-align, protože ten má jinou funkci.

Tag <caption> může obsahovat cokoliv, ale nejčastěji se tam dává nějaký popisek tabulky.

Správně by každá tabulka měla obsahovat pouze jednu <caption>, ale když se jich tam zapíše více, prohlížeče je zobrazí.

Následující tagy přišly až v HTML 4.0

Další tagy existují pouze v HTML verze 4.0, používají se v praxi velmi málo a všímají si jich jen novější prohlížeče (IE 4 +, Mozilla apod.).

col

Sloupec. Umožňuje nastavit nějakou vlastnost všem buňkám v jednom sloupci (například šířku nebo zarovnání). Nepárový tag uváděný za tagem <table>. Není nutno <col> používat, ale když už, tak by jich mělo být tolik, kolik je sloupců (nebo použít atribut span). Tagy <col> se vztahují ke sloupcům v tom pořadí, jak jsou zapsány.

Možnými atributy jsou align a valign s hodnotami stejnými jako u buněk, nejlépe je ale asi použít style nebo class. Pravděpodobně budou fungovat i atributy pro formátování buněk (jako bgcolor). Doporučuji ale nastavovat formátování CSS stylem, to bude fungovat určitě.

Atribut span usnadňuje výpis několika stejných sousedních tagů <col>. Místo aby se psalo enkrát <col>, tak se napíše <col span=“<i>n</i>“>.

Správně by měla být skupině tagů <col> předřazen tag <colgroup>. Ale funguje to i bez toho.

Použítí tagů <col> se vyplatí pouze u větších, složitěji formátovaných tabulek.

colgroup

Skupina sloupců. Mám-li být upřímný, moc nechápu rozdíl mezi <col> a <colgroup>. Jediné dva rozdíly:

1. pokud jsou v nějaké tabulce uvedeny <col> i <colgroup>, <colgroup> jsou zanedbávány Ale jejich atributy platí pro následující tagy <col>
2. colgroup jsou brány v potaz při <table rules=“groups“>, to se týká vykreslování mřížky.

tbody

Tělo tabulky (nebo také skupina řádek). Zbytný tag. Vyskytuje se v elementu <table> vně řádků. V jedné tabulce může být více <tbody>. Obsahují řádky (tagy <tr>). Nemají zatím žádný smysl kromě vykreslování mřížky při <table rules=“groups“> a lze je použít při skriptování. V budoucnu se očekává, že budou v aplikacích funkčně sdružovat řádky. Stejné nedoporučované atributy align, valign a bgcolor se stejnou funkcí jako u <td>.

thead

Skupina řádků, která je záhlavím tabulky. Zbytný tag, velmi podobný tagu <tbody>. V budoucnu se očekává, že se záhlaví tabulky bude tisknout na každé stránce a při rolování bude setrvávat na místě (2008: funguje to minimálně ve Firefoxu). Stejně jako <tbody> má thead funkci pouze při vykreslování mřížky a skriptování. Stejné nedoporučované atributy align, valign a bgcolor se stejnou funkcí jako u <td>.

tfoot

To samé co <thead>, pouze se jedná o patičku tabulky. Tento tag by měl obsahovat jenom řádky tabulky (<td>). V kódu má být umístěn ještě před samotným tělem tabulky (takže jakoby na jiném místě, než ve výsledku). I v případě, že jsou za tfoot další řádky (v <tbody>), vykreslí se <tfoot> na konci tabulky (IE 5 +, Mozilla).

Tabulka jako layout webové stránky

Toto je jednoduchý layout se dvěma sloupci, patičkou a hlavičkou.

A výsledek (pro lepší představu s nastavením border=“1″):