O tabulkách jsme se dozvěděli už téměř všechno. Tagy a atributy, které se běžně používají známe, ale kromě nich existují i další méně známé, které sice tak často nevyužijeme, ale pokud potřebujeme dosáhnout například nějakého speciálního orámování, mohou nám velice usnadnit práci.
12.8.2004 15:00 | Pavel Kácha | přečteno 28921×
U tabulek můžete definovat tři jejich důležité části: záhlaví, tělo a patu tabulky. Tyto tři části mají význam hlavně u dlouhých tabulek, které by měly být nějak přehledně zobrazeny: prohlížeč může nechat zobrazené záhlaví a zápatí na místě a posouvat jen tělo tabulky, při tisku se může opakovat záhlaví a zápatí na každé stránce. Jistě by se našly i nějaké další možnosti.
Záhlaví definujeme pomocí párového tagu <thead></thead>, pro tělo tabulky je připraven párový tag <tbody></tbody> a pro zápatí máme připravený opět párový tag <tfoot></tfoot>. Ukončovací tag není povinný, ale je lepší ho použít. Obsahem elementů jsou jednotlivé řádky tabulky, které chcete zařadit do skupiny řádek. Všechny tyto tři tagy mají kromě atributů, které jsou definovné pro všechny elementy HTML (id, class, lang, dir, title, style, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup) povolené i atributy align="", char="", charoff="", valign="".
O atributech align="", char="" a valign="" jsme si již povídali a jejich význam je při tomto použití totožný, proto se zmíním jen o novém atributu charoff="". Pomocí tohoto atributu můžete určit, kde se má zobrazit znak, ke kterému zarovnáváte data v tabulce (funguje samozřejmě jen při použití těchto atributů align="char" char=","). Jako hodnota atributu se udává vzdálenost od levého okraje buňky, můžete ji vyjádřit v pixelech nebo v procentech. Takže například chceme, aby se zarovnávající znak zobrazil uprostřed tabulky: stačí napsat charoff="50%". Atribut charoff="" můžete použít u následkujících elementů: <td>, <th>, <col> (viz níže), <colgroup> (viz níže), <tr><thead>, <tbody>, <tfoot>.
Při použití elementů <thead>, <tbody>, <tfoot> si musíte pamatovat tři důležitá pravidla:
Nemusíte slučovat do skupin jenom řádky, slučovat se dají i sloupce. Dá se to využít nejen pro zajímavější orámování tabulky, jak si řekneme později, ale hlavně je to dobré pro prohlížeč, který nemusí čekat na všechna data, aby rozhodl, jak budou sloupce široké - nemusí tedy při vykreslování tabulky několikrát přeformátovat celou stránku.
Skupiny sloupců definujeme pomocí párového tagu <colgroup></colgroup>, ukončovací tag není povinný. Kromě atributů, které jsou definované pro všechny elementy, můžeme použít i atributy align="", char="", charoff="", valign="". A navíc existují i dva speciální: span="" a width="". Pomocí span="" určujemejeme kolik sloupců má mít právě definovaná skupina sloupců, jejich šířku nastavíme atributem width="". Jako hodnotu atributu width="" můžeme použít buď vyjádření pomocí procent, pixelů nebo speciální hodnotu 0*, která prohlížeči říká, že sloupec má mít takovou minimální šířku, aby se do něj vešel obsah buněk.
Sloupce nemusíte definovat jen v elementu <colgroup>, můžete použít i jiný způsob zápisu pomocí nepárových tagů <col>. Jejich atributem je width="" a jako hodnotu můžete nastavit šířku v pixelech procentech nebo speciální hodnotu n*, kde n je libovolné celé číslo od nuly až po libovolně vysoké číslo, zbývající místo se potom rozdělí v poměru čísel n mezi jednotlivé sloupce. Výraz 0* má stejný význam jako u elementu <colgroup>.
Můžeme použít i altribut span="", kterým můžeme najednou definovat několik buněk. Počet buněk zadáme jako jeho hodnotu.
Jeden malý příklad: Chceme definovat tři sloupce: první dva o šířce 20 pixelů a třetí o minimální šířce pro obsah buňky.
Pokud budou naše tabulky převáděné do mluvené řeči, je dobré nějak lépe označit. K tomu slouží atributy axel="" a axis="", které můžete použít ve všech buňkách: tedy v elementech <td> a <th>. Hodnotou atributu axis="" je jméno buňky, pokud ho nepoužijete je jméno buňky shodné s jejím obsahem.
Hodnotou atributu axes="" je seznam jmen axis="" buněk, ke kterým se obsah buňky váže.
U elementu <table> můžete použít atribut frame="" pro změnu vykreslování rámečku tabulky nebo atribut rules="" pro změnu vykreslování mřížky.
Pro atribut frame="" jsou povolené tyto hodnoty
Hodnota | Význam |
void | tabulka je bez rámečku. Tato volba je výchozí. |
above | rámeček je pouze na horní hraně tabulky |
below | rámeček je pouze na spodní hraně tabulky |
hsides | rámeček je pouze na dolní a spodní hraně tabulky |
vsides | rámeček je pouze na levé a pravé hraně tabulky |
lhs | rámeček je pouze na levé hraně tabulky |
rhs | rámeček je pouze na pravé hraně tabulky |
box | rámeček je okolo celé tabulky |
border | rámeček je okolo celé tabulky |
Pro atribut rules="" jsou povolené tyto hodnoty
Hodnota | Význam |
none | tabulka je bez mřížky. Tato volba je výchozí. |
groups | mřížka je pouze mezi skupinami řádek a skupinami sloupců |
rows | mřížka je pouze mezi řádky tabulky |
cols | mřížka je pouze mezi sloupci tabulky |
all | mřížka je mezi všemi buňkami tabulky |
Šířku rámečku a mřížky nastavíte atributem border="", pokud ho nastavíte na nulu a nepoužijete rules="", frame="" bude tabulka bez mřížky a rámečku. Pokud nastavíte nenulovou hodnotu bez použití rules="", frame="", bude tabulka formátovaná jako byste nastavili frame="border" rules="all".