Tabulky na webu

Dvojφ pou╛itφ tabulek - Nejjednodu╣╣φ tabulka - Dal╣φ p°φklad - Spojovßnφ bun∞k a hlaviΦka - Obsah bun∞k

Dvojφ pou╛itφ tabulek

Na internetov²ch strßnkßch se tabulky pou╛φvajφ ve dvou p°φpadech:

1. Jestli╛e je pot°eba ud∞lat klasickou tabulku.
2. Jako pom∙cka pro ·pravu strßnek, kdy╛ je n∞co pot°eba n∞kam umφstit (nap°. sloupcovß sazba).

Druh² zp∙sob nenφ v HTML ·pln∞ ko╣er, ale ·Φel sv∞tφ prost°edky. V tomto textu se budu zab²vat nap°ed v²stavbou b∞╛n²ch tabulek. Podφvßm se hlavn∞ na to, jak jejich zßpis vypadß v k≤du HTML. Pokud neznßte zßklady HTML, tak vßm to nic ne°ekne. Jinde se rozepisuji o formßtovßnφ a nov²ch vlastnostech tabulek.

Nejjednodu╣╣φ tabulka

Zkusφm vlo╛it tabulku s dv∞ma °ßdky a dv∞ma sloupci (a n∞jak²m obsahem).

Ta mß tento k≤d:

<table >

 <tr> <td>Obsah bu≥ky</td> <td>Dal╣φ bu≥ka</td> </tr>

 <tr> <td>bla bla</td> <td>cha cha cha</td> </tr>

 </table>

 Co znamenajφ jednotlivΘ tagy:

<table>

Pßrov² tag, kter² zaΦφnß tabulku.

<tr>

Pßrov² tag, kter² zaΦφnß a konΦφ °ßdek tabulky. (TR znamenß table row, Φili °ßdek).

<td>

Tag bu≥ky tabulky.

Je to docela jednoduchΘ, ╛e?

Dal╣φ p°φklad

Tato tabulka mß nßsledujφcφ k≤d:

<table border="2" cellpadding="5" cellspacing="4">

<tr><th>Nßzev</th><th>Cena</th><th>Poznßmka</th></tr>

<tr><td>Rtu╗</td><td>658,60 KΦ</td><td>Tekutß</td></tr>

<tr><td>Mßslo</td><td>22,- KΦ</td></tr>

</table>

V tomto p°φkladu se objevilo pßr nov²ch v∞cφ:

border

atribut tagu <table>, kter² nastavuje ╣φ°ku vn∞j╣φho rßmeΦku kolem tabulky (v obrazovkov²ch bodech);
kdyby bylo border="0", nevykreslφ se ani vnit°nφ m°φ╛ka

cellpadding

vnit°nφ okraj bun∞k (v pixelech), Φili vzdßlenost textu od rßmeΦku. TaktΘ╛ atribut tagu <table>

cellspacing

vn∞j╣φ okraj bun∞k (vn∞ rßmeΦku) R∙znß nastavenφ velikosti okraj∙ bun∞k si m∙╛ete nastudovat na p°φkladu. 

<th>

<th> se dß pou╛φt namφsto <td>, ale znamenß to hlaviΦkovΘ pole. Obsah b²vß tuΦn² a zarovnan² na st°ed. Pou╛φvßnφ tΘto znaΦky se doporuΦuje kv∙li automatickΘmu zpracovßnφ textu.

Vynechanß bu≥ka

V tabulce chybφ poslednφ bu≥ka vpravo dole. To se m∙╛e, ale nemß d∞lat. Prohlφ╛eΦ ji pak v∞t╣inou nezobrazφ. Vynechßvat lze z°ejm∞ jedin∞ bu≥ky, kterΘ jsou na konci °ßdku.

Spojovßnφ bun∞k a hlaviΦka

HTML umo╛≥uje spojit dv∞ nebo vφce sousednφch bun∞k do jednΘ. Zßrove≥ popφ╣u vklßdßnφ hlaviΦky. P°φklad tabulky a jejφ k≤d:

<table border="1" cellpadding="10">

<caption>HlaviΦka</caption>

<tr><td>A</td> <td>B</td> <td rowspan="2">C</td> </tr>

<tr> <td colspan="2">D</td> </tr>

<tr> <td colspan="3">E</td> </tr>

</table>

V╣imn∞te si atribut∙ rowspan a colspan. ╪φkajφ, kolik "bun∞k prostoru" zabφrß aktußlnφ bu≥ka. Rowspan="2" znamenß, ╛e bu≥ka C zasahuje p°es dva °ßdky (row = °ßdek), colspan="3" °φkß, ╛e bu≥ka zabφrß prostor p°es t°i sloupeΦky (col = sloupec).

Pro zßjemce jeden paradoxnφ p°φklad spojovßnφ bun∞k.

(Existuje je╣t∞ jin² zp∙sob, jak zdßnliv∞ rozd∞lit bu≥ku tabulky: do bu≥ky se vlo╛φ celß dal╣φ tabulka.)

HlaviΦka -- caption

HlaviΦka tabulky se dnes tΘm∞° nepou╛φvß, proto╛e se dß ud∞lat jednodu╣eji. Standardn∞ se mß ale vklßdat mezi tagy <caption></caption>, kterΘ jsou umφst∞ny je╣t∞ p°ed prvnφm °ßdkem tabulky. Pokud bych uvedl u caption atribut align="bottom", m∞la by se hlaviΦka zobrazit pod tabulkou.

Obsah bun∞k tabulky

Do bu≥ky tabulky m∙╛ete vlo╛it ·pln∞ cokoliv. Obrßzky, odstavce, ale t°eba i dal╣φ tabulku. Je dobrΘ takov²ch vno°en²ch tabulek ned∞lat p°φli╣ mnoho, proto╛e pak v tom snadno vznikß zmatek.

Je mo╛nΘ dokonce vklßdat do tabulek celΘ strßnky a d∞lat tak sloupcovou sazbu. D∞lat by se to ale nem∞lo, proto╛e to zpomaluje zobrazovßnφ strßnky.

Dal╣φ: Formßtovßnφ tabulek, zejmΘna ╣φ°ky bun∞k
Vizte tΘ╛: novΘ vlastnosti tabulek, design pomocφ tabulek, zßklady HTML

O tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek. Zßklady HTML CSS FrontPage Hledßnφ