Formátování tabulek

atribut tagu <td>	význam	možné hodnoty
align	horizontální zarovnání	left, center, right, justify (= do bloku)
valign	vertikální zarovnání	top, midle, bottom, baseline (účaří prvních řádků je zarovnáno)
width	minimální šířka buňky	počet pixelů, procento šíky tabulky
height	minimální výška řádku	počet pixelů
style	obecný atribut CSS, kterým se dá udělat všechno	jakýkoliv popis CSS stylu, ale většinou to nefunguje úplně přesně
nowrap	obsah buňky se nebude zalamovat	bez hodnoty (prostě se tam jenom napíše <td nowrap>)
background	obrázek na pozadí	URL obrázku, funguje v IE od verze 3 a v NN až od verze 4
bgcolor	barva pozadí	jakákoliv barva
bordercolor	barva rámečku
bordercolorlight	světlejší a tmavší vykreslovací barva rámečku, přehlušuje bgcolor
bordercolordark

<td width="33%" background="pozadi.gif"
nowrap bgcolor="teal" bordercolor="#FF00FF">

Formát celé tabulky

Globální vlastnosti tabulky už jsme nakousli, teď je zopakuji celé a přidám hodnoty, aby to bylo kompletní.

atribut tagu <table>	význam	možné hodnoty
align	obtékání tabulky ostatním textem, totéž co "align" u "img" (obrázků)	right -- tabulka bude vpravo a bude obtékána zleva left -- obtékání zprava center -- vystředění tabulky bez obtékání
cellpadding	vnitřní okraj buněk	počet pixelů
cellspacing	vnější okraj buněk	počet pixelů
border	šířka rámečku okolo tabulky	počet pixelů
width	šířka tabulky	počet pixelů nebo procent šířky stránky
background, bgcolor, bordercolor, bordercolorlight, bordercolordark	totéž, co u vlastností buněk

např. <table cellpadding="15" border="1" rules="rows" cellspacing="0" frame="void" align="left">

Šířky sloupců

Problematika šířky buněk a tabulek je překvapivě velmi složitá. Naštěstí existuje několik pravidel, podle kterých se stanovují šířky buněk a tabulek. Řadím podle priority.

Pravidlo šířky sloupce

To bylo vidět na předchozích příkladech (viz základy tabulek): sloupce se udělají tak široké, jaký je nejširší obsah buňky v tom kterém sloupci.

Pravidlo minimální šířky podle obsahu

Pravidlo nastavené šířky

Buňkám a tabulce se dají nadeklarovat šířky, které ale nemusejí v konečném efektu platit. Zadávání šířek popisuji níže.

Konfliktní pravidla

Ve většině případů prohlížeče před vykreslením tabulky vyhodnocují, který sloupce bude jak široký, podle složitých pravidel.

Přirozené šířky

Tabulku můžete prostě nechat, ať si stanoví šířky sloupců sama podle obsahu. Prostě nebudete zadávat žádné šířky (zadávání popisuji dále). U velmi dlouhých tabulek se to nehodí, ale většinou je přirozené (ne)zadávání šířek výhodou.

Zadávání šířek

Buňkám a tabulce se dá předepsat šířka a výška explicitně. Jde to několika způsoby:

Zadávání šířky v pixelech

Atribut width se dá použít u buňky (tag <td>) a u tabulky (tag <table>). Např:

<td width="100">

bude buňka tabulky o šířce 100 obrazovkových bodů. Nebo:

Zadávání šířky v procentech

<td width="20%">
je buňka, která by měla zabrat 20% šířky tabulky. Dvě poznámky: jednak píšu "měla by", protože se může dostat do konfliktu, o tom níže. Druhá poznámka je zdůraznění toho, že 100% je v tomto případě šířka tabulky.

Když napíšu:
<table width="90%"> ,
tak tabulka zabere 90% šířky okna (nebo prostě prostoru, do kterého by se mohla vykreslit). Pak je šířka tabulky prostě závislá na prohlížeči a rozlišení.

Výška

Podobným způsobem, atributem height, se dá nastavit výška buňky. Nebudu se tím zabývat, protože vertikálního místa má stránka dost (dá se rolovat), takže nevznikají konflikty. Jenom zmíním, že pokud se tabulce zadá výška v procentech, tak také počítá procenta z výšky okna.

Pozor na syntaxi: width a height mají ta písmenka t a h na konci přeházená. Mockrát jsem se s tím navztekal, když se mi to nechtělo zobrazovat správně.

Konflikt šířek

V ideálním případě spolu šířky nekolidují. To je když součet šířek buněk je rovný nastavené šířce tabulky, žádná buňka nemá extrémně široký obsah a okno je širší než tabulka. Tento ideální případ je velmi řídký.

V praxi nastává celá škála možných nerovností. Proberu jen ty nejčastější, všechny zmínit asi nedokážu.

Vždy se ale operuje se součtem šířek sloupců, který se v prohlížeči stanoví tak, že se prostě vezmou všechny buňky ve sloupci, najde se ta nejširší (ať už nejširší deklarací nebo obsahem) -- to je požadovaná šířka sloupce -- načež se to sečte ze všech sloupců.

Šířka tabulky > součet šířek sloupců

Snadnější případ. Tabulka se vykreslí v deklarované šířce. Rozdíl šířky, který vlastně nepatří žádnému sloupci, pak rozdělí rovnoměrně mezi sloupce. (Trochu změnu do toho vnášejí nové vlastnosti tabulek, kde se dá k tagu <col> nastavit šířka jako násobek, to teď není důležité).

Šířka tabulky < součet šířek sloupců

Tabulka se většinou vykreslí v požadované šířce. Prostor, který jí chybí, se snaží ubrat rovnoměrně jednotlivým sloupcům.

Některé sloupce ale nejdou zužovat pod určitou mez, protože mají široký obsah (dlouhé slovo nebo široký obrázek). Takové sloupce se smrsknou na tu minimální šířku, ale víc ne.

Pokud by se maximálně smrsknuly všechny sloupce, ale stále by byl součet minimalizovaných sloupců širší, než požadovaná šířka tabulky, vykreslí se tabulka širší.

Šířka tabulky versus šířka okna

Pokud je šířka tabulky stanovena zápisem v tagu <table>, nemá šířka okna na šířku tabulky vliv.

Pokud tabulka nemá předepsanou šířku, vykreslí se tak široká, jaký je součet šířek sloupců. Ovšem pouze v případě, že to není více než šířka okna. Pokud by okno bylo užší než součet šířky sloupců, zužují se sloupce rovnoměrně výše popsaným způsobem. Opět ale nejde jít pod minimální šířku, takže občas tabulka přesáhne okno.

Rozměry tabulky v praxi

Možná si říkáte, k čemu je dobré zadávat šířku buňky, když se nakonec stejně přizpůsobí. To je správný postřeh. Ale existují některé standardní metody, jak pracovat efektivně:

Příklad

Jak je vidět, mohu buňkám zadávat různé šířky, ale skutečná výsledná šířka buňky bude stejná, jako nejširší buňka ve sloupci. Na příkladě by měla být vidět i další věc: Pokud se obsah buňky nevejde na jednu řádku, prostě se zalomí. (To funguje pouze u buňky s nastavenou šířkou!)

A konečně atribut align="center" vystřeďuje obsah buňky a je jedním z mnoha dalších atributů, které se dají u buňky tabulky použít.