V minulém článku jsme se dozvěděli, na co jsou seznamy a dnes si povíme něco o tabulkách. Tabulky většinou poznáte tak, že mají ohraničení a v jejich buňkách je text zarovnán vertikálně na střed. Nemusí to ale platit.

Tabulka - <table>

Tabulky můžete využít nejen pro vytvoření klasické tabulky, ale třeba když je potřeba někam něco umístit, aby to hezky vypadalo, jako například text k formulářovým polím (o formulářích si budete moct přečíst v 11. díle). Její zápis je velmi jednoduchý. Tabulka je párová a začnete ji značkou <table>.

Vlastnosti značky <table>

Tabulka může mít mnoho vlastností, já uvedu jen ty nejdůležitější z nich:

Řádek tabulky - <tr>

Co by to bylo za tabulku bez řádků. Řádky tabulky zapíšete pomocí značky <tr>. Tato značka je stejně jako všechny značky tabulky párová. Tato značka smí být pouze uvnitř značky <table> a může obsahovat jen buňky (<td> a <th>).

Vlastnosti značky <tr>

Řádek tabulky může mít 3 vlastnosti: height, background a bgcolor. Tyto vlastnosti mají stejný význam a stejné hodnoty jakon u vlastnosti u značky <table>.

Buňka tabulky - <td> a <th>

Buňky mohou být 2: <td> a <th>. Žádný velký rozdíl mezi nimi není, pouze se text v <th> bere jako hlavička, je vycentrovaný a tučný. Obě značky jsou párové. Buňky se mohou vyskytovat pouze v řádku tabulky. Naopak v buňkách se může vyskytovat úplně cokoliv (odstavce, odkazy, seznamy, tabulky, ...).

Vlastnosti značek <td> a <th>

Tyto značky mají stejné vlastnosti, jako jsou vlastnosti samotné tabulky, jen pár vlastností v tabulce je navíc:

Příklad jednoduché tabulky

Nyní si ukážeme nějaký příklad tabulky:

Výsledek:

Slučování buněk

Poslední, na co se dnes podíváme je slučování buněk. To se provádí vlastností colspan, což je přesah buňky do x dalších sloupců, nebo vlastností rowspan, která znamená přesah buňky do x dalších řádků. Ukážeme si malý příklad:

Výsledek:

Co nás čeká příště

Po dnešku by jste měli umět vytvářet a stylovat tabulky. V příštím článku se s Víčkem podíváte na grafickou stránku HTML a to na obrázky.