Tabulky na stránkách

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

Na této stránce se pokusím nastínit pouze základní syntaxi tabulek v HTML kódu.

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

Obsah buňky Další buňka
levá spodní pravá spodní

Ta má tento kód:

<table >
<tr> <td>Obsah buňky</td> <td>Další buňka</td> </tr>
<tr> <td>levá spodní</td>    <td>pravá spodní</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

Název Cena Poznámka
Rtuť 658,60 Kč Tekutá
Máslo 22,- Kč

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 (například mně se díky CSS stylům rovnou podbarvilo zeleně).
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:
Příklad zobrazení border, cellpadding a cellspacing
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:

Hlavička
A B C
D
E

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

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

 

 

 

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy Prvky stránek Tvorba webu

 

Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 04. května 2014.