ARCHIV

HTML (9) - tabulky 2

Minule jsme začali pracovat s tabulkami, dnes si o nich řekneme více. Přidáme tabulkám nadpis, naučíme se nastavit vzdálenost mezi buňkami, odsazení textu od rámečku a budeme slučovat buňky.

5.8.2004 15:00 | Pavel Kácha | Články autora | přečteno 31660×

Nadpis tabulky

Ať už vytváříte jednoduché nebo složité tabulky možná k nim chcete přidat nějaký nadpis. K tomuto účelu zavádí HTML párový element <caption></caption>. Koncový tag je povinný. Tento element můžete použít jen hned po tagu <table>, tzn. ještě před definicí řádek tabulky.

Pro určení kde chcete zobrazit nadpis tabulky můžete použít atribut align="", kterému můžete nastavit jednu z těchto hodnot:

top

Nadpis se zobrazí nad tabulkou. Tato hodnota je výchozí, pokud atribut align="" vynecháte, bude nadpis nad tabulkou.

bottom

Nadpis se zobrazí pod tabulkou.

left

Nadpis se zobrazí vlevo od tabulky.

right

Nadpis se zobrazí vpravo od tabulky

Tento atribut by se už neměl používat a v novějších verzích standardu už nebude podporován - lze ho nahradit pomocí CSS.

Další povolené atributy pro element <caption></caption> jsou stejné jako pro ostatní elementy. Jejich význam už byl několikrát vysvětlen, takže myslím není třeba je znovu opakovat:

• id
• class
• lang
• dir
• title
• style
• onclick
• ondblclick
• onmousedown
• onmouseup
• onmouseover
• onmousemove
• onmouseout
• onkeypress
• onkeydown
• onkeyup

Vzdálenost mezi buňkami tabulky

Při práci s tabulkami může nastat situace, kdy budete chtít změnit mezeru měnit jednotlivými buňkami. Žádný problém stačí jen do tagu <table> přidat atribut cellspacing="". Jako jeho hodnotu uvedeme počet pixelů, které mezi sebou mají mít buňky tabulky.

Pro lepší názornost ukáži, jak by vypadal příklad z předchozího dílu s použitím atributu cellspacing="" a s hodnotou 10. První řádek bude tedy vypadat takto:

Z příkladu je funkce tohoto atributu, myslím, úplně jasná.

Vzdálenost obsahu buňky od jejího okraje

Stejně tak jako jde měnit vzdálenost jednotlivých buněk mezi sebou, jde nastavit i vzdálenost obsahu buňky od okraje buňky. Slouží k tomu atribut cellpadding="", kterému jako parametr opět předáte počet pixelů určující vzdálenost obsahu buňky od jejího okraje. Tento atribut je potřeba téměř vždy, když pracujete s tabulkami, protože jinak jsou data v tabulce nehezky nalepená na rámeček buněk.

Opět zopakuji tabulku z minula, ale přidám do elementu <table> atribut cellpadding="" a jeho hodnotu opět nastavíme na 10. První řádek tabulky bude tedy vypadat takto:

Je jasně vidět, že kolem obsahu buněk se vytvořila prázdná oblast, která usnadňuje čtení dat.

Slučování buněk

Jednoduché tabulky, které mají stejný počet buněk ve všech sloupcích nebo řádcích už vytvořit umíme, ale dost často nastává situace, že potřebujete některé buňky sloučit s vedlejšími. Stačí jen uvést k definici buňky, tj. k tagu <td> nebo <th> správný atribut a jako jeho hodnotu uvést kolik buněk se má sloučit.

Pro slučování buněk v řádku je to atribut colspan="". Úplně stejně se používá i atribut rowspan="", který ale spojuje buňky v jednom řádku. Oba dva atributy se dají použít najednou u jedné buňky.

Naši ukázkovou tabulku poněkud rozšíříme a využijeme i atributy colspan="" a rowspan="".

A tady je výsledek tak, jak jej zobrazí váš prohlížeč.

Prázdné buňky

Při práci s tabulkami může nastat i situace podobná té z následujícího příkladu. Máte tabulku, která nemá vyplněná všechna pole, ale vy je přesto chcete zobrazit. Teoreticky by to měl vyřešit následující kód

Ve skutečnosti to dopadne jinak než jsme asi čekali:

Náprava je vcelku jednoduchá: musíme do buňky vložit nějaký obsah. Pokud chceme, aby buňka vypadala jako prázdná, je ideálním řešením nedělitelná mezera, kterou můžete zapsat pomocí její HTML entity &nbsp. Po úpravě bude tedy příklad vypadat takto:

Příště se podíváme na různé způsoby rámování tabulek.

Verze pro tisk