Design pomocφ tabulek

a proΦ ho nepou╛φvat

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 - ProblΘm ╣φ°ky + vychytßvka - Design jako rßm  - Slo╛it∞j╣φ p°φklad - Rychlost zobrazovßnφ - ╚ßsteΦnß °e╣enφ pomalΘho zobrazovßnφ - Sloupcovß sazba - Vno°enΘ tabulky  

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.

NejΦast∞j╣φ 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:

<table border="1" cellpadding="6" cellspacing="0">

<tr>

<td width="500"><font size="6">Tento text ...</td>

</tr>

</table>

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:

1. Jednodu╣╣φ zp∙sob pou╛φvß dva obrßzky (zvolenΘ nelΘpe tak, aby navazovaly) a spoΦφvß v nastavenφ pozadφ bu≥kßm: <td background="pozadi.gif">.
2. Star╣φ, elegantn∞j╣φ a pon∞kud slo╛it∞j╣φ zp∙sob (kter² se dß vyu╛φt i u beztabulkov²ch design∙) pou╛φvß jako pozadφ jedin² uzouΦk² obrßzek gif, kter² je velmi ╣irok². V levΘ Φßsti mß kresbu stejnΘ ╣φ°ky, jakou bude mφt levß bu≥ka tabulky. Je╣t∞ je takΘ dobrΘ nastavit opakovßnφ jenom v ose y. M∙╛ete si zobrazit p°φklad, kter² opakuje i v ose x.

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

Slo╛it∞j╣φ p°φklad

NejΦast∞j╣φ pojetφ tabulkovΘ ·pravy je toto:

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:

<table width="760"> <tr> <td colspan="3" > HlaviΦka </td></tr>

<tr><td rowspan="2" width="150">Lev² sloupec</td>

<td width="500">Obsah</td>

<td rowspan="2" width="110">Prav² sloupec</td> </tr>

<tr> <td>PatiΦka </td> </tr> </table>

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φ. To se dß ud∞lat pomocφ html atribut∙ i pomocφ CSS.

Rychlost Pomalost zobrazovßnφ

Prohlφ╛eΦe zobrazφ tabulku a╛ po tΘ, co dorazφ na klienta celß. Neumφ to vykreslovat po bu≥kßch. Pokud t°eba celou strßnku uzav°ete do tabulky, Φtenß° koukß celou v∞Φnost na prßzdnou strßnku.

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. 

Kv∙li tomu vlastn∞ nelze s ·sp∞chem pou╛φt design-jako-rßm pomocφ tabulek. Takov²mi designy je dne╣nφ web (dopln∞no 2003) p°epln∞n². Tabulkov² design je jeden z d∙vod∙, proΦ se web zdß b²t tak pomal²m. 

Na╣t∞stφ existujφ n∞kterß °e╣enφ.

╪e╣enφ pomalΘho zobrazovßnφ

Rozli╣ovat projekty

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

1. na firemnφ strßnky stejn∞ nikdo nekoukß
2. akorßt majitel firmy, ale ten to mß v cache pam∞ti, tak╛e se mu to zobrazuje rychle
3. firmy platφ za krßsu a ne za funkΦnost, tak╛e se bez tabulek asi neobejdete.

Rozm∞rovat obrßzky

Jde pouze o ΦßsteΦnΘ °e╣enφ. 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). Je to k vid∞nφ nap°. na serveru Lupa.cz. Je to pouze ΦßteΦnΘ °e╣enφ problΘmu pomalΘho zobrazovßnφ.

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². 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. (Dopln∞no 2003: v∞t╣inovΘ prohlφ╛eΦe u╛ to podporujφ velmi dob°e.) Na druhou stranu tento postup neodporuje duchu HTML, jako to d∞lajφ tabulky.

CSS obtΘkßnφ

P∞tkovΘ verze prohlφ╛eΦ∙ um∞jφ sprßvn∞ vykreslovat css vlastnost float, tak╛e se design dß postavit z div∙, kterΘ se nechajφ obtΘkat.

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.

<table><tr>
<td>Lev² sloupec</td>
<td>Obsah strßnky jakkoliv slo╛it²</td>
<td>Prav² sloupec</td></tr>
</table>

Neexistuje ╛ßdn² zp∙sob, jak donutit prohlφ╛eΦ, aby obsah z jednΘ bu≥ky p°elΘval do jinΘ podle dΘlky obsahu. Do bun∞k se to musφ rozd∞lovat ruΦn∞. Je to na p∞st.

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 nebo ve Wordu, kterΘ╛to programy se tvß°φ, ╛e s vno°en²mi tabulkami pracujφ 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∞ t°i tabulky.

P°i tvorb∞ dynamick²ch strßnek (PHP, ASP) 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∞.

P°edchozφ: NovΘ vlastnosti tabulek
Vizte tΘ╛: obsah/forma, rßmy, CSS pozicovßnφ, Jak ud∞lat levΘ menu, Co ovliv≥uje rychlost strßnek, rolovacφ li╣ty tabulek, V╣e o pozadφ
Odkaz mimo: Jak zvolit ╣φ°ku strßnky (zdroj Sova v sφti)