Nové formátovací možnosti tabulek

Ve čtvté verzi HTML se objevily některé nové způsoby vykreslování tabulek. Prohlížeče Internet Explorer verze 4 a 5 jsou jediné, které alespoň část z toho podporují. Protože ale tyto dva prohlížeče dnes (duben 2000) v českých zemích naprosto dominují, je možno nových vlastností tabulek bez obav využívat. Stejně jde jenom o parádu a o usnadnění si práce.

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

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:

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

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 memě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 očas). Příklad:

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 <colgroups> se dají vnořovat <col>.)

Skupiny řádků

Máme tři nové párové tagy: <tbody>, <thead> a <tfoot>. Mohou se jimi logicky oddělovat řádky, které patří k sobě. V dnešní době to nemá jiné uplatnění než 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í.

Shrnující příklad:

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šimě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=",">

Další: Design pomocí tabulek Předchozí: Formátování tabulek
Vizte též: Základy tabulek

O tvorbě, údržbě a zlepšování internetových stránek. Základy HTML CSS FrontPage Hledání