Složitější možnosti tabulek

Ve čtvrté verzi HTML se objevily některé nové způsoby vykreslování tabulek, které jsou málo známé. Dnešní prohlížeče (jaro 2003) je nepodporují zrovna dobře, např. Mozilla neumí frame a rules (test na verzi 0.9.3).

Osobně doporučuji formátování rámečků tabulek dělat moderněji -- pomocí CSS stylů.

Vykreslování mřížky frame a rules - Formátování sloupců - Skupiny řádků - Co nefunguje - Summary

Vykreslování mřížky - FRAME a RULES

Mřížka a rámeček se kolem buněk tabulky normálně vykreslují. Nové atributy frame a rules umožňují předepsat, že některé čáry (např. čáry mezi sloupečky) se vykreslovat nebudou. Atribut FRAME přitom kontroluje zobrazení vnějšího okraje tabulky, RULES popisují zobrazování vnitřních čar.

Frame - vykreslení rámečku

Jako hodnotu atributu frame můžu zadat několik hodnot:

<table frame=	popis
void	tabulka nemá rámeček
border (standardní hodnota)	rámeček je okolo celé tabulky
box	rámeček je okolo celé tabulky
hsides	horizontální strany (= 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

Aby to fungovalo, musím navíc zadat nenulovou šířku okraje (border), jinak se nezobrazí nic. Příklad:

<table border="2" cellpadding="6" cellspacing="0" width="90%" frame="hsides">

Tato tabulka by neměla mít zobrazen pravý a levý okraj.

Rules - vykreslení mřížky

Atribut RULES se používá úplně stejně jako FRAME. Přestože má méně možných hodnot, připadá mi využitelnější:

<table rules=	hodnota
none	mřížka nebude vykreslena
all (standardní hodnota)	mřížka bude mezi všemi buňkami tabulky
rows	mřížka bude pouze mezi řádky (nejzajímavější hodnota)
cols	mřížka je pouze mezi sloupci tabulky
groups	mřížka bude pouze mezi oddíly tabulky (tagy tbody a thead) a mezi skupinami sloupců (tag colgroup), viz níže

Kupříkladu ukážu, jak tato tabulka začínala:

<table border="2" cellpadding="6" cellspacing="0" width="90%" frame="vsides" rules="rows">

Tato tabulka by neměla mít zobrazen horní a spodní rámeček a mřížku by měla mít pouze mezi řádky. Opět je nutné mít nenulový atribut border, jinak se samozřejmě nevykreslí vůbec nic.

Pokud se vám nezobrazily efekty, které popisuji, patrně používáte prohlížeč, který je nepodporuje. Z toho mimo jiné vyplývá, že se na tyto efekty nikdy nemůžete spolehnout. Naštěstí jde o takovou jenom libůstku, jejíž nefunkčnost zase tak nebolí.

Formátování sloupců - <col>

Kdo někdy ručně zadával šířky a zarovnání buněk v nějaké větší tabulce, asi mu vadilo, jak je to pracné. Přitom v každém sloupečku se zadávají všem buňkám stejné hodnoty! Trochu nám situaci usnadnily wysiwyg editory, které tam ty atributy (width="236" align="center" třeba) doplnily automaticky, ale stejně je pak ten kód příliš "nafouknutý". Čas dozrál na jednoduché formátování sloupců. Jsou na to nové tagy <col> a <colgroup> (ten jenom občas). Příklad:

A	B	C
D	E	F

Tabulka má tento kód:

Krátký popis: tagy <col> se dávají hned za tag <table> a mělo by jich být tolik, kolik je sloupců. Každý jeden tag popisuje formátování jednoho sloupce. Použitelné atributy u <col> jsou šířka width, align, bgcolor, valign a style. Možná by fungovaly i jiné, ale na to se nelze spolehnout. Šířku lze kromě pixelů (zápis bez jednotky) a procent zadávat též v násobku: např. sloupec <col width="3*"> bude z případného zbylého místa nárokovat 3 díly pro sebe (z celkového součtu dílů nárokovaných všemi sloupci).

Pokud se má třeba pět sousedních sloupců formátovat stejně, je možné u <col> použít atribut span: <col span="5" align="right">.

Namísto tagu <col> je možno použít tag <colgroup>. (Dokonce by se to správně mělo dělat vždy.) Jediný rozdíl spočívá ve vykreslování mřížky, pokud u tabulky použiji atribut rules="groups". (Další teoretický rozdíl je v tom, že za tag <colgroup> se dají vnořovat <col>.)

Problémy s Mozillou

Prohlížeče odvozené od jádra Gecko (Mozilla, Firefox) mají s formátováním pomocí <col> a <colgroup> problémy. Nedokážou jimi formátovat složitější věci než je třeba tučnost nebo barva písma. Moje zkušenosti s tím, co v Mozille přes <col> jde a co nejde, se různí, nemám v tom jasno.

Ti, kdo rozumějí vnitřnímu formátovacímu modelu Mozilly, tvrdí, že to tak je správně a že je dobře, že to nefunguje. No nevím, mě osobně to docela štve.

Skupiny řádků

Existují párové tagy: <tbody>, <thead> a <tfoot>. Mohou se jimi logicky oddělovat řádky, které patří k sobě. Hlavní uplatnění to má při vykreslování mřížky. V budoucnosti se takto budou pravděpodobně vymezovat hlavičky a patičky, které se budou tisknout na každé stránce nebo budou při rolování zůstávat na obrazovce. Nic z toho ale dnešní prohlížeče nepodporují (aktualizováno 2003). Jediný viditelný efekt dělá <tfoot>: vykresluje skupinu řádků na konci tabulky, i když je uveden na začátku (IE 5+), může to být kontraproduktivní.

Shrnující příklad

Čaj	Druh	Názor
lipový	bylinky	slaďoučký
třezalky	bylinky	na spaní
Sherry tea	černý s ovocnou vůní	nic moc
Šípkový	vlastně ovocný	jedině s cukrem
znám ještě další	různých druhů	přijďte popít

Tato tabulka se v HTML zapíše takto:

<table border="2" cellpadding="6" cellspacing="0" rules="groups"> <colgroup span="2" align="center" valign="bottom" width="40"> <colgroup bgcolor="#00FFFF"> <thead> <tr><td>Čaj</td><td>Druh</td><td>Názor</td></tr> </thead> <tbody bgcolor="red" align="right"> <tr><td>lipový</td><td>bylinky</td><td>slaďoučký</td></tr> <tr><td>třezalky</td><td>bylinky</td><td>na spaní</td></tr> </tbody> <tbody> <tr><td>Cherry tea</td><td>černý s ovocnou vůní</td><td>nic moc</td></tr> <tr><td>Šípkový</td><td>vlastně ovocný</td><td>jedině s cukrem</td></tr> </tbody> <tfoot> <tr><td>znám ještě další</td><td>různých druhů</td><td>přijďte popít</td></tr> </tfoot> </table>

Poprvé jsme si zkusili vykreslování mřížky po oddílech (rules="groups"). Opravdu důležitou věcí je spojení dvou prvních sloupců do jedné skupiny atributem span="2". Za pozornost stojí vertikální zarovnání na spodek (normálně je na střed) u prvního a druhého sloupce a barva pozadí sloupce třetího. Dále atributy tagu <tbody>, které tak zformátují několik řádků najednou (kdyby se to dalo k <tr>, tak to ovlivní jen jeden řádek). U buněk "slaďoučký" a "na spaní" si všimněte, že barva pozadí je převzata z <tbody> a nikoliv z <colgroup>.

Co nefunguje

V příručkách a textech o HTML se objevují některé nové možnosti formátování tabulek, které jsou sice v normě HTML, ale prostě nikde nefungují. Jedná se o:

Zobrazování patičky automaticky na konci tabulky
Zarovnání sloupce na znak desetinné čárky: <col align="charoff" char=",">

Summary

Podle jakési nové specifikace by každá tabulka měla obsahovat atribut summary. V atributu summary by měl být shrnutý obsah tabulky pro klienty, kteří neumějí zpracovávat tabulky. Tolik teorie.

Neznám žádný prohlížeč, který by neuměl zpracovávat tabulky. I většina nevidomých umí s tabulkami jakž takž pracovat, takže považuji atribut summary za zbytečnost a doporučuji jej nezadávat.

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně