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 | přečteno 27632×

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:

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:

<table border="1" align="center" cellspacing="10">
Rok Prodáno kusů XY
2001 1243
2002 968
2003 1513

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:

<table border="1" align="center" cellpadding="10">
Rok Prodáno kusů XY
2001 1243
2002 968
2003 1513

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

<table border="1" align="center" cellpadding="5">
  <tr>
    <th rowspan="2">Rok</th>
    <th colspan="2">Informace o prodeji</th>
  </tr>
  <tr>
    <th>Prodáno kusů XY</th>
    <th>Předpokládaný prodej</th>
  </tr>
  <tr>
    <td>2001</td>
    <td>1243</td>
    <td>850</td>
  </tr>
  <tr>
    <td>2002</td>
    <td>968</td>
    <td>1250</td>
  </tr>
  <tr>
    <td>2003</td>
    <td>1513</td>
    <td>1300</td>
  </tr>
</table>

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

Rok Informace o prodeji
Prodáno kusů XY Předpokládaný prodej
2001 1243 850
2002 968 1250
2003 1513 1300

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

<table border="1">
  <tr>
    <td>1. buňka</td>
    <td>2. buňka</td>
  </tr>
  <tr>
    <td>3. buňka</td>
    <td></td>
  </tr>
</table>

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

1. buňka 2. buňka
3. buňka

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:

<table border="1">
  <tr>
    <td>1. buňka</td>
    <td>2. buňka</td>
  </tr>
  <tr>
    <td>3. buňka</td>
    <td>&nbsp;</td>
  </tr>
</table>
1. buňka 2. buňka
3. buňka  

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

Online verze článku: http://www.linuxsoft.cz/article.php?id_article=332