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

11. Nestandardní výška a šířka buňky

Nyní si ukážeme jak měnit velikosti jednotlivých buněk. Někdy potřebujeme mít v jednom řádku 3 buňky, ale v jiných třeba 7. Jindy zase musíme vytvořit buňku vysokou přes 2 a více řádků, atp. Z takovýchto důvodů existují v HTML 2 atributy COLSPAN a ROWSPAN. Pomocí prvního z nich nastavujeme šířku buňky ve sloupcích tabulky a pomocí druhého výšku buňky v řádcích tabulky. Standardně je buňka vysoká 1 řádek a široká 1 sloupec tabulky.

Tabulka s buňkou v prvním řádku širokou 3 sloupce, 3 buňkami ve druhém řádku, buňkou vysokou 2 řádky v řádku 3. a 4. a dalšími čtyřmi buňkami v řádcích 3 a 4:

<TABLE border="1">
 <TR>
  <TD colspan="3">Buňka přes 3 sloupce</TD>
 </TR>
 <TR>
  <TD>&nbsp;</TD>
  <TD>&nbsp;</TD>
  <TD>2.řádek, 3.buňka</TD>
 </TR>
 <TR>
  <TD>3.řádek, 1.buňka</TD>
  <TD rowspan="2">Buňka přes 2 řádky</TD>
  <TD>3.řádek, 3.buňka</TD>
 </TR>
 <TR>
  <TD>4.řádek, 1.buňka</TD>
  <TD>4.řádek, 3.buňka</TD>
 </TR>
</TABLE>

Výsledek zdrojového kódu:

Určitě jste si všimli, že 1. buňka ve druhém řádku je prázdná a není ohraničená a buňka vedle ní je také prázdná, ale je ohraničená. To je způsobeno přidáním tzv. tvrdé mezery - &nbsp; - do 2. buňky na 2.řádku (mezi tagy <TD>&nbsp;</TD>).