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

4. Barevné ohraničení tabulky

Atribut, kterým nastavujeme barvu ohraničení tabulky se jmenuje BORDERCOLOR. Jeho hodnotou může být, buď přímo název barvy (např. red, darkblue, atd.), anebo RGB zápis barvy (např. #FFFFFF - bílá, #000000 - černá, atd.).

Jeho použití v praxi si ukážeme mírnou obměnou předcházejícího zdrojového kódu. Více zde.

<TABLE border="1" bordercolor="lightblue">
 <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:

1.řádek, 1.buňka

1.řádek, 2.buňka

2.řádek, 1.buňka

2.řádek, 2.buňka

Atribut BORDERCOLOR nastaví jednotnou barvu ohraničení, tzn. že tabulka nebude vystínovaná (bude celá modrá).

Aby bylo možné dosáhnout výše zmíněného prostorového efektu tabulky existují v HTML atributy BORDERCOLORLIGHT a BORDERCOLORDARK. Atributem BORDERCOLORLIGHT nastavujeme barvu světlejší části a naopak pomocí atributu BORDERCOLORDARK barvu části tmavší. V našem příkladu jsme nastavily světlejší části světle modrou a tmavší tmavě modrou barvu.

<TABLE border="1" bordercolorlight="lightblue" bordercolordark="navy">
 <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>

Tabulka se světle a tmavomodrým ohraničením o velikost 1 pixel

1.řádek, 1.buňka

1.řádek, 2.buňka

2.řádek, 1.buňka

2.řádek, 2.buňka

Tabulka se světle a tmavomodrým ohraničením o velikost 5 pixelů

1.řádek, 1.buňka

1.řádek, 2.buňka

2.řádek, 1.buňka

2.řádek, 2.buňka