Kurz HTML – tvorba tabulek 1.
V minulých dílech o HTML jsem popisoval tvorbu jednoduchých prvků webových stránek jako jsou odkazy, umístňování obrázků, formátování textu apod. Nyní přikročíme k náročnějšímu tématu – tvorbě tabulek, které jsou nepostradatelné při tvorbě náročnějších webů.
Často se říká, že HTML je příliš jednoduché na skutečně dobře vypadající sazbu stránky. Je to pravda pouze v případě, že ve stránce nepoužíváte tabulky – pokud dobře znáte možnosti tvorby tabulek, můžete dosáhnout až překvapivých výsledků. Pomocí tabulek můžete text formátovat do sloupců, jak to znáte z papírových novin, můžete vytvářet tabulky podobné těm v Excelu a mnohem více.
Tři tagy pro tabulky
Pro tvorbu tabulek se používají tyto tři následující tagy:
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.
