5. Táblázatok HTML-ben

• 16 perc olvasás • HTML5 alapok

A táblázatok lehetővé teszik strukturált adatok megjelenítését sorok és oszlopok formájában. Ebben a cikkben megismered a HTML táblázatok felépítését, a fejlécek használatát, valamint az oszlop- és sorkombinálás technikáit.

Érettségi információ

Ez a lecke EMELT SZINTŰ érettségi anyag!

A táblázatok (table, tr, td, th) használata alapvető érettségi követelmény. Ismerned kell a táblázatok megadásának módját HTML-ben.

Fontos figyelmeztetés

Táblázatokat CSAK adatok megjelenítésére használd! Ne használj táblázatokat az oldal elrendezéséhez (layout) - inkább <div> elemeket használj CSS-sel formázva (lásd 10. lecke). Habár az érettségin elfogadják a táblázatos elrendezést, mi nem javasoljuk: elavult, akadálymentességi problémákat okoz és nem reszponzív.

Mi az a táblázat? EMELT SZINT

A táblázat sorokból és oszlopokból álló rácsszerkezet, amely strukturált adatok rendszerezett megjelenítésére szolgál:

  • Sorok (rows): Vízszintes vonalak
  • Oszlopok (columns): Függőleges vonalak
  • Cellák (cells): A sorok és oszlopok metszéspontjai

Alapvető táblázat elemek EMELT SZINT

<table> - Táblázat elem

A <table> elem a táblázat konténere, amely az összes többi táblázat elemet tartalmazza.

<tr> - Table Row (sor)

A <tr> (table row) elem egy sort reprezentál a táblázatban. Minden sor cellákból áll.

<td> - Table Data (adat cella)

A <td> (table data) elem egy adatcellát jelöl. Ez tartalmazza a táblázat tényleges adatait.

Egyszerű táblázat példa

HTML - Egyszerű táblázat
<table> <tr> <td>Sor 1, Oszlop 1</td> <td>Sor 1, Oszlop 2</td> <td>Sor 1, Oszlop 3</td> </tr> <tr> <td>Sor 2, Oszlop 1</td> <td>Sor 2, Oszlop 2</td> <td>Sor 2, Oszlop 3</td> </tr> <tr> <td>Sor 3, Oszlop 1</td> <td>Sor 3, Oszlop 2</td> <td>Sor 3, Oszlop 3</td> </tr> </table>

Élő példa - Egyszerű 3x3 táblázat:

Sor 1, Oszlop 1 Sor 1, Oszlop 2 Sor 1, Oszlop 3
Sor 2, Oszlop 1 Sor 2, Oszlop 2 Sor 2, Oszlop 3
Sor 3, Oszlop 1 Sor 3, Oszlop 2 Sor 3, Oszlop 3

Táblázat szerkezet

  • A <table> tartalmazza az összes sort
  • Minden <tr> egy sort jelent
  • Minden <td> egy cellát jelent
  • Az oszlopok száma az egy sorban lévő <td> elemek számától függ
  • Minden sorban ugyanannyi cellának kell lennie (kivéve colspan/rowspan használatakor)

Táblázat fejlécek: <th> EMELT SZINT

A <th> (table header) elem fejléc cellát jelöl. Alapértelmezetten félkövér és középre igazított szöveget jelenít meg.

HTML - Táblázat fejlécekkel
<table> <tr> <th>Termék</th> <th>Ár</th> <th>Készlet</th> </tr> <tr> <td>Intel Core i7</td> <td>120 000 Ft</td> <td>15 db</td> </tr> <tr> <td>AMD Ryzen 7</td> <td>110 000 Ft</td> <td>8 db</td> </tr> <tr> <td>Intel Core i5</td> <td>80 000 Ft</td> <td>22 db</td> </tr> </table>

Élő példa - Táblázat fejlécekkel:

Termék Ár Készlet
Intel Core i7 120 000 Ft 15 db
AMD Ryzen 7 110 000 Ft 8 db
Intel Core i5 80 000 Ft 22 db

Scope attribútum - Akadálymentesség

A scope attribútum meghatározza, hogy a fejléc cella mely cellákhoz tartozik. Ez fontos a képernyőolvasók számára.

