L e k c e č. 3 - Tabulky
Stručný popis sekce lekce č.1 a odkazy na adekvátní stránky této sekce.
- Co jsou a k čemu složí tabulky
- Základní tabulka
- Ohraničení tabulky
- Barevné ohraničení tabulky
- Pozadí tabulky, řádku a buňky
- Odsazení obsahu buňky od jejího ohraničení
- Odsazení mezi jednotlivými buňkami
- Zarovnání ve vodorovném směru
- Zarovnání ve svislém směru
- Nastavení šířky a výšky tabulky, řádku a buňky
- Nestandardní výška a šířka buňky
- Vnořování tabulek
- Složitější tabulky
1. Co jsou a k čemu slouží tabulky
Všechno co jsme se doposud naučili nám zatím neumožňuje přesně rozmístit jednotlivé prvky na stránce a tím dosáhnout přehledného uspořádání a také přehledně seřadit textové nebo číselné údaje do sloupců. Aby toto bylo možné existují v jazyce HTML tabulky - což je jeden z jeho nejužitečnějších, ale zároveň i nejsložitějších nástrojů.
Stručný přehled všech tagů této lekce:
- <TABLE>…</TABLE> - úvodní a ukončovací tagy celé tabulky
- <TR>…</TR> - úvodní a ukončovací tagy jednoho řádku tabulky
- <TD>…</TD> - úvodní a ukončovací tagy jedné buňky tabulky
Stručný přehled všech atributů této lekce:
- BORDER - nastavuje šířku ohraničení tabulky (v pixelech)
- BORDERCOLOR - nastavuje barvu ohraničení tabulky
- BGCOLOR - nastavuje barvu pozadí tabulky, řádku a buňky
- BACKGROUND - nastavuje obrázek na pozadí tabulky, řádku a buňky
- CELLPADDING - nastavuje velikost odsazení obsahu buňky od jejího ohraničení
- CELLSPACING - nastavuje velikost rozestupu mezi jednotlivými buňkami
- ALIGN - nastavuje horizontální zarovnání obsahu buňky a tabulky
- VALIGN - nastavuje vertikální zarovnání obsahu buňky
- HEIGHT - nastavuje výšku tabulky, řádku a buňky
- WIDTH - nastavuje šířku tabulky, řádku a buňky
- COLSPAN - nastavuje šířku buňky ve sloupcích tabulky
- ROWSPAN - nastavuje výšku buňky v řádcích tabulky
2. Základní tabulky
<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:
1.řádek, 1.buňka | 1.řádek, 2.buňka | 2.řádek, 1.buňka | 2.řádek, 2.buňka |
|
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 a my ho doporučujeme.
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:
Tabulka s ohraničením 20px:
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.
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.
<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>
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 |
Tabulka se světle a tmavomodrým ohraničením o velikost 1 pixel
Tabulka se světle a tmavomodrým ohraničením o velikost 20 pixelů
|
5. Pozadí tabulky, řádku a buňky
Chceme-li změnit barvu pozadí celé tabulky (řádku, nebo jenom buňky) provedeme to pomocí atributu BGCOLOR. Tomu jako hodnotu přiřadíme buď název barvy, anebo její RGB zápis.
Tabulka se stříbrným pozadím:
<TABLE border="1" bgcolor="silver"> <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 |
|
<TABLE border="1"> <TR> <TD bgcolor="silver">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 |
|
Pokud chceme umístit na pozadí tabulky, řádku nebo jenom buňky nějaký obrázek potom musíme použít atribut BACKGROUND. Tomu jako hodnotu přiřadíme URL cestu (absolutní, nebo relativní) k onomu obrázku.
<TABLE border="1" background="../obrazky/pozadi.jpg"> <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 |
|
6. Odsazení obsahu buňky od jejího ohraničení
Někdy potřebujeme, aby byl obsah buněk odsazen od ohraničení trochu více (méně), než je tomu u základního nastavení. K tomu slouží atribut CELLPADDING, kterému přiřazujeme hodnotu velikosti odsazení (opět v pixelech).
Tabulka s odsazením obsahu od ohraničení o 10:
<TABLE border="1" cellpadding="10"> <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 |
|
7. Odsazení obsahu buňky od jejího ohraničení
Občas zase musíme jednotlivé buňky od sebe vzdálit více (méně), než je tomu u základního nastavení. Proto existuje atribut CELLSPACING. Ten také nabývá číselných hodnot a je udáván v pixelech.
Tabulka s odsazením jednotlivých buněk o 8px:
<TABLE border="1" cellspacing="8"> <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 |
|
=> Samozřejmě můžeme tyto atributy vzájemně kombinovat a odsazovat tak obsah od ohraničení a zároveň jednotlivé buňky od sebe.
Tabulka s odsazením buněk o 8px a obsahu od ohraničení o 10px:
<TABLE border="1" cellspacing="8" cellpadding="10"> <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 |
|
8. Zarovnání ve vodorovném směru
Potřebujeme-li zarovnat nějaký obsah, nebo i celou tabulku určitým způsobem, používáme k tomu atribut ALIGN. Tento může mít 3 hodnoty: left - zarovnání obsahu (tabulky) doleva; center - zarovnání na střed; a right - zarovnání doprava. Standardně je vše zarovnáváno doleva.
Tabulka zarovnaná napravo s dalšími zarovnáními obsahu některých buněk:
<TABLE border="1" align="right"> <TR> <TD align="center">NA STŘED</TD> <TD>Tady se nachází nějaký text.</TD>
</TR> <TR> <TD>Tady se nachází taky text.</TD> <TD align="left">NALEVO</TD> </TR> </TABLE>
Výsledek zdrojového kódu:
NA STŘED | Tady se nachází nějaký text. | Tady se nachází taky text. | NALEVO |
|
9. Zarovnání ve svislém směru
Chceme-li zarovnat obsah buňky ve svislé poloze, musíme použít atribut VALIGN. Jeho hodnoty mohou být top - zarovnání nahoru; middle - zarovnání na střed; a bottom - zarovnání dolů.
Tabulka se zarovnáním obsahu některých buněk ve svislém směru:
<TABLE border="1"> <TR height="300"> <TD valign="middle">NA STŘED</TD> <TD valign="top">
<TABLE border="1" height="20"> <TR> <TD>TABULKA - zarovnaná nahoru</TD> </TR> <TR> <TD>TABULKA - zarovnaná nahoru</TD> </TR> </TABLE>
</TD> </TR>
<TR height="50"> <TD>Nezarovnanené</TD> <TD valign="bottom">DOLů</TD> </TR> </TABLE>
Výsledek zdrojového kódu:
NA STŘED | TABULKA - zarovnaná nahoru | TABULKA - zarovnaná nahoru |
| Nezarovnanené | DOLů |
|
=> V tomto zdrojovém kódu jsme byli nuceni použít i atributy a vnořování tabulek, abychom Vám mohli přesně vysvětlit zarovnávání ve svislém směru. Všechny tyto postupy jsou vysvětleny níže.
10. Nastavení šířky a výšky tabulky, řádku a buňky
Jazyk HTML obsahuje 2 atributy pro nastavování šířky - atribut WIDTH - a výšky - atribut HEIGHT. Hodnoty těchto atributů můžeme udávat v pixelech anebo v procentech velikosti okna browseru.
Tabulka široká 70% a vysoká 200 pixelů s jedním řádkem vysokým 70 pixelů, druhým 130 pixelů a s buňkami širokými 80% a 20%:
<TABLE border="1" width="70%" height="200"> <TR> <TD width="80%" height="70">1.řádek, 1.buňka</TD> <TD width="20%" height="130">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 |
|
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> </TD> <TD> </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 - - do 2. buňky na 2.řádku (mezi tagy <TD> </TD>).
12. Vnořování tabulek
Pokud chcete vytvářet složitější stránky, bude se Vám jistě hodit vnořování tabulek do sebe navzájem. Toto je velmi jednoduché. Do buněk prostě vkládáme další tabulky. Snad Vám to pomůže pochopit náš příklad.
Tabulka se dvěmi vnořenými tabulkami:
<TABLE border="1"> <TR> <TD>
<TABLE border="1"> <TR> <TD>1. buňka, 1. řádek 1. vnořené tabulky</TD> </TR> <TR> <TD>1. buňka, 2. řádek 1. vnořené tabulky</TD> </TR> </TABLE>
</TD> <TD>1.řádek, 2.buňka</TD> </TR> <TR> <TD>2.řádek, 1.buňka</TD> <TD>
<TABLE border="1"> <TR> <TD>1. buňka, 1. řádek 2. vnořené tabulky</TD> </TR> <TR> <TD>1. buňka, 2. řádek 2. vnořené tabulky</TD> </TR> </TABLE>
</TD> </TR> </TABLE>
Výsledek zdrojového kódu:
1. buňka, 1. řádek 1. vnořené tabulky | 1. buňka, 2. řádek 1. vnořené tabulky |
| 1.řádek, 2.buňka | 2.řádek, 1.buňka | 1. buňka, 1. řádek 2. vnořené tabulky | 1. buňka, 2. řádek 2. vnořené tabulky |
|
|
13. Složitější tabulky
Samozřejmostí je, že můžeme všechny atributy používat současně a vytvářet tak složité tabulky.
Tabulka s použitím všech atributů:
<TABLE border="5" bordercolorlight="lightblue" bordercolordark="navy" width="70%" height="400" align="center" cellpadding="7" cellspacing="5"> <TR> <TD background="../grafika/tab2.gif" colspan="3" align="right" valign="top">Buňka přes 3 sloupce</TD> </TR> <TR height="10%"> <TD> </TD> <TD bgcolor="black"> </TD> <TD align="center">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 valign="bottom">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 |
|
|