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í]