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:

Buňka přes 3 sloupce

 

 

2.řádek, 3.buňka

3.řádek, 1.buňka

Buňka přes 2 řádky

3.řádek, 3.buňka

4.řádek, 1.buňka

4.řádek, 3.buňka

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


Získejte registraci domén s tld .online, .space, .store, .tech zdarma!
Stačí si k jedné z těchto domén vybrat hosting Plus nebo Mega a registraci domény od nás dostanete za 0 Kč!
Objednat