HTML - Tabuľky

Na Webe sa tabuľky používajú na dva účely - stĺpcový design alebo bežné zobrazenie údajov (ako v knihách).

Jednoduchá tabuľka

Základom je párový tag TABLE. Doňho vkladáme riadky TR a stĺpce TD. Tých môže byť aj viacej.

<table>
 <tr>
  <td>Bunka 1</td>
  <td>Bunka 2</td>
 </tr>
 <tr>
  <td>Bunka 1</td>
  <td>Bunka 2</td>
 </tr>
</table>

Zobrazí sa asi takto:

Nevyzerá to presvedčivo? Skúsime vykresliť okolo tabuľky rámček. Použijeme atribút BORDER tagu TABLE. Hodnotou je šírka rámčeka.

<table border="1">
...

Ďalšími dôležitými atribútmi značky TABLE sú SUMMARY (popis tabuľky pre nevizuálne prehliadače) a WIDTH (šírka tabuľky).

Tag TR má zas atribúty ALIGN (zarovnanie - left, center, right, justify, char) a VALIGN (vertikálne zarovnanie - top, middle, bottom, baseline).

Členenie

V riadku tabuľky TR sa môže nachádzať aj tag TH - záhlavie.

<table summary="Test" border="1">
 <tr>
  <th>Záhlavie</th>
 </tr>
 <tr>
  <td>Bunka</td>
 </tr>
</table>

Iný spôsob je použitie tagu CAPTION. Ten sa nachádza priamo v TABLE.

<table summary="Test" border="1">
 <caption>Nadpis</caption>
 <tr>
  <td>Bunka</td>
 </tr>
</table>

Existujú aj značky THEAD (hlavička), TBODY (telo) a TFOOT (päta tabuľky). V súčasnosti však nie sú podporované prehliadačmi, takže sa nimi nebudeme zaoberať.

Zoskupovanie

Niekedy sa zíde, aby bunka presahovala cez viac riadkov. Skúsime tagu TD priradiť atribút ROWSPAN s hodnotou 2.

<table summary="Test" border="1">
 <tr>
  <td rowspan="2">Presahujúca</td>
  <td>Bunka 2</td>
 </tr>
 <tr>
  <td>Bunka 3</td>
 </tr>
</table>

Podobne sa správa aj COLSPAN, ale bunka bude presahovať cez stĺpce.

<table summary="Test" border="1">
 <tr>
  <td colspan="2">Presahujúca</td>
 </tr>
 <tr>
  <td>Bunka 2</td>
  <td>Bunka 3</td>
 </tr>
</table>