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
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:

<table border="2" cellpadding="6" cellspacing="0" width="300">
<col align="left" width="20">

<col align="center">

<col align="right">

<tr> <td>A</td> <td>B</td> <td>C</td> </tr>
<tr> <td>D</td> <td>E</td> <td>F</td> </tr>
</table>

 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:

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, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy Prvky stránek Tvorba webu

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.