Tabulky na webu

Dvojí použití tabulek - Nejjednodušší tabulka - Další příklad - Spojování buněk a hlavička - Obsah buněk

Dvojí použití tabulek

Na internetových stránkách se tabulky používají ve dvou případech:

1. Jestliže je potřeba udělat klasickou tabulku.
2. Jako pomůcka pro úpravu stránek, když je něco potřeba někam umístit (např. sloupcová sazba).

Druhý způsob není v HTML úplně košer, ale účel světí prostředky. V tomto textu se budu zabývat napřed výstavbou běžných tabulek. Podívám se hlavně na to, jak jejich zápis vypadá v kódu HTML. Pokud neznáte základy HTML, tak vám to nic neřekne. Jinde se rozepisuji o formátování a nových vlastnostech tabulek.

Nejjednodušší tabulka

Zkusím vložit tabulku s dvěma řádky a dvěma sloupci (a nějakým obsahem).

Ta má tento kód:

<table >
<tr> <td>Obsah buňky</td> <td>Další buňka</td> </tr>
<tr> <td>bla bla</td> <td>cha cha cha</td> </tr>
</table>

Co znamenají jednotlivé tagy:

<table>

Párový tag, který začíná tabulku.

<tr>

Párový tag, který začíná a končí řádek tabulky. (TR znamená table row, čili řádek).

<td>

Tag buňky tabulky.

Je to docela jednoduché, že?

Další příklad

Tato tabulka má následující kód:

<table border="2" cellpadding="5" cellspacing="4">

<tr><th>Název</th><th>Cena</th><th>Poznámka</th></tr>

<tr><td>Rtuť</td><td>658,60 Kč</td><td>Tekutá</td></tr>

<tr><td>Máslo</td><td>22,- Kč</td></tr>

</table>

V tomto příkladu se objevilo pár nových věcí:

<th>

<th> se dá použít namísto <td>, ale znamená to hlavičkové pole. Obsah bývá tučný a zarovnaný na střed. Používání této značky se doporučuje kvůli automatickému zpracování textu.

border

atribut tagu <table>, který nastavuje šířku vnějšího rámečku kolem tabulky (v obrazovkových bodech);
kdyby bylo border="0", nevykreslí se ani vnitřní mřížka

cellpadding

vnitřní okraj buněk (v pixelech), čili vzdálenost textu od rámečku. Taktéž atribut tagu <table>

cellspacing

vnější okraj buněk (vně rámečku) Různá nastavení velikosti okrajů buněk si můžete nastudovat na příkladu nebo na obrázku:

Vynechaná buňka

V tabulce chybí poslední buňka vpravo dole. To se může, ale nemá dělat. Prohlížeč ji pak většinou nezobrazí. Vynechávat lze zřejmě jedině buňky, které jsou na konci řádku.

Spojování buněk a hlavička

HTML umožňuje spojit dvě nebo více sousedních buněk do jedné. Zároveň popíšu vkládání hlavičky. Příklad tabulky a její kód:

<table border="1" cellpadding="10">

<caption>Hlavička</caption>

<tr><td>A</td> <td>B</td> <td rowspan="2">C</td> </tr>

<tr> <td colspan="2">D</td> </tr>

<tr> <td colspan="3">E</td> </tr>

</table>

Všimněte si atributů rowspan a colspan. Říkají, kolik "buněk prostoru" zabírá aktuální buňka. Rowspan="2" znamená, že buňka C zasahuje přes dva řádky (row = řádek), colspan="3" říká, že buňka zabírá prostor přes tři sloupečky (col = sloupec).

Pro zájemce jeden paradoxní příklad spojování buněk.

(Existuje ještě jiný způsob, jak zdánlivě rozdělit buňku tabulky: do buňky se vloží celá další tabulka.)

Hlavička -- caption

Hlavička tabulky se dnes téměř nepoužívá, protože se dá udělat jednodušeji. Standardně se má ale vkládat mezi tagy <caption></caption>, které jsou umístěny ještě před prvním řádkem tabulky. Pokud bych uvedl u caption atribut align="bottom", měla by se hlavička zobrazit pod tabulkou.

Obsah buněk tabulky

Do buňky tabulky můžete vložit úplně cokoliv. Obrázky, odstavce, ale třeba i další tabulku. Je dobré takových vnořených tabulek nedělat příliš mnoho, protože pak v tom snadno vzniká zmatek.

Je možné dokonce vkládat do tabulek celé stránky a dělat tak sloupcovou sazbu. Dělat by se to ale nemělo, protože to zpomaluje zobrazování stránky.

Další: Formátování tabulek, zejména šířky buněk
Vizte též: nové vlastnosti tabulek, design pomocí tabulek, základy HTML

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