HTML - Scope attribútum
<table> <tr> <th scope="col">Név</th> <th scope="col">Életkor</th> <th scope="col">Város</th> </tr> <tr> <td>Kiss Anna</td> <td>28</td> <td>Budapest</td> </tr> </table>
Scope érték Jelentés Használat
scope="col" Oszlop fejléc A fejléc az oszlophoz tartozik (függőleges)
scope="row" Sor fejléc A fejléc a sorhoz tartozik (vízszintes)
scope="colgroup" Oszlopcsoport Több oszlop fejléce
scope="rowgroup" Sorcsoport Több sor fejléce

Táblázat struktúra: <thead>, <tbody>, <tfoot> EMELT SZINT

A szemantikus táblázat struktúra segít a táblázat logikai részekre bontásában:

  • <thead>: Fejléc szakasz (table head)
  • <tbody>: Törzs szakasz (table body) - az adatok helye
  • <tfoot>: Lábléc szakasz (table foot) - összesítések, megjegyzések
HTML - Strukturált táblázat
<table> <thead> <tr> <th scope="col">Termék</th> <th scope="col">Mennyiség</th> <th scope="col">Ár</th> </tr> </thead> <tbody> <tr> <td>SSD 500GB</td> <td>2</td> <td>30 000 Ft</td> </tr> <tr> <td>RAM 16GB</td> <td>1</td> <td>25 000 Ft</td> </tr> <tr> <td>Egér</td> <td>1</td> <td>8 000 Ft</td> </tr> </tbody> <tfoot> <tr> <th scope="row">Összesen</th> <td>4 db</td> <td><strong>63 000 Ft</strong></td> </tr> </tfoot> </table>

Élő példa - Strukturált táblázat:

Termék Mennyiség Ár
SSD 500GB 2 30 000 Ft
RAM 16GB 1 25 000 Ft
Egér 1 8 000 Ft
Összesen 4 db 63 000 Ft

Strukturált táblázat előnyei

  • Szemantika: Jelentéssel bír a böngészők és képernyőolvasók számára
  • CSS stílusozás: Külön stílusokat adhatsz a különböző szakaszoknak
  • Nyomtatás: A thead/tfoot automatikusan ismétlődhet minden oldalon
  • JavaScript: Könnyebb az adatok manipulálása

Colspan - Oszlopok kombinálása EMELT SZINT

A colspan attribútum lehetővé teszi, hogy egy cella több oszlopot foglaljon el.

HTML - Colspan példa
<table> <tr> <th colspan="3">Havi jelentés</th> </tr> <tr> <th>Hónap</th> <th>Bevétel</th> <th>Kiadás</th> </tr> <tr> <td>Január</td> <td>500 000 Ft</td> <td>300 000 Ft</td> </tr> <tr> <td>Február</td> <td>600 000 Ft</td> <td>350 000 Ft</td> </tr> </table>

Élő példa - Colspan (3 oszlop egyesítése):

Havi jelentés
Hónap Bevétel Kiadás
Január 500 000 Ft 300 000 Ft
Február 600 000 Ft 350 000 Ft

Részleges colspan használat

HTML - Részleges colspan
<table> <tr> <th>Termék</th> <th colspan="2">Árazás</th> <th>Készlet</th> </tr> <tr> <th></th> <th>Nettó</th> <th>Bruttó</th> <th></th> </tr> <tr> <td>SSD</td> <td>10 000 Ft</td> <td>12 700 Ft</td> <td>25 db</td> </tr> </table>

Élő példa - Részleges colspan:

Termék Árazás Készlet
Nettó Bruttó
SSD 10 000 Ft 12 700 Ft 25 db

Colspan szabályok

  • A colspan értéke megadja, hány oszlopot foglaljon el a cella
  • Ha egy cella colspan="3", akkor 3 oszlopnyi helyet foglal
  • A sorban kevesebb <td> vagy <th> elem kell legyen
  • Alapértelmezett érték: colspan="1"

Rowspan - Sorok kombinálása EMELT SZINT

A rowspan attribútum lehetővé teszi, hogy egy cella több sort foglaljon el (függőlegesen).

