2. modul · HTML alapok · 8. lecke
A táblázat kétdimenziós adatok megjelenítésére való: menetrend, árlista, osztályzatok, termékösszehasonlítás. Megtanulod felépíteni, cellákat összevonni — és azt is, mire nem szabad használni.
td) és a fejléccellát (th).A táblázat akkor a helyes választás, ha az adataidnak két dimenziója van: minden értéknek van egy sora és egy oszlopa, és a kettő metszéspontja ad jelentést.
„Van értelme megkérdezni, hogy mi áll az X. sor és az Y. oszlop metszéspontjában?" Ha igen — táblázat. Ha nem, akkor valószínűleg lista kell (5. lecke), vagy egyszerűen csak elrendezés, amihez CSS való.
| Táblázat való ide | Ide nem |
|---|---|
| Órarend: hétfő × 3. óra | Menü: csak egy felsorolás → ul |
| Árlista: termék × méret | Képgaléria: nincs sor–oszlop jelentés → CSS Grid |
| Termék-összehasonlítás: modell × tulajdonság | Oldalelrendezés: fejléc, menü, tartalom → CSS |
| Osztályzatok: diák × tantárgy | Adatlap: csak név–érték párok → dl |
Három elem kell a legegyszerűbb táblázathoz. Figyelj a gondolkodás irányára: a táblázat sorokból épül, és minden sor cellákból áll. Oszlopokat sehol nem írsz le — azok abból keletkeznek, hogy minden sorban ugyanannyi cella van.
| Elem | Mit jelent? |
|---|---|
<table> | A táblázat kerete |
<tr> | Egy sor (table row) |
<td> | Egy adatcella (table data) |
<table>
<tr>
<td>Alma</td>
<td>450 Ft</td>
</tr>
<tr>
<td>Körte</td>
<td>690 Ft</td>
</tr>
</table>
Hogy tanulás közben lásd a cellahatárokat, a következő példákhoz odateszünk két sor stílust:
table { border-collapse: collapse; }
td, th { border: 1px solid #999; padding: 6px 10px; }
Most még ne foglalkozz vele — a 12. leckétől minden sorát megérted. Csak azért van ott, hogy a táblázat szerkezete látható legyen.
Ha az egyik sorban 3 cella van, a másikban 2, a táblázat „csorba" lesz: az utolsó oszlopban lyuk keletkezik. A böngésző nem szól — csak ferde lesz az eredmény. Minden sorban ugyanannyi cella legyen (kivéve, ha szándékosan vonsz össze cellákat — 6. és 7. pont).
A <th> (table header) olyan cella, ami
megnevezi a sorát vagy az oszlopát. Nem adat, hanem címke.
<table>
<tr>
<th>Gyümölcs</th>
<th>Ár</th>
<th>Készlet</th>
</tr>
<tr>
<td>Alma</td>
<td>450 Ft</td>
<td>24 kg</td>
</tr>
<tr>
<td>Körte</td>
<td>690 Ft</td>
<td>8 kg</td>
</tr>
</table>
table { border-collapse: collapse; }
td, th { border: 1px solid #999; padding: 6px 10px; }
th tartalmát alapból félkövérrel és
középre igazítva jeleníti meg. De nem ezért használjuk — hanem mert
jelentést hordoz.
Egy képernyőolvasó a th alapján tud tájékozódni. Amikor a felhasználó
a „690 Ft" cellára ér, a program bemondja: „Körte, Ár, 690 Ft" — vagyis a hozzá tartozó
fejléceket is. th nélkül csak annyit hallana: „690 Ft",
és fogalma sem lenne, mihez tartozik.
Ezért soha ne pótold félkövérrel a fejlécet:
<td><strong>Ár</strong></td> ugyanúgy néz ki,
de üres marad a jelentése.
A fejléc állhat oszlop élén (felül) és sor élén (bal oldalon) is.
A scope attribútummal megmondod, melyikről van szó:
<table>
<tr>
<th></th>
<th scope="col">Hétfő</th>
<th scope="col">Kedd</th>
</tr>
<tr>
<th scope="row">1. óra</th>
<td>Matek</td>
<td>Magyar</td>
</tr>
<tr>
<th scope="row">2. óra</th>
<td>Angol</td>
<td>Testnevelés</td>
</tr>
</table>
table { border-collapse: collapse; }
td, th { border: 1px solid #999; padding: 6px 10px; }
scope a képernyőn nem látszik, de a
felolvasó programnak nélkülözhetetlen.
A <caption> a táblázat saját címe. Mindig a
<table> legelső gyereke, még a sorok előtt.
<table>
<caption>Gyümölcsárak – 2024. május</caption>
<tr>
<th scope="col">Gyümölcs</th>
<th scope="col">Ár</th>
</tr>
<tr>
<td>Alma</td>
<td>450 Ft</td>
</tr>
</table>
table { border-collapse: collapse; }
td, th { border: 1px solid #999; padding: 6px 10px; }
<h3>-mal: a caption
összetartozik a táblázattal, egy külön címsor nem.
Mindig, ha az oldalon több táblázat van, vagy ha a táblázat tartalma nem derül ki
magától a környező szövegből. Egy jó caption megmondja,
miről szól és mikorra vonatkozik az adat.
Hosszabb táblázatnál a sorokat három csoportba rendezheted:
| Elem | Mit tartalmaz? |
|---|---|
<thead> | A fejlécsor(ok) — az oszlopnevek |
<tbody> | Az adatsorok — a táblázat törzse |
<tfoot> | A lábsor(ok) — összegzés, végösszeg |
<table>
<caption>Havi kiadások</caption>
<thead>
<tr>
<th scope="col">Tétel</th>
<th scope="col">Összeg</th>
</tr>
</thead>
<tbody>
<tr><td>Albérlet</td><td>120 000 Ft</td></tr>
<tr><td>Rezsi</td><td>28 000 Ft</td></tr>
<tr><td>Bérlet</td><td>9 500 Ft</td></tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Összesen</th>
<td>157 500 Ft</td>
</tr>
</tfoot>
</table>
table { border-collapse: collapse; }
td, th { border: 1px solid #999; padding: 6px 10px; }
A kódban a sorrend thead → tbody →
tfoot. (Régen a tfoot-ot a
tbody elé kellett írni — ma már nem, és a böngésző
mindenképp alulra rakja.)
A colspan attribútummal egy cella több oszlopon át
nyúlik. Az értéke azt mondja meg, hány oszlopnyi helyet foglal el.
<td>-t írsz.
Ha egy cella colspan="2", akkor abban a sorban
eggyel kevesebb <td>-t írsz. Az összevont cella
„elfogyasztja" a szomszédja helyét. Ezt kezdők folyton elrontják: otthagyják a régi cellát is,
és a táblázat kilóg.
<table>
<tr>
<th colspan="3">Heti menü</th>
</tr>
<tr>
<th scope="col">Nap</th>
<th scope="col">Leves</th>
<th scope="col">Főétel</th>
</tr>
<tr>
<td>Hétfő</td>
<td>Gulyás</td>
<td>Rakott krumpli</td>
</tr>
<tr>
<td>Kedd</td>
<td colspan="2">Zárva</td>
</tr>
</table>
table { border-collapse: collapse; }
td, th { border: 1px solid #999; padding: 6px 10px; }
A rowspan ugyanaz, csak lefelé: a cella több soron
keresztül nyúlik.
A rowspan attribútumnál nem abban a sorban kell kevesebb cella, hanem a
következő sor(ok)ban. A fentről lenyúló cella ugyanis már „elfoglalja" az alatta
lévő sor első helyét — oda tehát nem írsz újabb cellát.
<table>
<tr>
<th scope="col">Óra</th>
<th scope="col">Tantárgy</th>
<th scope="col">Terem</th>
</tr>
<tr>
<td>1.</td>
<td rowspan="2">Informatika</td>
<td>204</td>
</tr>
<tr>
<td>2.</td>
<td>204</td>
</tr>
<tr>
<td>3.</td>
<td>Matematika</td>
<td>110</td>
</tr>
</table>
table { border-collapse: collapse; }
td, th { border: 1px solid #999; padding: 6px 10px; }
A colspan és a rowspan ugyanazon a cellán is
használható, és egy táblázaton belül szabadon keverhetők.
<table>
<caption>Órarend – felső tagozat</caption>
<tr>
<th></th>
<th scope="col">Hétfő</th>
<th scope="col">Kedd</th>
<th scope="col">Szerda</th>
</tr>
<tr>
<th scope="row">1.</th>
<td rowspan="2">Informatika<br>(dupla óra)</td>
<td>Magyar</td>
<td>Matek</td>
</tr>
<tr>
<th scope="row">2.</th>
<td colspan="2">Osztályfőnöki</td>
</tr>
<tr>
<th scope="row">3.</th>
<td>Testnevelés</td>
<td>Angol</td>
<td>Rajz</td>
</tr>
</table>
table { border-collapse: collapse; }
td, th { border: 1px solid #999; padding: 6px 10px;
text-align: center; }
Bonyolult táblázatnál rajzold fel papírra a rácsot, satírozd be az összevont cellákat, és számold meg soronként, hány cellát kell leírnod. Így tíz perc alatt megvan, amivel különben fél órát szenvednél.
A 2000-es évek elején nem létezett rendes elrendezési eszköz a weben, ezért mindent táblázatba raktak: a fejlécet, a menüt, a tartalmat, a lábjegyzetet. Egy oldal gyakran több, egymásba ágyazott táblázatból állt.
<table>
<tr>
<td colspan="2">FEJLÉC</td>
</tr>
<tr>
<td>MENÜ</td>
<td>TARTALOM</td>
</tr>
</table>
<div class="fejlec">FEJLÉC</div>
<div class="menu">MENÜ</div>
<div class="tartalom">TARTALOM</div>
<!-- az elrendezést a CSS adja:
Flexbox (20. lecke) vagy
Grid (21. lecke) -->
| Miért rossz? | Következmény |
|---|---|
| Hazudik a jelentésről | A képernyőolvasó táblázatot mond be — „táblázat, 2 sor, 2 oszlop" —, pedig ez csak elrendezés. |
| Nem reszponzív | A táblázat merev. Telefonon nem tud egymás alá rendeződni; oldalra kell görgetni. |
| Karbantarthatatlan | Egy apró változtatáshoz az egész cellaszerkezetet át kell írni. |
| Rengeteg felesleges kód | Ugyanaz az oldal két-háromszor annyi sorból áll. |
Táblázatot csak adathoz. Ha azért nyúlnál hozzá, hogy „dolgok egymás mellett legyenek", az elrendezés — és arra a CSS való (Flexbox, Grid). Ha mégis táblázatot látsz egy régi oldalon elrendezésre, most már tudod, miért.
border ATTRIBÚTUM?
Régi példákban látni fogsz ilyet: <table border="1">.
Ez működik, de elavult — a megjelenés CSS-re tartozik. Ugyanígy elavult a
cellpadding, cellspacing,
align és bgcolor is.
Ne használd őket.
| Hiba | Mi történik, és mi a megoldás? |
|---|---|
colspan="2", de a régi cella is ott maradt |
A sor kilóg a táblázatból. Összevonásnál vegyél ki annyi cellát, amennyit összevontál. |
rowspan után túl sok cella a következő sorban |
Ugyanez lefelé: a fentről lenyúló cella már elfoglalta a helyet. |
| Egyenetlen cellaszám a sorokban | Lyukas táblázat. Számold meg soronként. |
<td><strong> fejléc helyett |
Ugyanúgy néz ki, de nincs jelentése. Használj <th>-t. |
A <caption> nem az első elem |
Érvénytelen. A caption a table első gyereke. |
<td> közvetlenül a <table>-ben |
Minden cellának sorban kell lennie: table → tr → td. |
| Táblázat elrendezéshez | Hazudik a jelentésről, és nem reszponzív. Használj CSS-t. |
border="1" a kerethez |
Elavult attribútum. A keret CSS-sel: border tulajdonság. |
Előbb válaszolj magadban, csak utána nézd meg a megoldást.
1. Képgalériát készítesz, ahol a képeket 3×3-as rácsban akarod elhelyezni. Táblázat a helyes megoldás?
Nem. Ott nincs sor–oszlop jelentés: a 2. sor 3. képének nincs köze ahhoz, hogy „második sor" és „harmadik oszlop". Ez elrendezés, amire a CSS Grid való (21. lecke). A képek maguk egy listába kerülnek.
2. Miért nem elég félkövérré tenni a fejléceket <td><strong>-gal?
Mert csak a megjelenés lesz ugyanaz, a jelentés nem. A th alapján tudja a képernyőolvasó bemondani egy cellánál, hogy melyik sorhoz és oszlophoz tartozik. Félkövér td-nél ez az információ nem létezik.
3. Egy háromoszlopos táblázat egyik sorában az első cella colspan="2". Hány <td>-t írsz abba a sorba?
Kettőt: az összevontat (ami két oszlopnyi helyet foglal) és még egyet a harmadik oszlopra. Összesen ugyanis három oszlopnyi helyet kell kitölteni.
4. Egy cellán rowspan="3" van. Melyik sorokban kell kevesebb cellát írni?
A következő kettőben — mindkettőben eggyel kevesebbet, mert azoknak a soroknak azt a pozícióját a fentről lenyúló cella foglalja el. Abban a sorban, ahol a cella kezdődik, a szokásos számú cella van.
5. Hova kerül a <caption>, és mi a különbség egy fölé tett <h3>-hoz képest?
A <table> első gyerekeként, még a sorok előtt. A caption a táblázathoz tartozik: a képernyőolvasó a táblázattal együtt közli. Egy külön h3 csak egy címsor a közelben — a kettő közti kapcsolat sehol nincs rögzítve.
6. Mit jelent a scope="row"?
Hogy az adott th a sora fejléce (tehát bal oldalt áll, és az egész sorra vonatkozik) — szemben a scope="col"-lal, ami az oszlop fejléce. A képernyőn nem látszik, a felolvasó programoknak szól.
7. Egy 2003-as weboldal forrásában egymásba ágyazott táblázatokat látsz. Mire használták őket, és ma mi a helyette?
Oldalelrendezésre — fejléc, menü, tartalom elhelyezésére —, mert akkor még nem volt erre jó eszköz. Ma erre a CSS Flexbox (20. lecke) és Grid (21. lecke) való; a táblázat kizárólag adathoz.
table → tr (sor) → td (cella). Oszlopokat nem írsz le — azok a cellák számából adódnak.<th> = fejléccella, jelentéssel. Soha ne pótold félkövér td-vel.scope="col" / scope="row": melyik irányra vonatkozik a fejléc.<caption>: a táblázat saját címe, a table első gyereke.thead / tbody / tfoot: fej, törzs, láb — nyomtatásnál és stílusozásnál hasznos.colspan = hány oszlopnyi széles · rowspan = hány sornyi magas.colspan esetén ugyanabban a sorban, rowspan esetén a következőkben.border, cellpadding, bgcolor attribútumok elavultak.