ARCHIV

HTML (10) - tabulky 3

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 | Články autora | přečteno 28936×

Skupiny řádek

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:

1. Každá použitá skupina řádek musí obsahovat alespoň jeden řádek tabulky. U záhlaví a zápatí je vhodnější použít pro jednotlivé buňky místo <td> element <th>
2. Pokud tyto elemety (<thead>, <tbody>, <tfoot>) používáte musí být uvedeny ještě před definicí řádků tabulky.
3. Záleží na pořadí elementů <thead>, <tbody>, <tfoot> v dokumentu. V tabulce musí být nejdříve definice záhlaví, potom zápatí a nakonec samotné tělo buňky, které ale můžete rozdělit pomocí několika elementů <tbody> na více logických částí.

Skupiny sloupců

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.

Pojmenování buněk

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.

Zobrazení mřížky a rámečku tabulky

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

Verze pro tisk