HTML - Rowspan példa
<table> <tr> <th>Kategória</th> <th>Termék</th> <th>Ár</th> </tr> <tr> <td rowspan="3">Processzor</td> <td>Intel Core i7</td> <td>120 000 Ft</td> </tr> <tr> <td>Intel Core i5</td> <td>80 000 Ft</td> </tr> <tr> <td>AMD Ryzen 7</td> <td>110 000 Ft</td> </tr> <tr> <td rowspan="2">Memória</td> <td>16GB DDR4</td> <td>25 000 Ft</td> </tr> <tr> <td>32GB DDR4</td> <td>50 000 Ft</td> </tr> </table>

Élő példa - Rowspan (sorok egyesítése):

Kategória Termék Ár
Processzor Intel Core i7 120 000 Ft
Intel Core i5 80 000 Ft
AMD Ryzen 7 110 000 Ft
Memória 16GB DDR4 25 000 Ft
32GB DDR4 50 000 Ft

Rowspan figyelmeztetés

Fontos: Ha egy cella rowspan="3" attribútumot használ, akkor a következő 2 sorban egy cellával kevesebbet kell írni abban az oszlopban, mert az első cella már "lefoglalja" a helyet!

Colspan és Rowspan kombinálása EMELT SZINT

A legnagyobb rugalmasság érdekében kombinálhatod a colspan és rowspan attribútumokat:

HTML - Colspan + Rowspan
<table> <tr> <th colspan="3">Órarend - Informatika szak</th> </tr> <tr> <th>Idő</th> <th>Hétfő</th> <th>Kedd</th> </tr> <tr> <td>8:00 - 9:30</td> <td rowspan="2">Programozás<br>(3 óra)</td> <td>Webfejlesztés</td> </tr> <tr> <td>9:45 - 11:15</td> <td>Adatbázisok</td> </tr> <tr> <td>11:30 - 13:00</td> <td>Algoritmusok</td> <td rowspan="2">Projekt munka<br>(3 óra)</td> </tr> <tr> <td>13:15 - 14:45</td> <td>Hálózatok</td> </tr> </table>

Élő példa - Komplex táblázat (colspan + rowspan):

Órarend - Informatika szak
Idő Hétfő Kedd
8:00 - 9:30 Programozás
(3 óra)		 Webfejlesztés
9:45 - 11:15 Adatbázisok
11:30 - 13:00 Algoritmusok Projekt munka
(3 óra)
13:15 - 14:45 Hálózatok

Caption elem - Táblázat címe EMELT SZINT

A <caption> elem címet ad a táblázatnak. A <table> elem után, első elemként kell elhelyezni.

HTML - Caption elem
<table> <caption>Számítógép alkatrészek árlista - 2025. november</caption> <thead> <tr> <th>Termék</th> <th>Ár</th> </tr> </thead> <tbody> <tr> <td>Intel Core i7</td> <td>120 000 Ft</td> </tr> <tr> <td>AMD Ryzen 7</td> <td>110 000 Ft</td> </tr> </tbody> </table>

Élő példa - Caption használata:

Számítógép alkatrészek árlista - 2025. november
Termék Ár
Intel Core i7 120 000 Ft
AMD Ryzen 7 110 000 Ft

Caption előnyei

  • Akadálymentesség: Képernyőolvasók felolvassák a táblázat célját
  • SEO: Segíti a keresőmotorokat a táblázat tartalmának megértésében
  • Szemantika: Egyértelművé teszi a táblázat funkcióját
  • CSS stílusozás: Külön formázható a caption elem

Gyakorlati példák EMELT SZINT

Példa 1: Összehasonlító táblázat

HTML - Összehasonlító táblázat
<table> <caption>GPU összehasonlítás</caption> <thead> <tr> <th>Tulajdonság</th> <th>RTX 4070</th> <th>RTX 4080</th> <th>RTX 4090</th> </tr> </thead> <tbody> <tr> <th scope="row">CUDA magok</th> <td>5888</td> <td>9728</td> <td>16384</td> </tr> <tr> <th scope="row">Memória</th> <td>12 GB</td> <td>16 GB</td> <td>24 GB</td> </tr> <tr> <th scope="row">Ár</th> <td>250 000 Ft</td> <td>450 000 Ft</td> <td>750 000 Ft</td> </tr> </tbody> </table>

