Zdeněk Civín

Vše důležité k tabulkám

Motto: "Dejmme věcem správný řád ! Co není ohraničeno jako by nebylo !"

1. 1. Základní tagy tabulek
2. 2. Vytvoření tabulky a její ohraničení
3. 3. Barevné ohraničení, řádek, buňka, pozadí tabulky
4. 4. Odsazení v tabulce
5. 5. Zarovnání tabulek vodorovně a svisle
6. 6. Odsazení mezi jednotlivými buňkami
7. 7. Zarovnání ve vodorovném směru
8. 8. Zarovnání ve svislém směru
9. 9. Nastavení šířky, výšky tabulky, řádku a buňky
10. 10. Nestandardní výška a šířka buňky
11. 11. Vnořování tabulek
12. 12. Složitější tabulky

• <TABLE>…</TABLE> - úvodní a ukončovací tag celé tabulky
• <TR>…</TR> - úvodní a ukončovací tag jednoho řádku tabulky
• <TD>…</TD> - úvodní a ukončovací tag jedné buňky tabulky

Přehled nejčastěji používaných atributů:

• 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

Vytvoření 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 našeho snažení s přidáním atributu align="center" dostaneme tabulku na střed. Změnou atributu border postupně změníme hodnoty na 0, 1 a 5:

1.řádek, 1.buňka	1.řádek, 2.buňka
2.řádek, 1.buňka	2.řádek, 2.buňka

1.řádek, 1.buňka	1.řádek, 2.buňka
2.řádek, 1.buňka	2.řádek, 2.buňka

1.řádek, 1.buňka	1.řádek, 2.buňka
2.řádek, 1.buňka	2.řádek, 2.buňka

<TABLE border="1" bordercolor="red">
 <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 s přidáním atributu <TABLE bgcolor="silver">:

1.řádek, 1.buňka	1.řádek, 2.buňka
2.řádek, 1.buňka	2.řádek, 2.buňka

Výsledek zdrojového kódu s přidáním atributu bordercolordark="navy" a do atributu <TD> přidáme bgcolor="yellow"

1.řádek, 1.buňka	1.řádek, 2.buňka
2.řádek, 1.buňka	2.řádek, 2.buňka

<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 s atributem CELLPADDING = 10:

1.řádek, 1.buňka	1.řádek, 2.buňka
2.řádek, 1.buňka	2.řádek, 2.buňka

Výsledek zdrojového kódu s atributem CELLSPACING = 8:

1.řádek, 1.buňka	1.řádek, 2.buňka
2.řádek, 1.buňka	2.řádek, 2.buňka

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 align ="right">NAPRAVO</TD>
 </TR>
 <TR>
  <TD>Tady se nachází taky text.</TD>
  <TD align="left">NALEVO</TD>
 </TR>
</TABLE>

Výsledek zdrojového kódu s využitím atributu ALIGN:

NA STŘED	NAPRAVO
Tady se nachází taky text.	NALEVO s nějakým textem

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

P>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. </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

P>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ů

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

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

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 k lepšímu pochopení pomůže 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

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>&nbsp;</TD>
  <TD bgcolor="black">&nbsp;</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