Tabulky

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


Tag Význam Párový Výskyt
table tabulka ano
tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot>
td buňka tabulky nepovinně <tr>
th hlavičková buňka tabulky nepovinně <tr>
caption hlavička tabulky ano <table>
col ovlivnění sloupce tabulky ne <table>
colgroup skupina sloupců tabulky ne <table>
tbody tělo tabulky ano <table>
thead hlavička tabulky ano <table>
tfoot patička tabulky ano <table>

table

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

<table>
<tr><td>horní levá buňka</td><td>horní pravá</td></tr>
<tr><td>dolní levá</td><td>dolní pravá</td></tr>
</table>

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

atribut význam možné hodnoty
align obtékání tabulky ostatním textem left, right, center
cellpadding vnitřní okraj buněk pixely
cellspacing vnější okraj buněk pixely
border šířka rámečku buněk pixely
width minimální šířka tabulky délka nebo procento
height minimální výška délka nebo procento
background obrázek na pozadí URL obrázku
bgcolor barva pozadí barva
bordercolor barva rámečku barva
bordercolorlight světlejší vykreslovací barva rámečku (Explorer) barva
bordercolordark tmavší vykreslovací barva rámečku (Explorer) barva
frame vykreslení rámečku okolo void, border, box, hsides, vsides, above, below, lhs, rhs
rules vykreslení mřížky none, all, rows, cols, groups
summary stručné shrnutí obsahu text pro čtečky pro nevidící

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

align= význam
left tabulka je umístěna vlevo a obtékána textem
right tabulka je umístěna vpravo a obtékána textem
center tabulka je vystředěna a není obtékána. Nestandardní vlastnost fungující jenom v Exploreru. Vystředění v Mozille a spol. se dělá přes style=“margin-left: auto; margin-right: auto“

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

frame= význam
void tabulka nemá rámeček
border (standardní hodnota) rámeček je okolo celé tabuly
box
hsides horizontální okraje (= horní a dolní)
vsides vertikální okraje (= pravý a levý)
above zobrazí se pouze horní okraj tabulky
below pouze spodní okraj
lhs levá strana tabulky
rhs pravá strana tabulky

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

rules= význam
none mřížka nebude vykreslena
all (standardní hodnota) mřížka bude mezi všemi buňkami tabulky
rows mřížka bude pouze mezi řádky
cols mřížka je pouze mezi sloupci tabulky
groups mřížka bude pouze mezi oddíly tabulky (taby tbody a thead) a mezi skupinami sloupců (tag colgroup)

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í).

<table border=“1″ style=“table-layout: fixed; border-collapse: collapse;“>…

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>

atribut význam hodnoty nahraďte CSS stylem
align horizontální zarovnání obsahu left, center, right, justify text-align
valign vertikální zarovnání obsahu top, middle, bottom, baseline vertical-align
width doporučená šířka buňky délka nebo procento width
height minimální výška řádku délka height
nowrap obsah buňky se nebude zalamovat bez hodnoty white-space
background obrázek na pozadí URL obrázku background-image
bgcolor barva pozadí barva background-color
bordercolor barva rámečku barva border-color
bordercolorlight světlejší vykreslovací barva rámečku barva
bordercolordark tmavší vykreslovací barva rámečku barva
rowspan přesah buňky na n dalších řádků (spojení buněk) počet přesahujících řádků
colspan přesah buňky do dalších sloupců počet přesahujících sloupců
axis, scope, abbr, headers informace pro automatické zpracování různé zbytečné hodnoty

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

align= význam
left zarovnání obsahu doleva (není nutno nastavovat)
right zarovnání obsahu buňky vpravo
center zarovnání na střed
justify zarovnání do bloku

Tag <td>, atribut valign

valign= význam
middle vertikální zarovnání na střed (výchozí hodnota)
top vertikální zarovnání obsahu buňky nahoru
bottom vertikální zarovnání dolů
baseline vertikální zarovnání textu k jiným textům v řádku

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

<table border=“1″>
<tr>
<td rowspan=2>levá buňka</td>
<td>horní pravá</td>
</tr>
<tr>
<!– zde nic –>
<td>dolní pravá</td>
</tr>
</table>

A výsledek:

levá buňka horní pravá
dolní pravá

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 význam možné hodnoty
align horizontální zarovnání left, center, right
valign nad nebo pod tabulkou top, bottom

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>“>.

<table>
<col style=“text-align: right“>
<col span=“2″ style=“text-align: center“>
<tr> <td>vpravo zarovnaný sloupec</td> <td>Vycentrovaný sloupec</td>
<td>Další vycentrovaný sloupec (to je ta dvojka).</td> </tr>
</table>

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.

<table border=“0″ cellspacing=“0″ cellpadding=“5″ width=“800″>
<tr>
<td colspan=“2″ width=“800″><h1>Moje webová stránka!</h1></td>
</tr>
<tr>
<td width=“200″><h2>Menu</h2></td>
<td width=“600″><h2>Obsah webu</h2></td>
</tr>
<tr>
<td colspan=“2″ width=“800″>Patička (c) 2008</td>
</tr>
</table>

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

Moje webová stránka!

Menu

Obsah webu

Patička (c) 2008
Tabulky jsou primárně určeny na data a nikoliv na tvorbu designu. Nehledě na to, že dosti znepřehledňují kód a zpětná editace je také nepohodlná. Doopravdy čistým řešením je tvorba layoutu pouze pomocí CSS.