Példa 2: Számlázási táblázat

HTML - Számlázási táblázat
<table> <caption>Számla részletező - #2025-001</caption> <thead> <tr> <th>Megnevezés</th> <th>Mennyiség</th> <th>Egységár</th> <th>Összesen</th> </tr> </thead> <tbody> <tr> <td>Weboldal tervezés</td> <td>1 db</td> <td>200 000 Ft</td> <td>200 000 Ft</td> </tr> <tr> <td>Weboldal fejlesztés</td> <td>40 óra</td> <td>15 000 Ft</td> <td>600 000 Ft</td> </tr> <tr> <td>SEO optimalizálás</td> <td>1 db</td> <td>100 000 Ft</td> <td>100 000 Ft</td> </tr> </tbody> <tfoot> <tr> <th colspan="3">Végösszeg (Nettó)</th> <td><strong>900 000 Ft</strong></td> </tr> <tr> <th colspan="3">ÁFA (27%)</th> <td>243 000 Ft</td> </tr> <tr> <th colspan="3">Végösszeg (Bruttó)</th> <td><strong>1 143 000 Ft</strong></td> </tr> </tfoot> </table>

Akadálymentesség és legjobb gyakorlatok EMELT SZINT

Akadálymentességi ajánlások

  • ✅ Mindig használj <th> elemet a fejléc cellákhoz
  • ✅ Add meg a scope attribútumot a <th> elemeken
  • ✅ Használj <caption> elemet a táblázat céljának leírására
  • ✅ Strukturáld a táblázatot <thead>, <tbody>, <tfoot> elemekkel
  • ✅ Tartsd egyszerűnek - kerüld a túl sok beágyazást
  • ✅ CSS-sel biztosítsd a jó kontrasztot

Gyakori hibák

  • ❌ Layout célra használat: Soha ne használj táblázatot az oldal elrendezéséhez!
  • ❌ Scope nélküli th: A <th> elemeken mindig adj meg scope attribútumot
  • ❌ Eltérő cellaszám: Minden sorban ugyanannyi cellának kell lennie (colspan/rowspan figyelembevételével)
  • ❌ Üres cellák: Ha nincs adat, használj üres <td></td> elemet
  • ❌ Inline stílusok: Használj CSS-t a táblázat formázására, ne inline style-t!

CSS tippek táblázatokhoz EMELT SZINT

CSS - Táblázat alapstílusok
/* Összevont keretek */ table { border-collapse: collapse; width: 100%; } /* Cellák stílusozása */ th, td { border: 1px solid #ddd; padding: 12px; text-align: left; } /* Fejléc háttérszín */ th { background-color: #4CAF50; color: white; } /* Páros sorok háttérszíne (zebra csíkozás) */ tbody tr:nth-child(even) { background-color: #f2f2f2; } /* Hover effekt */ tbody tr:hover { background-color: #ddd; } /* Reszponzív táblázat */ @media screen and (max-width: 600px) { table { font-size: 14px; } th, td { padding: 8px; } }

Összefoglalás

Ebben a cikkben megismerkedtél a HTML táblázatok használatával:

  • Alapvető elemek: table, tr, td - táblázat, sor, cella
  • Fejlécek: th elem scope attribútummal az akadálymentességért
  • Struktúra: thead, tbody, tfoot szemantikus felosztás
  • Colspan: Oszlopok vízszintes kombinálása
  • Rowspan: Sorok függőleges kombinálása
  • Caption: Táblázat címe és leírása
  • Akadálymentesség: Scope, caption, szemantikus struktúra
  • Gyakorlati használat: Árlisták, órarendek, számlák, összehasonlítások

Példák a weboldalunkon

Nézd meg, hogyan használjuk a táblázatokat a gyakorlatban:

Következő lépések

Gyakorold az itt tanultakat: készíts egy órarendet rowspan használatával, egy árlistát colspan-nal, vagy egy összehasonlító táblázatot különböző termékekről!

Következő cikk: Képek beágyazása HTML-ben - Ismerd meg az img elemet, az alt attribútum fontosságát, a reszponzív képkezelést srcset-tel, valamint a modern picture elemet és lazy loading technikát!