Design pomocφ tabulek

Mnoho profesionßl∙ v oblasti webdesignu si bez tabulek neumφ p°edstavit nßvrh hezk²ch strßnek. Ale takovΘ zkrß╣lenφ s sebou p°inß╣φ jistou nefunkΦnost, proto╛e se to pomalu zobrazuje. Pominu-li tuto nep°φjemnost, dß se s tabulkami rozumn∞ kouzlit.

Z·╛enφ obsahu

Mnoha Φtenß°∙m vadφ, kdy╛ jsou moc ╣irokΘ strßnky. ⌐patn∞ se to Φte, proto╛e se pletou °ßdky. Mimochodem prßv∞ to je d∙vod, proΦ se v novinßch pou╛φvß sloupcovß sazba.

Nejjednodu╣╣φ zp∙sob, jak text z·╛it, je uzav°φt ho do tabulky, kterß mß jen jedinou bu≥ku. Tabulce se p°edepφ╣e ╣φ°ka (atributem width="╣φ°ka v pixelech" u <table> nebo <td>). Potom se bude text zobrazovat ve sloupeΦku uvedenΘ ╣φ°ky.

B∞╛n∞ se pou╛φvajφ ╣φ°ky od 400 do 700 obrazovkov²ch bod∙ (pixel∙). ⌐φ°ka nad 800 je hloupost, proto╛e 800 je ╣φ°ka nejΦast∞ji pou╛φvanΘho zobrazenφ.

ProblΘm ╣φ°ky + vychytßvka

Pokud mß u╛ivatel men╣φ rozli╣enφ nebo malΘ okno, musφ si s textem v ╣irokΘ tabulce p°i Φtenφ posunovat doprava doleva. Asi to znßte a dßte mi za pravdu, ╛e to je na p∞st. Na╣t∞stφ existuje °e╣enφ. SpoΦφvß v tom, ╛e tabulce se ╣φ°ka nezadß, ale bu≥ce s textem ano:

Tento p°φklad si m∙╛ete zobrazit v prohlφ╛eΦi. Je v n∞m sloupeΦek textu, kter² mß ╣φ°ku 500 pixel∙, pokud je v ╣ir╣φm okn∞. Pokud by byl v okn∞ u╛╣φm ne╛ 500 pixel∙, z·╛φ se.

Pokud pou╛φvßte n∞jak² wysiwyg editor, musφte si dßvat bacha, aby vßm nevlo╛il ╣φ°ku i do tagu <table>.

Design jako rßm

Proto╛e rßmy (frames) s sebou p°inß╣ejφ °adu nev²hod, je n∞kdy vhodnΘ mφsto nich pou╛φvat tabulku, kterß vypadß jakoby sestavenß z rßm∙. Myslφm, ╛e je to jasnΘ: tabulka obsahuje dv∞ bu≥ky, p°iΦem╛ ta levß (s pevnou ╣φ°kou) obsahuje n∞jakΘ odkazy a ta pravß vlastnφ text strßnky.

Hlavnφ efekt spoΦφvß v pou╛itΘm obrßzkovΘm nebo barevnΘm pozadφ. Jsou dv∞ mo╛nosti:

Je╣t∞ musφm zmφnit, ╛e bu≥ky takovΘ "rßmovΘ" tabulky musejφ mφt nastaveno vertikßlnφ zarovnßnφ (valign) nahoru (top).

Sloupcovß ·prava

Mnoho dne╣nφch zpravodajsk²ch server∙ mß na strßnce jedinou tabulku. Ta obsahuje v prost°ednφm sloupci obsah, v levΘm odkazy a v pravΘm takΘ odkazy.

Slo╛it∞j╣φ p°φklad

N∞kdy strßnka nemß prav² sloupec nebo patiΦku, ΦastΘ variace se t²kajφ roh∙ strßnek.. Zjednodu╣en∞ vypadß v HTML tabulkovß ·prava sloupc∙ takto:

V╣imn∞te si zadan²ch ╣φ°ek. Tabulka je ╣irokß 760 pixel∙, co╛ se ka╛dΘmu vejde do okna i s rolovacφ li╣tou. Samoz°ejm∞ se tam musφ dopsat spousta formßtovacφch parametr∙; zejmΘna se jednß o vertikßlnφ zarovnßnφ a barvu pozadφ.

