Tabulky
Tabulky byly asi nejustálenější částí návrhu jazyka HTML verze 3.0 a proto
byl také návrh standardu pro zápis tabulek publikován v květnu 1996 jako
první nový rys jazyka ve formě RFC 1942.
Od původního návrhu
zápisu tabulek v jazyce HTML+ až po poslední samostatný návrh bylo poměrně
hodně změn. Většina prohlížečů proto sice tabulky zvládá, ale mají problémy
s některými novějšími atributy.
Tabulka je zapisována po řádcích a řádky po buňkách. Obsahem buňky může
být cokoli, je v ní povoleno vše, co je povoleno v těle dokumentu. Některé
prohlížeče však nezvládají například formuláře v tabulce. Definici tabulky si
ukážeme nejprve na příkladu:
<TABLE BORDER="1">
<TR><TH>Nadpis 1. sloupce<TH>Nadpis 2. sloupce</TR>
<TR><TD>data 1. sloupce<TD>data 2. sloupce</TR>
</TABLE>
Tabulka
je vymezena párovou značkou <TABLE>. Atribut BORDER definuje tloušťku
obrysu a mřížky. Pokud není tento atribut uveden, nemá tabulka obrysy, ani
mřížku. Řádek tabulky je vymezen párovou značkou <TR> (Table Row). Značka
<TH> (Table Header) vymezuje buňku obsahující nadpis a <TD> (Table
Data) buňku obsahující data. Počet buněk v řádku je dán počtem značek
<TH> nebo <TD>. Zobrazená tabulka bude mít tvar:
| Nadpis 1. sloupce | Nadpis 2. sloupce |
|---|
| data 1. sloupce | data 2. sloupce |
Buňky tabulky nemusí zabírat jen jedno pole mřížky. Atributy COLSPAN a
ROWSPAN mohou být popsány sloučené buňky. Hodnotou těchto atributů je počet
sloupců nebo řádků, kolik celkem zabírá popisovaná buňka. Atribut COLSPAN
vlastně prodlužuje buňku doprava a atribut ROWSPAN dolů. Při popisu je třeba
dát pozor na to, aby se sloučené buňky z různých řádků a sloupců
nepřekrývaly. V následujícím příkladu jsou sloučeny buňky na druhém řádku
z předchozí tabulky:
<TABLE BORDER="1">
<TR><TH>Nadpis 1. sloupce<TH>Nadpis 2. sloupce</TR>
<TR><TD COLSPAN=2>sloučené buňky</TR>
</TABLE>
| Nadpis 1. sloupce | Nadpis 2. sloupce |
|---|
| sloučené buňky |
Řádky tabulky mohou mít přiřazeny význam uvedením značek <THEAD>
(hlavička), <TBODY> (tělo) a <TFOOT> (patička). Význam řádků je pak
použit jednak při zobrazení horizontálních čar mřížky, jednak při tisku
dlouhých tabulek na více stránek. Pokud překročí tabulka při tisku hranici
stránky, opakují se hlavičkové a patičkové řádky ve všech částech
rozdělené tabulky. Patička tabulky musí být zapsána před tělem tabulky, hned za
hlavičkou. Je to ale poněkud nešťastné řešení, protože prohlížeče, které značce
<TFOOT> nerozumí, zobrazí patičkový řádek na začátku tabulky. Značkou
<TBODY> je zahájena nová skupina řádků, která tvoří jeden celek pro
horizontální oddělení jednotlivých částí tabulky. Počet skupin řádků
v tabulce není omezen. K tabulce může být doplněn titulek také
titulek značkou <CAPTION>.
<TABLE BORDER="1">
<CAPTION>
Titulek tabulky
<THEAD>
<TR><TH>Nadpis 1. sloupce<TH>Nadpis 2. sloupce
<TFOOT>
<TR><TD COLSPAN=2><i>patička tabulky</i>
<TBODY>
<TR><TD>1. sloupec<TD>2. sloupec
<TR><TD COLSPAN=2>sloučené buňky
</TABLE>
Značky
<THEAD>, <TBODY> a <TFOOT> jsou poměrně nové a zatím jim
běžné prohlížeče nerozumí. Značka <CAPTION> většinou implementována je.
Pokud prohlížeč nerozeznává tyto značky, může zobrazit následující tabulku
prázdnou, případně může zobrazit patičku na začátku tabulky místo na konci.
Titulek tabulky
| Nadpis 1. sloupce | Nadpis 2. sloupce
|
|---|
| patička tabulky
|
| 1. sloupec | 2. sloupec
|
| sloučené buňky
|
Pokud není uveden v hlavičce tabulky atribut BORDER, je tabulka
zobrazena bez obrysů a mřížky. Takovéto tabulky mohou sloužit pro obecné
zarovnání a rozložení textu, formulářů, obrázků, či dokonce zanořených tabulek.
Příklady formulářů uvedené v popisu jazyka HTML verze 2.0 můžeme upravit
s použitím tabulky a dosáhnout tak lepšího rozložení vstupních polí:
<FORM ACTION="http://www/htbin/form" METHOD=GET>
<INPUT TYPE=HIDDEN NAME=Typ VALUE="Objednávka hamburgerů">
<TABLE>
<TR><TD>
Adresa:<TD><INPUT TYPE=TEXT NAME=Adresa SIZE=20>
<TR><TD>
Hranolky:<TD><INPUT TYPE=CHECKBOX NAME=Hranolky VALUE=ano>
<TR><TD>
Hamburger:<TD><INPUT TYPE=RADIO NAME=Hamburger VALUE=maly>malý
<INPUT TYPE=RADIO NAME=Hamburger VALUE=velky CHECKED>velký
</TABLE>
Stiskni zde pro odeslání: <INPUT TYPE=SUBMIT>
</FORM>
Rozměry tabulky jsou implicitně zvoleny podle velikosti buněk. To ale
znamená, že tabulka může být zobrazena teprve po přenosu celého bloku dokumentu
popisujícího tabulku. Pokud je tabulka velká, nemůže prohlížeč zobrazovat
tabulku inkrementálně při přenosu, ale musí počkat na přenos celé tabulky.
Proto byly doplněny značky a atributy, umožňující jednak zadat šířku tabulky,
jednak explicitně nastavit šířku sloupců. Šířka tabulky může být zadána
atributem WIDTH značky <TABLE>. Jednotka, ve které je velikost zadávána,
je odvozena z přípony za číslem. Přípona pt znamená body
(typografická jednotka), pi jednotky pica, in palce, cm
centimetry, mm milimetry, em šířka písmena M a px body na
obrazovce. Tyto přípony jsou povoleny ve všech dalších atributech rozměrů.
Některé rozměry mohou být navíc zadány relativní hodnotou v procentech
(přípona %) nebo relativní hodnotou vzhledem k ostatním (přípona *). Pokud
není uvedena žádná přípona, je rozměr zadán v bodech na obrazovce. Pro
inkrementální zobrazení tabulky musí být zadán atribut COLS, který určuje počet
sloupců v tabulce:
<TABLE COLS=2 WIDTH="70%" BORDER="2pt">
<TR><TH>Nadpis 1<TH>Nadpis 2
<TR><TD>1. sloupec<TD>2. sloupec
</TABLE>
Tabulka bude mít dva sloupce, šířku 70 % šířky okna prohlížeče a obrysy o
tloušťce 2 body. Pokud je uveden atribut COLS a není uvedena šířka,
použije se pro inkrementální zobrazení šířka 100 %.
| Nadpis 1 | Nadpis 2
|
|---|
| 1. sloupec | 2. sloupec
|
Šířka sloupců může být také zadána explicitně.
Pokud má mít tabulka vertikální mřížku mezi všemi sloupci, pak postačí
definovat sloupce značkami <COL>. Pokud je třeba rozdělit tabulku na
skupiny sloupců a zobrazit vertikální mřížku pouze mezi skupinami sloupců, pak
je třeba použít značku <COLGROUP>. Značka <COLGROUP> navíc dovoluje
zadat společné vlastnosti platné pro skupinu sloupců:
<TABLE COLS=6 BORDER="2pt">
<COLGROUP>
<COL WIDTH="1*">
<COL WIDTH="2*">
<COLGROUP SPAN="2" WIDTH="0.5*">
<COL SPAN="2" WIDTH="2*">
<TR><TH>1<TH>2<TH>3<TH>4<TH>5<TH>6
</TABLE>
Tato
tabulka obsahuje 6 sloupců ve 4 skupinách. První skupina obsahuje dva sloupce o
relativní šířce 1 a 2. Druhá skupina obsahuje dva sloupce o relativní šířce
0,5. Počet sloupců ve skupině je zadán přímo atributem SPAN. Pokud je použit
tento atribut, nesmí už daná skupina obsahovat definici sloupců značkami
<COL>. Poslední dvě skupiny jsou tvořeny dvěma samostatnými sloupci
(SPAN=2) o relativní šířce 2. Značky <COLS> a <COLGROUP> jsou opět
novými značkami a stávající prohlížeče jim nerozumí (následující tabulku
pak zobrazí se stejně širokými sloupci).
Seskupení řádků a sloupců do skupin je důležité pro zobrazení mřížky.
Způsob zobrazení obrysů a mřížky tabulky lze volit atributy FRAME a RULES
značky <TABLE>. Atribut FRAME pro nastavení obrysu má hodnoty ABOVE
(horní linka), BELOW (dolní linka), HSIDES (nahoře a dole), LHS (levý obrys),
RHS (pravý obrys), VSIDES (vlevo a vpravo), BOX a BORDER (všechny strany).
Atribut RULES pro nastavení mřížky má hodnoty GROUPS - horizontální čáry mezi
skupinami řádků THEAD, TBODY a TFOOT a vertikální čáry mezi skupinami sloupců
COLGROUP, ROWS - horizontální čáry mezi všemi řádky a vertikální mezi
skupinami, COLS - horizontální čáry mezi skupinami a vertikální čáry mezi všemi
sloupci a ALL - úplná mřížka. V následujícím příkladu je uveden zápis
tabulky se skupinami řádků a sloupců a se zobrazením mřížky pouze mezi těmito
skupinami:
<TABLE COLS=4 RULES=GROUPS BORDER="2pt">
<COLGROUP>
<COL SPAN=2>
<COLGROUP>
<COL>
<THEAD>
<TR><TH>Nadpis 1. sloupce<TH>Nadpis 2. sloupce<TH>Nadpis 3. sloupce
<TBODY>
<TR><TD>1. sloupec <TD>2. sloupec <TD>3. sloupec
<TR><TD>1. sloupec <TD>2. sloupec <TD>3. sloupec
<TBODY>
<TR><TD>1. sloupec <TD>2. sloupec <TD>3. sloupec
</TR>
</TABLE>
Pokud
je zadána tloušťka čar atributem BORDER a není uveden atribut FRAME a RULES,
pak je implicitně vykreslena úplná mřížka a všechny obrysy. Značkám
<COL>, <COLGROUP> a atributům FRAME a RULES zatím dostupné
prohlížeče nerozumí (s výjimkou Internet Exploreru 3.0) a zobrazí tabulku s plnou mřížkou
| Nadpis 1. sloupce | Nadpis 2. sloupce | Nadpis 3. sloupce
|
|---|
| 1. sloupec | 2. sloupec | 3. sloupec
|
| 1. sloupec | 2. sloupec | 3. sloupec
|
| 1. sloupec | 2. sloupec | 3. sloupec
|
Značky <COLGROUP>, <COL>, <THEAD>, <TBODY>,
<TFOOT>, <TR>, <TH> a <TD> mohou obsahovat atributy
vertikálního a horizontálního zarovnání (ALIGN a VALIGN). Atribut uvedený pro
buňku má přednost před atributem uvedeným pro řádek nebo sloupec. Atribut ALIGN
pro horizontální zarovnání textu v buňce může mít hodnotu LEFT (vlevo),
CENTER (na střed), RIGHT (vpravo), JUSTIFY (do bloku) a CHAR (na znak zadaný
atributem CHAR). Poslední typ zarovnání se hodí pro zarovnání číselných údajů
na desetinnou čárku. Implicitní znak zarovnání je proto desetinná čárka. Pro
atribut zarovnání na znak lze dále doplnit ofset znaku od levého okraje buňky
atributem CHAROFF. Hlavičkové buňky mají text implicitně zarovnán na střed,
zatímco datové buňky vlevo.
Vertikální zarovnání může mít hodnotu TOP (nahoru), MIDDLE (doprostřed), BOTTOM
(dolů) a BASELINE. Poslední typ znamená zarovnání prvních řádků textu všech
buněk s tímto atributem v daném řádku tabulky na linku textu.
Doporučené implicitní horizontální zarovnání je MIDDLE.
Jednotlivé buňky tabulky mohou mít uveden atribut NOWRAP, který zabraňuje
dělení textu buňky na více řádků. Tento atribut je třeba používat opatrně,
protože zvětšuje šířku tabulky a tabulka pak může být příliš veliká.
Následující příklad demonstruje definici tabulky s 5 sloupci zarovnanými
na střed:
<TABLE COLS=5 BORDER="2pt">
<COL SPAN="5" ALIGN="CENTER">
...
Atribut
SPAN může mít v tomto případě speciální hodnotu 0, která znamená všechny
sloupce v tabulce. Při zadávání atributu ALIGN je třeba dát pozor na to,
že nesmí být ve významu zarovnání textu v buňkách zadán ve značce
<TABLE>. Tato značka má sice také atribut ALIGN, ale znamená zarovnání
celé tabulky jako celku.
Poslední dva atributy, které si uvedeme, lze použít pouze ve značce
<TABLE>. Jsou to atributy CELLSPACING a CELLPADDING. Atribut CELLSPACING
definuje mezeru mezi okrajem tabulky a mezi jednotlivými buňkami navzájem.
Pokud je zobrazena mřížka, pak je tato mezera lemována obrysy mřížky. Atribut
CELLPADDING definuje mezeru mezi okrajem buňky a textem uvnitř buňky. Použití
těchto atributů je uvedeno v následujícím příkladu:
<TABLE CELLSPACING=10 CELLPADDING=10 BORDER="1">
<TR><TH>Nadpis 1. sloupce<TH>Nadpis 2. sloupce</TR>
<TR><TD COLSPAN=2>sloučené buňky</TR>
</TABLE>
| Nadpis 1. sloupce | Nadpis 2. sloupce |
|---|
| sloučené buňky |
Poslední změna:
Pokud máte námět na vylepšení této stránky nebo na ní naleznete chybu,
zašlete dopis na adresu
lampa@fit.vutbr.cz.