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

3. Ohraničení tabulky

Zajisté Vám neunikl ani atribut BORDER v tagu <TABLE> jehož hodnotou je 1. Tento tag udává velikost ohraničení tabulky (ta se uvádí v pixelech). To znamená, že když se jeho hodnota rovná nule, nemá tabulka žádné ohraničení. Naopak rovná-li se 20, pak má tabulka ohraničení o velikosti 20 pixelů.

Tabulka s ohraničením 0px:

<TABLE border="0">
 <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:

Tabulka s ohraničením 20px:

<TABLE border="20">
 <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:

Jak vidíte, tabulky, aby působily prostorově jsou rozděleny na 2 části, z nichž jedna je světlá a další tmavá (základní nastavení: světlá část - stříbrná; tmavší část - šedá). Toto nastavení můžeme pomocí dalších atributů, o kterých se zmíníme níže, měnit.