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 - Sloupcovß sazba - Slo╛it∞j╣φ p°φklad - Popisky obrßzk∙ - Vno°enΘ tabulky - Rychlost zobrazovßnφ - ╚ßsteΦnß °e╣enφ - Duch HTML
Kßmen ·razuDne╣nφ prohlφ╛eΦe majφ jednu chybu: tabulku vykreslφ a╛ po tΘ, co ji naΦtou ·pln∞ celou. Tak╛e pokud t°eba celou strßnku uzav°ete do tabulky, Φtenß° koukß celou v∞Φnost na prßzdnou strßnku. Je to ╣koda, proto╛e tabulky dnes p°edstavujφ jedinou mo╛nost (krom∞ je╣t∞ hor╣φch rßm∙), jak vytvo°it nap°φklad sloupcovou sazbu, seznam souvisejφcφch odkaz∙ v levΘm sloupeΦku nebo spoustu dal╣φch efekt∙. Prost∞ kdy╛ chci n∞co n∞kam umφstit, jedinou spolehlivou mo╛nostφ jsou prßv∞ tabulky. (CSS pozicovßnφ jsou mo╛nostφ dal╣φ, ale nespolehlivou.) |
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φ.
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>.
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.
HlaviΦka strßnky t°eba s logem | |
N∞jakΘ odkazy odkaz odkaz |
Hlavnφ text strßnky, kter² je obvykle mnohem del╣φ a ╣ir╣φ ne╛ lev² sloupec s odkazy. |
Hlavnφ efekt spoΦφvß v pou╛itΘm obrßzkovΘm nebo barevnΘm pozadφ. Jsou dv∞ mo╛nosti:
<td
background="pozadi.gif">
. «el, toto nefunguje v NN 3.Je╣t∞ musφm zmφnit, ╛e bu≥ky takovΘ "rßmovΘ" tabulky musejφ mφt nastaveno vertikßlnφ zarovnßnφ (valign) nahoru (top).
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>
NejΦast∞j╣φ pojetφ tabulkovΘ ·pravy je toto:
HlaviΦka |
||
Lev² sloupecObsahuje zpravidla hodn∞ odkaz∙ |
ObsahObsah strßnky, vlastnφ text, kter² je d∙le╛it².
|
Prav² sloupec |
PatiΦka |
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φ.
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.)
![]() |
popisek obrßzku |
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:
<table><tr><td align="center">
<img scr="fotka.jpg" width="300"
height="200">
Popisek fotky
</td></tr><table>
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).
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∞.
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.
Pokud stavφte pro n∞jakou firmu komerΦnφ prezentaci, tak tam ty tabulky klidn∞ m∙╛ete pou╛φt, proto╛e
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.
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).
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.
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.
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.
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 pozicovßnφ
Obsah
Hledßnφ
Zßkladnφ kurs
Editory
HTML tipy
Provoz webu
CSS styly
Jak psßt web:
http://dusan.pc-slany.cz/internet/
Pφ╣e Yuh∙: autorova strßnka, mail: dusan@pc-slany.cz
Poslednφ aktualizace 26.11.2001