OdboΦka: Popisky obrßzk∙

Nemyslφm tφm atribut alt, kter² se zobrazuje v bublin∞, kdy╛ se obrßzek p°ejφ╛dφ my╣φ, ale prost² text, kter² je umφst∞n p°esn∞ nad nebo pod obrßzkem. Zarovnat ten text p°esn∞ nenφ sranda. Pokud mßte takov²ch obrßzk∙ s popisky na strßnce vφc, neobejdete se bez tabulek. (Proto o tom pφ╣u zde.)

CelΘ je to samoz°ejm∞ docela jednoduchΘ. Ka╛d² obrßzek se umφstφ do jednobun∞ΦnΘ tabulky, jejφ╛ bu≥ka se zarovnß na st°ed a pod obrßzek se napφ╣e text:

Pokud nezadßte width a height, celΘ se to i s tabulkou zobrazφ a╛ po tΘ, co se fotka naΦte ze serveru. Kdy╛ to zadßte, prohlφ╛eΦ si na to vyhradφ mφsto. Tak╛e jednoznaΦn∞ doporuΦuji zadßvat (mnoho editor∙ to d∞lß automaticky).

Vno°enΘ tabulky

Do bu≥ky tabulky m∙╛ete vlo╛it cokoliv, tak╛e i t°eba dal╣φ tabulku. Sami urΦit∞ p°ijdete na to, kdy se to hodφ, v∞t╣inou je to pot°eba u komplikovan²ch layout∙. Jß osobn∞ nemßm zano°ovanΘ tabulky moc rßd, proto╛e je to nep°ehlednΘ a pekeln∞ to zat∞╛uje klienta. P°φznivci tΘto technologie rßdi pracujφ ve FrontPagi, kter² se tvß°φ, ╛e s vno°en²mi tabulkami pracuje levou zadnφ, co╛ je sice pravda, ale autor v∞t╣inou nevφ, ve kterΘ tabulce zrovna co deklaruje. ZaΦßteΦnφci jsou navφc uchvßceni takovou tu╛tiΦkou, kterß tabulky kreslφ, ale p°inß╣φ to jenom komplikace. Jednou jsem opravoval takovΘ zv∞rstvo z FrontPage, kde byl na jednom mφst∞ text uvnit° p∞ti vno°en²ch tabulek. Nenφ asi t°eba zd∙raz≥ovat, ╛e je to lajdßctvφ. Neznßm d∙vod, proΦ zano°ovat vφce jak dv∞ tabulky.

P°i tvorb∞ dynamick²ch strßnek (PHP, ASP - tomuto tΘmatu jsem se dosud vyh²bal) je n∞kdy pot°eba, aby se obsah nenaΦφtal po °ßdcφch, ale po sloupcφch. JedinΘ rozumnΘ °e╣enφ jsou prßv∞ vno°enΘ tabulky, v tomto p°φpad∞ je to na mφst∞.

Rychlost zobrazovßnφ

Prohlφ╛eΦe zobrazφ tabulku a╛ po tΘ, co dorazφ na klienta celß. Neumφ to vykreslovat po bu≥kßch.

ProΦ to tak je: prohlφ╛eΦ se bojφ, ╛e v tabulce najde n∞co stra╣n∞ ╣irokΘho, kv∙li Φemu╛ by musel m∞nit ╣φ°ku sloupc∙. Tak╛e rad∞ji zobrazφ tabulku a╛ po tΘ, co se ujistφ, ╛e na╣el nej╣ir╣φ objekty.

Z toho vypl²vß, ╛e si nelze dovolit zavφrat do tabulek texty, kterΘ se naΦφtajφ dΘle ne╛ asi dv∞ sekundy. Jestli╛e to chßpete tak, ╛e kv∙li tomu vlastn∞ nelze pou╛φt v²╣e uvedenΘ postupy, mßte ·plnou pravdu. Na╣t∞stφ existujφ n∞kterß ΦßsteΦnß °e╣enφ a ani rychlost zobrazenφ nenφ ╛ßdnß modla, ╛e by se jφ muselo p°izp∙sobit ·pln∞ v╣echno.

╚ßsteΦnß °e╣enφ

Rozli╣ovat projekty

Pokud stavφte pro n∞jakou firmu komerΦnφ prezentaci, tak tam ty tabulky klidn∞ m∙╛ete pou╛φt, proto╛e

