| Výuka > Tvorba WWW stránek > Tabulky |

Tabulky

Tabulky se používají pro znázornění tabelovaných údajů a někdy se též používají i pro návrh layoutu (vzhledu) webové stránky (toto použití tabulek je ovšem již překonáno).

Tabulka se skládá z řádků a v nich jsou definovány jednotlivé buňky. Definuje se pomocí párové značky <table>. Řádek je zaznamenán prostřednictvím párové značky <tr> a jednotlivé datové buňky pak párovou značkou <td>. Speciální jsou tzv. hlavičkové buňky, které vyjadřují údaje zapsané v příslušném sloupci a oddělují tak tyto údaje od běžných dat zapsaných do datových buněk. Do tabulky se definují prostřednictvím párových značek <th>.

Struktura tabulky pak vypadá následovně:

<table>
  <tr>
   <th> 1. hlavičková buňka </th>
   <th> 2. hlavičková buňka </th>
   ...
  </tr>
  <tr>
   <td> 1. datová buňka </td>
   <td> 2. datová buňka </td>
   ...
  </tr>
  ...
</table>

U tabulek platí tři pravidla:

1. Počet buněk v jednotlivých řádcích musí být stejný (výjimkou jsou sloučené buňky)
2. Každá buňka musí obsahovat nějaká data, pokud má buňka zůstat prázdná, vložte do ní alespoň nedělitelnou mezeru (&nbsp;)
3. Tabulka by měla obsahovat hlavičku a svůj název (tzv. slušně vychovaná tabulka)

Syntaxe značky <table> je následující (většina parametrů se v XHTML již nepoužívá a jsou nahrazeny kaskádovými styly - CSS):

<table align="zarovnání_tabulky_v_okně"
       bgcolor="barva_pozadí_tabulky"
       background="URI_obrázku_na_pozadí_tabulky"
       border="šířka_okraje_tabulky"
       bordercolor="barva_okraje"
       bordercolordark="barva_tmavšího_okraje"
       bordercolorlight="barva_světlejšího_okraje"
       cellpadding="vzdálenost_okraj-obsah"
       cellspacing="vzdálenost buněk"
       width="šířka_tabulky"
       height="výška_tabulky">

Název tabulky se uvádí buď ihned za značku <table> nebo těsně před ukončovací značku </table> prostřednictvím párové značky <caption>, jejíž syntaxe je:

<caption align="zarovnání_nadpisu"> </caption>

Parametr align=" " určuje, zda bude nadpis nad tabulkou (top) nebo pod tabulkou (bottom).

Pro slučování buněk se používají u značek <td> nebo <th> parametry colspan=" " a rowspan=" ". Hodnoty určují, z kolika buněk sloučená buňka vznikla. Nyní je již na řadě ukázka slučování.

<table border="1" width="100" height="100">
 <tr>
  <td> 1 </td>
  <td> 2 </td>
 </tr>
 <tr>
  <td colspan="2"> 3 </td>
 </tr>
</table>

<table border="1" width="100" height="100">
 <tr>
  <td> 1 </td>
  <td rowspan="2"> 2 </td>
 </tr>
 <tr>
  <td> 3 </td>
 </tr>
</table>

30.08.2007, 19:43 vytvořil Administrator