Ugrás a fő tartalomhoz

HTML táblázatok alapjai

1. Mi a HTML táblázat?

A HTML táblázatok lehetővé teszik, hogy adatainkat sorokba és oszlopokba rendezzük. A táblázatok különösen hasznosak, amikor strukturált információkat szeretnénk megjeleníteni, mint például:

  • Órarendek
  • Árak listája
  • Statisztikai adatok
  • Összehasonlító információk

2. Táblázatok alapvető elemei

A táblázat váza

<table>
<!-- A táblázat tartalma ide kerül -->
</table>

Sorok létrehozása

<table>
<tr> <!-- table row = táblázat sor -->
<!-- A sor cellái ide kerülnek -->
</tr>
</table>

Cellák létrehozása

<table>
<tr>
<td>Első cella</td> <!-- table data = táblázat adat -->
<td>Második cella</td>
</tr>
</table>

3. Táblázat fejléc

Fejléc cellák

A <th> elem (table header = táblázat fejléc) fejléc cellákat hoz létre:

<table>
<tr>
<th>Név</th>
<th>Életkor</th>
</tr>
<tr>
<td>János</td>
<td>25</td>
</tr>
</table>

4. Táblázat szerkezeti elemei

Fejléc, törzs és lábléc

<table>
<thead> <!-- táblázat fejléc rész -->
<tr>
<th>Termék</th>
<th>Ár</th>
</tr>
</thead>
<tbody> <!-- táblázat törzs -->
<tr>
<td>Alma</td>
<td>300</td>
</tr>
</tbody>
<tfoot> <!-- táblázat lábléc -->
<tr>
<td>Összesen:</td>
<td>300</td>
</tr>
</tfoot>
</table>

5. Cellák összevonása

Oszlopok összevonása (colspan)

<table>
<tr>
<td colspan="2">Ez két oszlopot foglal el</td>
</tr>
<tr>
<td>Oszlop 1</td>
<td>Oszlop 2</td>
</tr>
</table>

Sorok összevonása (rowspan)

<table>
<tr>
<td rowspan="2">Ez két sort foglal el</td>
<td>Sor 1</td>
</tr>
<tr>
<td>Sor 2</td>
</tr>
</table>

6. Gyakorlati példa - Egyszerű órarend

<table>
<thead>
<tr>
<th>Idő</th>
<th>Hétfő</th>
<th>Kedd</th>
<th>Szerda</th>
</tr>
</thead>
<tbody>
<tr>
<td>8:00-8:45</td>
<td>Matematika</td>
<td>Magyar</td>
<td>Történelem</td>
</tr>
<tr>
<td>9:00-9:45</td>
<td colspan="2">Testnevelés</td>
<td>Fizika</td>
</tr>
</tbody>
</table>

7. Jó gyakorlatok

  1. Táblázat használata

    • Csak adatok strukturálására használd
    • Ne használd oldal elrendezéshez
    • Mindig használj fejléc cellákat a megfelelő oszlopokhoz
  2. Szerkezet

    • Tartsd logikus rendben a sorokat és oszlopokat
    • Használd a thead, tbody, tfoot elemeket a nagyobb táblázatoknál
    • Figyelj a cellák helyes számára minden sorban
  3. Tartalmi szempontok

    • Adj értelmes fejléceket az oszlopoknak
    • A fejlécek legyenek rövidek és érthetőek
    • Az adatok legyenek konzisztensek az oszlopokon belül

8. Gyakori hibák

  1. Szerkezeti hibák

    • Hiányzó záró tagek
    • Hiányzó cellák a sorokban
    • Helytelen összevonás használata
  2. Tervezési hibák

    • Túl komplex táblázatszerkezet
    • Táblázat használata oldal elrendezéshez
    • Fejlécek hiánya

9. Gyakorló feladatok

1. Alapszintű feladat

Készíts egy egyszerű, két oszlopos táblázatot a kedvenc ételeidről:

  • Első oszlop: Étel neve
  • Második oszlop: Származási ország

2. Haladó feladat

Készíts egy mini órarendet:

  • Legalább 3 nap
  • Legalább 4 időpont
  • Használj összevont cellákat, ahol szükséges

10. Ellenőrző kérdések

  1. Mi a különbség a <td> és <th> elemek között?
  2. Mire szolgál a colspan attribútum?
  3. Mire szolgál a rowspan attribútum?
  4. Mi a szerepe a <thead>, <tbody> és <tfoot> elemeknek?
  5. Milyen esetekben NEM ajánlott táblázatot használni?

Most, hogy megismerted a HTML táblázatok alapjait, később a CSS tananyagban megtanuljuk, hogyan lehet ezeket a táblázatokat szépen megformázni különböző stílusokkal.