Rozm∞rovat obrßzky

U obrßzk∙ v tabulkßch je uvedenφ rozm∞r∙ naprostou nutnostφ. Kdy╛ se toti╛ rozm∞ry neuvedou, musφ prohlφ╛eΦ naΦφst cel² obrßzek (co╛ m∙╛e trvat dlouho), zatφmco se v∙bec nic z tΘ tabulky nezobrazuje, proto╛e prohlφ╛eΦ Φekß, jak bude ten obrßzek velk² a jestli se mu tam v∙bec vejde. Obzvlß╣╗ varuji p°ed poΦitadly: ty se v∞t╣inou stahujφ dlouho (proto╛e se na serveru poΦφtajφ) a nemajφ explicitn∞ uvedenou ╣φ°ku.

Pou╛φt vφce tabulek

Normßln∞ ten text rozd∞lte do vφce tabulek. Ta prvnφ nech╗ je krat╣φ, zobrazφ se rychle a Φtenß° m∙╛e Φφst, zatφmco se stahuje ta druhß tabulka. Ale pozor! Velice ╣patn∞ se takovΘ strßnky aktualizujφ. LΘpe °eΦeno skoro to nejde. Toto °e╣enφ se tedy dß pou╛φt jen u strßnek, kterΘ se dlouhodob∞ nebudou m∞nit, nebo u serverem generovan²ch strßnek (CGI, PHP, ASP).

ObtΘkanΘ tabulky

Moje oblφbenΘ °e╣enφ pro ΦßsteΦnou sloupcovou sazbu. Na zaΦßtek strßnky umφstφm tabulku obtΘkanou zleva (align="right") s n∞jak²m textem, kter² logicky pat°φ od boΦnφho textu. Rychlost zobrazovßnφ je uspokojivß, proto╛e obsah tΘ tabulky je mal². Kamarßd MaKr mi navφc poradil, ╛e kdy╛ se takovΘ tabulce nastavφ velmi velkß v²╣ka (height="10000" t°eba), tak to vypadß, jako kdyby to byl jako rßm.

CSS pozicovßnφ

Pozicovacφ vlastnosti kaskßdov²ch styl∙ umo╛≥ujφ umφstit n∞jak² blok textu nebo prost∞ cokoliv na jakΘkoliv mφsto dokumentu. Dß se tak ud∞lat i sloupcovß ·prava. ProblΘm je snad jen v tom, ╛e tyto vlatnosti jsou r∙zn²mi prohlφ╛eΦi interpretovßny r∙zn∞, tak╛e je to pot°eba d∞sn∞ dlouho ladit, p°iΦem╛ stejn∞ nenφ nic zaruΦeno. Na druhou stranu tento postup neodporuje duchu HTML, jako to d∞lajφ tabulky.

Duch HTML

HTML p∙vodn∞ vzniknul jako jazyk vymezujφcφ obsah, nikoliv formu. Tak╛e je naprosto nesmyslnΘ d∞lat sloupcovou sazbu tabulkou, proto╛e to nenφ tabulka, ale sloupcovß sazba. «el, tag pro sloupcovou sazbu v HTML nenφ (je v roz╣φ°enφ, ale nenφ Explorerem podporovßn), tak╛e se musφ ud∞lat tabulka. Z hlediska "ducha HTML" je to zv∞rstvo.

LeΦ k velkΘ lφtosti mnoh²ch je internet zv∞rstev pln², je nacpan² deklaracemi, ve kter²ch ·Φel sv∞tφ prost°edky. Asi se s tφm nedß nic d∞lat. Jenom skromn∞ navrhuji pou╛φvat tabulky opravdu jen na tabulky.

Krßsn∞ to jednou v jednom mailu vystihl Svi≥ßk (voln∞ cituji): "Pφ╣e╣, ╛e dne╣nφ internet odporuje duchu HTML. Ale co kdy╛ je to spφ╣ tak, ╛e HTML u╛ nedostaΦuje pot°ebßm dne╣nφho webu?" Touto krßsnou ·vahou konΦφm pojednßnφ o tabulkov²ch fφglech, kterΘ rad∞ji moc nepou╛φvßm.

Obsah

Hledßnφ

Zßkladnφ kurs

Editory

HTML tipy

Provoz webu

CSS styly

P╪EHLED VLASTNOST═ CSS