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">

Bu≥ka (td) se ╣φ°kou 33% (ze ╣φ°ky tabulky) s obrßzkem na pozadφ; pokud se obrßzek nenajde nebo bude pr∙hledn², bude pozadφ zelenomodrΘ (teal). Obsah se nebude zalamovat (nowrap -- to je rizikovΘ vzhledem k nastavenΘ ╣φ°ce v procentech), rßmeΦek bude mφt zßkladnφ barvu sv∞tle fialovou (#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

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

Tabulka mß nastaveny rßmeΦky o ╣φ°ce 1 pixel (border). Vn∞j╣φ rßmeΦek okolo tabulky by se nem∞l vykreslovat (frame=void). Tabulka bude zarovnßna doleva a ostatnφ text ji asi bude obtΘkat, pokud nebude moc ╣irokß; kdyby m∞la je╣t∞ nastavenou ╣φ°ku, obtΘkal by ji jist∞.

⌐φ°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, proto╛e ╣φ°ka v tabulce p°eb²vß. Tabulka se pak 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.

Existuje css vlastnost table-layout: fixed, kterß nerozm∞rovanΘ tabulce zakß╛e zu╛ovat se podle okna. Je podporovßna pouze Internet Explorerem 5. Zßpis je

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!)