HTML Táblázatok (Tables)

A táblázatok tökéletesek arra, hogy strukturált adatokat, például órarendeket, árlistákat vagy statisztikákat jelenítsünk meg. A HTML táblázatok felépítése elsőre bonyolultnak tűnhet, mert több különböző taget kell egymásba ágyaznunk, de a logika nagyon egyszerű, ha megérted a sorok és cellák rendszerét.

A Táblázat Alapvető Tagei

Egy táblázat felépítéséhez négy alapvető tagre lesz szükségünk:

• <table>: Ez a fő konténer. Ez jelzi a táblázat kezdetét és végét.
• <tr> (Table Row): Ez hoz létre egy vízszintes sort a táblázatban.
• <th> (Table Header): Ez egy fejléc cella. A böngésző alapértelmezésben vastagon és középre igazítva jeleníti meg a benne lévő szöveget. Általában a legelső sorban használjuk.
• <td> (Table Data): Ez egy normál adatcella. Ide kerül a tényleges tartalom.

Építsünk fel egy egyszerű táblázatot!

A HTML táblázatokat mindig soronként (vízszintesen) építjük fel. Először nyitunk egy sort (<tr>), majd beletesszük a cellákat (<td>), aztán lezárjuk a sort, és kezdjük a következőt.

<table border="1">
    <!-- Első sor: A Fejléc -->
    <tr>
        <th>Név</th>
        <th>Életkor</th>
        <th>Foglalkozás</th>
    </tr>
    
    <!-- Második sor: Első adatsor -->
    <tr>
        <td>Kovács Péter</td>
        <td>34</td>
        <td>Webfejlesztő</td>
    </tr>
    
    <!-- Harmadik sor: Második adatsor -->
    <tr>
        <td>Nagy Anna</td>
        <td>28</td>
        <td>Grafikus</td>
    </tr>
</table>

Megjegyzés: A fenti példában a border="1" attribútumot csak azért használtuk, hogy a böngésző rajzoljon egy egyszerű keretet a táblázat köré, így jobban látható az eredmény. A modern webfejlesztésben a kereteket és a dizájnt már kizárólag CSS-ből állítjuk be.

Egy kis webes történelem: Miért NE használj táblázatot dizájnra?

Ha visszamennénk az időben a 2000-es évek elejére, azt látnád, hogy szinte minden weboldal egy hatalmas, láthatatlan HTML táblázatba volt belezsúfolva. A fejlesztők a táblázat celláit használták arra, hogy a menüt balra, a tartalmat középre, a reklámokat pedig jobbra igazítsák.

Ma már ez szigorúan tilos!

A táblázatok kizárólag táblázatos adatok (számok, listák, statisztikák) megjelenítésére valók. Ha a weboldalad elrendezését (layout) táblázatokkal építed fel, az oldalad nem lesz reszponzív (nem fog jól megjelenni mobilon), a kódod átláthatatlan lesz, és a képernyőolvasó szoftverek teljesen összezavarodnak.

A weboldalak elrendezésére ma már a CSS modern eszközeit, a Flexboxot és a CSS Gridet használjuk. Ezekről a CSS kurzusunkban fogsz részletesen tanulni.