Webovß v²uka jazyka <HTML>

L e k c e Φ. 3 - Tabulky

StruΦn² popis sekce lekce Φ.1 a odkazy na adekvßtnφ strßnky tΘto sekce.

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

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.

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.

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:

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

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.

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:

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:

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:

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

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%:

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	Bu≥ka p°es 2 °ßdky	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	Bu≥ka p°es 2 °ßdky	4.°ßdek, 3.bu≥ka