TABULKY

Důležitým prvkem webových stránek jsou pochopitelně tabulky. Jsou výborné pro zpřehlednění dat a dříve se používaly i na vytvoření layoutu stránky. Toto řešení se ale silně nedoporučuje, protože to odporuje významu tabulek ve specifikaci a navíc má takovýto layout spoustu nedostatků. Mnohem lépe se dá vytvořit pomocí elementu <div> a CSS.

jednoduchá tabulka

Tedy příklad jednoduché tabulky:

Levá horní	Pravá horní
Levá spodní	Pravá spodní

Zápis vypadá takto:

<table border="1"> 
<tr> <td> Levá horní </td> <td> Pravá horní </td> </tr>
<tr> <td> Levá spodní </td> <td> Pravá spodní </td> </tr>
</table>

vysvětlení kódu:

<table> </table>

Párový element, který v sobě uzavírá celou tabulku.

<tr> </tr>

Element značící řádek tabulky (z angl. table row).

<td> </td>

Vymezuje buňku tabulky. Sem už se píší rovnou data tabulky (angl. table data).

Atribut border určuje šířku ohraničení tabulky (v pixelech).

složitější tabulky

To byla úplně nejjednodužší tabulka. Mnohem častěji se ale požívá členění, kde je vyznačena hlavička, obsah a patička tabulky: [zobrazit]

<table border="1">
  <caption>Ceník</caption>

  <thead>
    <tr>
      <th>Název</th>
      <th>Cena</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Lednice</td>
      <td>10000,-</td>
    </tr>
    <tr>
      <td>PC</td>
      <td>20000,-</td>
    </tr>
  </tbody>

</table>

<caption> </caption>

Hlavička tabulky – obsah tohoto párového elementu se vypíše nad střed tabulky. Pomocí CSS je možné umístit <caption> i pod tabulku.

<thead> </thead>

Hlavičková část tabulky. Musí být uvedena první, ještě před <tfoot> a <tbody>

<th> </th>

Hlavičkové pole (angl. table head) - používá se přímo místo <td> a text který obsahuje by měl být tučně a zarovnaný na střed. Hlavní využití ale spočívá až v kombinaci s CSS.

<tfoot> </tfoot>

Je patička tabulky, v příkladu jí ale uvedenou nemám. V kódu musí být uvedena ještě před <tbody> - tedy obvykle po elementu <thead> (pokud je přítomen).

<tbody> </tbody>

Tělo tabulky. Obsahuje konkrétní data. Elementů <tbody> může být v jedné tabulce více, pokud logicky oddělují dva různé druhy dat.

slučování buněk

Jednotlivé buňky se dají slučovat pomoví atributů colspan a rowspan

colspan slučuje sousední buňky pod sebou

rowspan slučuje sousední buňky vedle sebe

zápis řádku se sloučenými buňkami: [zobrazit]

<tr> <td colspan="2" > Dvě buňky v jednom </td> </tr>

Hodnota vždy určuje kolik buněk bude sloučeno.

< Předchozí Následující >

O webu

Slovníček pojmů

Odkazy

Verze pro tisk (pdf)