L e k c e č. 4 - Tabulky

Postoupili jste do čtvrté - závěrečné lekce, ve které se seznámíme se zajímavou problematikou tabulek. Jde o velmi obsáhlé a vyčerpávající téma, proto jsme lekci rozdělil na 13 tematických celků a ty umístili na samostatné stránky. Přejeme Vám hodně zdaru a teď začínáme ... rozcestníkem:

1. Co jsou a k čemu složí tabulky
2. Základní tabulka
3. Ohraničení tabulky
4. Barevné ohraničení tabulky
5. Pozadí tabulky, řádku a buňky
6. Odsazení obsahu buňky od jejího ohraničení
7. Odsazení mezi jednotlivými buňkami
8. Zarovnání ve vodorovném směru
9. Zarovnání ve svislém směru
10. Nastavení šířky a výšky tabulky, řádku a buňky
11. Nestandardní výška a šířka buňky
12. Vnořování tabulek
13. Složitější tabulky

2. Základní tabulky

Abychom vůbec mohli nějakou tabulku vytvořit potřebujeme znát především tři základní tagy. Mateřský tag tabulky <TABLE> a jeho ukončovací zápis </TABLE>, tag vymezující řádky tabulky <TR> a samozřejmě </TR> a nakonec tag, pomocí kterého tvoříme na řádcích buňky, <TD> a </TD>. Tyto tři tagy jsou ty nejdůležitější. Specifikace tabulek HTML sice obsahuje několik dalších tagů (např. <THEAD>, <TBODY>, atd.), ale bez těch se každá tabulka obejde, a proto se o nich nebudeme vůbec zmiňovat.

Nyní si vytvoříme základní tabulku a na ní si vše vysvětlíme.

<TABLE border="1">
 <TR>
  <TD>1.řádek, 1.buňka</TD>
  <TD>1.řádek, 2.buňka</TD>
 </TR>
 <TR>
  <TD>2.řádek, 1.buňka</TD>
  <TD>2.řádek, 2.buňka</TD>
 </TR>
</TABLE>

Výsledek zdrojového kódu:

Jistě jste si všimli různého odsazení odlišných tagů tabulky - <TABLE>, <TR> a <TD>. Tímto postupem dosáhneme přehlednějšího uspořádání zdrojového kódu a následné lepší orientace v něm. Odsazování probíhá následovně: nejméně, resp. vůbec, neodsazujeme mateřský tag <TABLE>, jemu podřazený tag <TR> odsadíme více a tag <TD>, který je podřazený oběma předcházejícím, odsadíme nejvíce. Takovýto postup se nám vyplatí zejména při psaní složitějších tabulek, my ho vřele doporučujeme.