# 5. Táblázatok HTML-ben

2025. november 13. • 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:

- RAM összehasonlító táblázat - Thead, tbody struktúra különböző memória típusokhoz
- Háttértár táblázat - Colspan és rowspan használata SSD/HDD összehasonlításban
- Tápegység táblázat - Komplex táblázat wattok és hatékonyság összevetéséhez

#### 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!