HTML táblázat szintaxis

Táblázatokat a table tag segítségével lehet létrehozni. Egy tábla sorokat tartalmaz (tr tag), és minden sor cellákat (th vagy td tag). A tábla cellái szöveget, képet, bekezdést, listát, űrlapokat, újabb táblázatokat is tartalmazhatnak.

Nézzünk egy egyszerű, 2x2 cellás táblázatot:

<table border="1">
  <tr>
    <td>1. sor, 1. cella</td>
    <td>1. sor, 2. cella </td>
  </tr>
  <tr>
    <td>2. sor, 1. cella </td>
    <td>2. sor, 2. cella </td>
  </tr>
</table>

Az eredmény:

Táblázat szegélyek

Alapértelmezetten a táblázatok szegélyek nélkül jelennek meg. Van azonban lehetőség arra, hogy szegélyek is megjelenjenek az oldalon: az előző példában is látható border tulajdonsággal lehet beállítani a szegély szélességét. (A szám képpontban értendő.)

Hamarosan látni fogjuk, hogy CSS-ben ennél jobb lehetőségeink lesznek a kinézet befolyásolására.

Táblázat fejléc

A táblázat első (néhány) sorába, első (néhány) oszlopába szokás fejléc információkat elhelyezni. Ez magyarázza az alatta vagy mellette található értékek jelentését. Ebben az esetben az első sort celláit a th tagokkal kell megadni:

<table border="1">
  <tr>
    <th>1. fejléc</th>
    <th>2. fejléc</th>
  </tr>
  <tr>
    <td>1. sor, 1. cella</td>
    <td>1. sor, 2. cella</td>
  </tr>
  <tr>
    <td>2. sor, 1. cella</td>
    <td>2. sor, 2. cella</td>
  </tr>
</table>

Az eredmény:

Táblázat cím

Méltatlanul keveset használt elem a caption, amivel a táblázat címét tudjuk korrekt módon megadni. Lehetőség van annak kiválasztására is, hogy a négy lehetséges oldal közül hol jelenjen meg a cím. A captionelemnek meg kell előznie a sorokat:

<table border="1">
  <caption>Táblázat címe</caption>
  <tr>
    <th>1. fejléc</th>
    <th>2. fejléc</th>
  </tr>
  ...

Az eredmény:

Cellák összevonása

A colspan és rowspan tulajdonságok segítségével cellákat lehet egyesíteni:
<table border="1">
  <tr>
    <th>Név</th>
    <th colspan="2">Telefon</th>
  </tr>
  ...

Az eredmény:

Tippek

A thead, tbody és tfoot elemek a céljuk szerint nagyon hasznos elemek lennének, de sajnos a böngészők igen változó módon támogatják őket, ezért a gyakorlatban nem is szokás alkalmazni.

A táblázat cellák további táblázatokat is tartalmazhatnak, amivel összetett szerkezetek alakíthatók ki.