Kurz HTML – tvorba tabulek 1.

Tag TABLE určuje vlastnosti, které platí pro celou tabulku. Tag TR je určen pro definici řádku tabulky a tag TD určuje samotný obsah buňky. Jelikož tabulky jsou složitějším prvkem www stránkem, vysvětlíme si je především na praktických příkladech. Nejprve ale trochu teorie.

Tag <TABLE>

Jak už jsem napsal, tag TABLE určuje vlastnosti platné pro celou tabulku. Je tagem párovým a proto musí být uzavírán tagem </TABLE>. Tag <TABLE> vlastně celou tabulku začíná a </TABLE> ji naopak končí. Všechny ostatní tagy (jako třeba TR, TD) jsou umístněny mezi těmito dvěma tagy. Parametry tagu TABLE jsou následující:

CELLSPACING=“číslo“
určuje vzdálenost mezi buňkami na všech čtyřech stranách. Pokud není hodnota zadaná, implicitní hodnota je 2 pixely.

CELLPADDING=“číslo“
určuje vzdálenost v pixelech mezi obsahem buňky a jejím okrajem po všech čtyřech stránách. Pokud není hodnota zadána činí jeden pixel.

BGCOLOR=“barva“
určuje barvu pozadí tabulky. Pokud v tabulce současně uvedete tagy bgcolor (barva) a background (obrázek) přednost má bgcolor.

BORDERCOLOR=“barva“
určuje barvu orámování tabulky.

BORDERCOLORDARK=“barva“
definice barvy tmavšího stínu orámování tabulky. Parametr není příliš využíván.

BORDERCOLORLIGHT=“barva“
definice barvy svělejšího stínu orámování tabulky. Parametr není příliš využíván.

BACKGROUND=“obrazek.gif“
na pozadí tabulky může být definován obrázek, který se naskládá na celé ploše tabulky v prohlížeči. Musíte zadat cestu a název souboru.

WIDTH=“150/100%“
velikost tabulky. Hodnotu je možné zadávat v pixelech nebo v procentech. Pokud zadáme 100%, tabulka bude roztažena přes celou obrazovku.

ALIGN=“LEFT/RIGHT/CENTER“
zarovnání tabulky. LEFT – tabulka bude zarovnána nalevo, RIGHT – tabulka bude zarovnána napravo, CENTER – tabulka bude zarována na střed

VALIGN=“TOP/MIDDLE/BOTTOM/BASELINE“
vertikální zarovnání textu v políčkách tabulky. Pokud není definováno, je implicitně definováno na střed. Parametr není příliš využíván

BORDER=“2″
orámování tabulky. Barva orámování se mění tagy bordercolor, bordercolordark a bordercolorlight. Doporučuji parametr border pokaždé uvádět, protože není-li definován, jeho implicitní hodnota činí IE 0 pixelů a v NN 2 pixely.

COLS=“cislo“
číslo, které udává počet sloupců tabulky. Není nutné jej definovat.

RULES=“NONE/BASIC/COLS/ROWS/ALL
určuje zobrazení vnitřních rámečků. NONE odstraní všechny vnitřní, oddělující rámečky, BASIC zobrazí vodorovné linky, ROWS zobrazí linky mezi všemi řádky tabuky, COLS zobrazí linky mezi všemi sloupci tabulky a ALL zobrazí všechny linky v tabulce.

FRAME=“VOID/ABOVE/HSIDES/VSIDES/BELOW/RHS/LHS“
definuje zobrazení orámování tabulky. VOID odstraní všechny vnější rámečky, ABOVE zobrazí orámování nad horním okrajem tabulky, HSIDES zobrazí orámování nad a pod tabulkou, VSIDES zobrazí orámování vlevo a vpraco, BELOW zobrazí orámování dolního okraje tabulky, RHS zobrazí orámování na pravé straně tabulky a LHS zobrazí orámování na levé straně tabulky

Tag <TR>

Párovým tagem TR vytváříme v tabulce řádky tabulky. Parametry tagu TR jsou následující:

ALIGN
definuje vodorovné zarovnání textu ve všech buňkách celé řady. Pokud zarovnání neuvedete, použije se implicitní zarovnání doleva.

VALIGN
oproti přechozímu parametru je to definice svislého zarovnání textu ve všech buňkách celé řady

BORDERCOLOR=“barva“
definice barvy pozadí řádku

BORDERCOLOR=“barva“, BORDERCOLORDARK=“barva“,
BORDERCOLORLIGHT=“barva“
určuje barvy rámečků jednotlivých buněk v daném řádku.

Tag <TD>

Tagem TD vytváříme jednotlivé buňky tabulky. Je tagem párovým. Parametry tagu TD jsou následující:

WIDTH=“číslo“
Číslo v parametru WIDTH určuje šířku dané buňky. Hodnotu můžete zadávat v pixelech, např. WIDTH=“200″ nebo v procentech, např. WIDTH=“74%“. Zadaná šířka buňky pochopitelně platí pro celá sloupec.

HEIGHT=“číslo“
Číslo v parametru HEIGHT určuje výšku dané buňky. Hodnotu je možné zadávat v pixelech nebo v procentech. Zadaná velikost pak platí pro celý řádek.

COLSPAN=“číslo“
Velmi důležitý parametr, který umožňuje spojení jednotlivých buněk – odstraňuje tedy přepážky mezi nimi. Pokud není tento parametr přítomen, je implicitně nastavena hodnota jedna. Pokud je číslo vyšší, pak se buňka rozkládá přes více sloupců od aktuální buňky směrem doprava.

ROWSPAN=“číslo“
Rovněž velmi důležitý parametr, který umožňuje spojení jednotlivých řádků tabulky.

Význam parametrů ALIGN, VALIGN, BACKGROUND, BGCOLOR, BORDECOLOR, BORDECOLORDARK, BORDECOLORLIGHT si zde popisovat nebudeme – jejich význam je stejný jako u tabulky nebo řádku tabulky. Nesmíte zapomínat, že pokud například uvedete parametr BGCOLOR=“black“ u tabulky, celá tabulka bude mít černé pozadí. Pokud ovšem třeba do TD přidáte např. BGCOLOR=“white“, tato buňka bude mít bílé pozadí, a celá tabulka bude mít pozadí černé. Co je tedy uvedeno v definici TABLE, platí pro celou tabulku, co je uvedeno v definic TR, platí pro řádek tabulky, a konečně, co je uvedeno v definici TD, platí pro samotnou buňku.

Shrnutí

V tomto díle o tvorbě tabulek jsme si vysvětlili používané tagy a parametry. Tato oblast je ovšem mnohem komplikovanější a proto si v dalším dalším díle uvedeme spoustu praktických ukázek a tipů při tvorbě tabulek.