HTML a tvorba WWW strßnek - 5. lekce 24.Φervna 1998 xskrivan@fi.muni.cz

5.1 Vymezenφ tabulky

  Tabulka je velmi mocnß zßkladnφ struktura HTML, pomocφ nφ₧ lze dosßhnout velice p∞kn²ch efekt∙. Umo₧≥uje sazbu do polφ uspo°ßdan²ch do sloupc∙ a °ßdk∙. Tabulka nem∙₧e b²t obtΘkßna sousedφcφm textem.

 <table>
Pßrov² tag, kter² vymezuje tabulku. Tento tag obsahuje °adu atribut∙, z nich nejd∙le₧it∞jÜφ:

• border - urΦuje tlouÜ¥ku rßmeΦku, implicitn∞ b²vß 0 nebo 1, border=0 zp∙sobφ, ₧e se zobrazφ tabulka bez obrysov²ch Φar
• width - definuje Üφ°ku tabulky, lze zadat absolutn∞ v bodech, nap°. width=300, nebo v procentech relativn∞ vzhledem k velikosti okna prohlφ₧eΦe, nap°. width=50%
• bgcolor - definuje barvu pozadφ tabulky, implicitn∞ je tabulka "pr∙hlednß", tj. mß takovΘ pozadφ, jako je aktußlnφ pozadφ dokumentu
• cellspacing - definuje vzdalenost (v bodech) mezi jednotliv²mi bu≥kami v tabulce, implicitn∞ je cellspacing=1
• cellpadding - definuje vzdalenost textu v bu≥ce od okraje bu≥ky, implicitn∞ cellpadding=1

P°φklady zßpisu

<table border=1> ... </table> <table border=0 width=100%> ... </table> <table cellspacing=5 cellpadding=2 bgcolor="silver"> ... </table>

5.2 ╪ßdek tabulky a bu≥ka

Tabulka se sklßdß z °ßdk∙ a ka₧d² °ßdek se sklßdß z bun∞k. Z tΘto v∞ty se i vychßzφ p°i definovßnφ tabulky v HTML dokumentu. Ka₧d² °ßdek je uzav°en pßrov²m tagem <tr> ... </tr> . Na ka₧dΘm °ßdku se mohou vyskytovat bu≥ky. Bu≥ky jsou v zßsad∞ dvojφto typu:

• hlaviΦkovß <th> ... </th>
• normßlnφ <td> ... </td>

Ob∞ bu≥ky jsou v podstat∞ stejnΘ, jenom s tφm rozdφlem, ₧e text ohraniΦen² v bu≥ce <th> je centrovßn doprost°ed bu≥ky a je tuΦn², kde₧to v bu≥ce <td> je text normßlnφ a zarovnßn standardn∞ k levΘmu okraji. Do tabulkovΘ bu≥ky (<td>...</td>) lze vklßdat dalÜφ HTML struktury: nejen tedy text, ale i obrßzky, seznamy a samoz°ejm∞ je povoleno vno°enφ dalÜφ tabulky.

Atributy bu≥ky

• align - zarovnßnφ objektu v bu≥ce, mo₧nosti: align=left|right|center|justify
• bgcolor - nezßvislß barva pozadφ bu≥ky, ka₧dß bu≥ka m∙₧e mφt svou vlastnφ barvu
• width - definice Üφ°ky bu≥ky v bodech, nap°. width=100
• nowrap - potlaΦuje automatickΘ d∞lenφ °ßdk∙ uvnit° bu≥ky

P°φklad zßpisu

<td> ... </td> <td bgcolor="blue"> ... </td> <td nowrap width=120 align=right> ... </td>

5.3 P°φklad I

Zdroj: <table border=1> <tr><th> den </th> <th> hodiny </th> </tr> <tr><td> pond∞lφ </td> <td> 15 </td> </tr> <tr><td> ·ter² </td> <td> 20 </td> </tr> <tr><td> st°eda </td> <td> 10 </td> </tr> </table> V²stup: Den hodiny pond∞lφ 15 ·ter² 20 st°eda 10

5.4 P°φklad II

Zdroj: <table border=3 bgcolor="white" cellspacing=10 cellpadding=5> <tr><th> den </th> <th> hodiny </th> </tr> <tr><td> pond∞lφ </td> <td> 15 </td> </tr> <tr><td> ·ter² </td> <td> 20 </td> </tr> <tr><td> st°eda </td> <td> 10 </td> </tr> </table> V²stup: Den hodiny pond∞lφ 15 ·ter² 20 st°eda 10

5.5 P°φklad III

Zdroj: <center> <table border=0 bgcolor="silver" cellspacing=5> <tr><th> den </th> <th> hodiny </th> </tr> <tr><td bgcolor=yellow> pond∞lφ </td> <td width=70> 15 </td> </tr> <tr><td> ·ter² </td> <td> 20 </td> </tr> <tr><td> st°eda </td> <td> 10 </td> </tr> </table> </center> V²stup: Den hodiny pond∞lφ 15 ·ter² 20 st°eda 10

Shrnutφ:

• Tabulka se uvozuje tagem <table>
• Tabulka s neviditeln²m rßmeΦkem je zßkladnφm nßstrojem pro tvorbu profesionßlnφch www dokument∙
• Ka₧dß tabulka se sklßdß ze °ßdk∙ a ka₧d² °ßdek se sklßdß z bun∞k
• Do normßlnφ tabulkovΘ bu≥ky lze vklßdat libovoln∞ dalÜφ HTML struktury (dalÜφ tabulka, seznam, obrßzek...)
• AΦkoli je mo₧nΘ koncovΘ znaΦky </td>, </th>, </tr> vynechßvat, je dobrΘ je uvßd∞t, nebo¥ n∞kdy by prohlφ₧eΦ nemusel dob°e "pochopit" vaÜi tabulkovou strukturu a zobrazil by tabulku jinak

---

[Zp∞t]	[Zm∞na k≤dovßnφ]