Tabulky

Přehled tagů z oblasti tabulek
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>.

Příklad tabulky 2x2:
<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ů:

Atributy tagu <table>
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	barva
bordercolordark	tmavší vykreslovací barva rámečku	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

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

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	rámeček je okolo celé tabuly
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!

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

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 neužívanými) atributy jsou height, background, bgcolor. Jde o tag párový, ale pokud se neuvede koncová značka, tak se nic nestane, protože to je stejně vždycky před začátkem nového řádku nebo před koncem tabulky.

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
align	horizontální zarovnání obsahu	left, center, right, justify
valign	vertikální zarovnání obsahu	top, middle, bottom, baseline
width	doporučená šířka buňky	délka nebo procento
height	minimální výška řádku	délka
nowrap	obsah buňky se nebude zalamovat	bez hodnoty
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	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ů

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í zarová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. Neznám obecný algoritmus vyhodnocování šířky, ale i to, co vím, je strašně dlouhé, proto to sem nepíšu.

Výška buňky je jednodušší záležitost, protože vertikálního místa je nekonečno (horizontální je omezeno šířkou stránky/okna).

Atributy rowspan a colspan vlastně spojují buňky (nebo lépe řečeno vyznačuje 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 2x2 se spojeným levým sloupečkem:
<table>
<tr><td rowspan=2>levá buňka</td><td>horní pravá</td></tr>
<tr><td>dolní pravá</td></tr>
</table>

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.

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

Další tagy existují pouze v HTML verze 4.0 a všímají si jich jen novější prohlížeče.

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. 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=n>.

<table>
<col align=right>
<col span=2 align=center>
<tr> <td>vpravo zarovnaný sloupec</td> <td>Vycentrovaný sloupec</td> <td>Další vycentrovaný sloupec.</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:

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>
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. 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ě (zatím to nefunguje). Stejně jako <tbody> má dnes funkci pouze při vykreslování mřížky a skriptování. Atributy align, valign a bgcolor se stejnou funkcí jako u <td>.