Táblázatok használata HTML-ben

A táblázatok lehetővé teszik, hogy adatokat rendezetten jelenítsünk meg sorokban és oszlopokban. A HTML táblázatok jól strukturált adatmegjelenítést biztosítanak, például árlisták, órarendek vagy statisztikák esetén.

Táblázat felépítése

A táblázatok a <table> taggel kezdődnek. A sorokat <tr>, az oszlopfejléceket <th>, a cellákat pedig <td> elemekkel hozzuk létre.

<table>
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>0.2$</td>
  </tr>
</table>

Példa: Megjelenített táblázat

Az alábbi egy egyszerű HTML táblázat valós megjelenítése. Ez segít elképzelni, hogyan néz ki a böngészőben a HTML kód.

Különleges cellatulajdonságok

A <td> elemekhez használhatjuk a colspan és rowspan attribútumokat. Ezekkel egy cella több oszlopon vagy soron is átívelhet.

<td colspan="2">Occupies two columns</td>

<td rowspan="2">Occupies two rows</td>

Szemantikus táblázatelemek

Használhatjuk a <thead>, <tbody> és <tfoot> tageket is, hogy még strukturáltabb és könnyebben értelmezhető legyen a táblázat kódja.

Mire érdemes használni a táblázatokat?

Táblázatokat akkor használjunk, ha valóban strukturált adatot szeretnénk megjeleníteni. Ne alkalmazzuk őket layout vagy dizájnelemek elrendezésére – erre modern CSS megoldásokat használjunk.