Tabulky, možnosti a použití

Tabulky vám velice usnadní práci, pokud budete potřebovat zapsat data v pravidelném formátu. Hodí se nejen pro tabulková data, ale někteří tvůrci stránek (zejména před CSS) využívali tabulek k tvorbě základní struktury stránky, protože je to celkem pohodlné a ve všech prohlížečích se stránka zobrazovala stejně, což je samozřejmě žádoucí. V současné době ale není použití tabulky k tvorbě layoutu (kostry) stránek vhodné - snad jen pro začátečníka.

Tabulka se zkládá :

• uvozuje se hlavním tagem <table> a ukončuje </table>
• z řádků - tag <tr> a ukončení řádku tabulky </tr>
• z jednotlivých buněk na každém řádku - sloupce <td> a </td>
• buňky které jsou záhlavím se zapisují <th> a </th>

Vlastnosti buněk můžete nastavovat u tabulky, řádků i jedn. buněk:

• pokud chcete buňky s rámečkem , je nutné nastavit vlastnost Border (rámeček) např border="1" - šířka rámečku 1 px.
• pro změnu zarovnání textu v buňkách , je nutné nastavit ALIGN , např. ALIGN="LEFT" - zarovnání vlevo, ALIGN="right" - zar. vpravo., ALIGN="center" - na střed
• šířka buňky na 60px se nastavuje Width="60"
• výška buněk např. 25px se nastavuje zápisem height="25" do buňky
• nastavení odstupu obsahu (textu) od okraje buňky např.: cellpadding="10"
• nastavení odstupu buňky od okraje tabulky např.: cellspacing="10"
• buňky můžete spojovat vložením vlastnosti colspan + zadání počtu buněk, které se mají na řádku spojit.

Celá tabulka např. záhlaví + 5 řádků o 3 sloupcích pak může vypadat takto:



Př. tabulky:

Umístění	Jméno	Příjmení
1.místo	Pavel	Novák
2.místo	Franta	Černý
3.místo	Dan	Konečný
4.místo	Jiří	Nový
konec

A zde je HTML kód této tabulky:

<table border="1" cellpadding="8">
<tr bgcolor="green" >
  <th width="200" height="35">Umístění </th><th>Jméno </th><th>Příjmení</th> </tr>
<tr> <td>1.místo</td> <td>Pavel</td> <td>Novák </td> </tr>
<tr> <td>2.místo</td> <td>Franta</td> <td>Černý </td> </tr>
<tr> <td>3.místo</td> <td>Dan</td> <td>Konečný </td> </tr>
<tr> <td>4.místo</td> <td>Jiří</td> <td>Nový </td> </tr>
<tr> <td ALIGN="center" colspan="3">konec </td> </tr>
</table>

Jak jsem již výše předeslal, je možné z tabulky pomocí výše uvedených informací v případě potřeby rychle vytvořit kostru stránky, i když k tomuto účelu tabulky nebyly a nejsou určeny.

Jedna z variant je zobrazena na následujícím obrázku:

Hlavička stránky
Menu	střed stránky	pravý sloupek
zápatí - spojení

Více v následující kapitole.