A HTML táblázatokat sok mindenre használhatjuk, szerkeszthetünk táblázatokat könyveléshez, megjeleníthetünk képeket táblázat formájában, igazíthatunk elemeket, hogy szépen legyenek elrendezve.

Bár a mai technológiák segítségével könnyen rendezhetjük az elemeket oldalunkon, és a táblázatok használata mára már nem javasolt, mégis az egyik leggyakoribb felhasználásuk akkor tőrténik, amikor elemeket sorolunk fel, pl. termékeket, és a termékek magassága egyforma kell legyen, különben az oldalunk szétesik vagy amikor előre nem meghatározott számú oszlop kell megjelenjen az oldalon listázott elemek között. Erre egy példa amikor termékeknek különböző számú tulajdonságuk van (méret, szín, stb.) és azokat jelenítjük meg. Van ahol 4 oszlop lesz, és van ahol 8.

A táblázatoknak van egy olyan jó tulajdonsága, hogy az oszlopok méretét automatikusan módosítja, így adott méretű helyre képes betenni 2 oszlopot is, és 6-t is, vagy mégtöbbet, bár ez néha elég csúnya kinézetet eredményez.

A táblázatok használatát azért nem javasolják, mert az oldal betöltődéséhez a böngészőnk előszőr ki kell generálja a teljes táblázatot, és csak azután képes megjeleníteni az oldalt, ezért néha úgy érezzük, hogy várjuk az oldal betöltődését és nem történik semmi, aztán egyszer csak megjelenik minden. Mai rohanó világunkban a látogatók jobban szeretik, ha egyből megjelenik az oldalon valami, még akkor is ha az csak 1 szó, de legalább látják, hogy történik valami, ellenkező esetben akár el is hagyhatják az általunk készített weboldalt a látogatók.
Ezért a táblázatok használatát érdemes nagyon ritkára fogni. Egy másik probléma az is, hogy mivel automatikusan is számolja az oszlopok méretét, sokszor rengeteg problémát okozhat az oszlopok méretezése.

Tag neve: table, használata: <table></table>

Felépítésük: 2 részből állnak: fejléc (thead) és tartalom (tbody).

    <table>
        <thead>
        </thead>
        <tbody>
        </tbody>
    </table>


        

A thead részbe jár a táblázatok fejléce (melyet nem kötelező megadnunk), míg a tbody részbe a tartalom. A táblázatok felépítése úgy történik, hogy előbb meghatározzuk a sorok számát, pl. kettő. Egy sort a tr taggal tudunk megjeleníteni az alábbi módon:

    <table>
        <thead>
        </thead>
        <tbody>
            <tr></tr>
            <tr></tr>
        </tbody>
    </table>


        

Majd az adott sorokat fel kell osztanunk oszlopokra, jelölése: td. Legyen mondjuk szintén két oszlop.

    <table>
        <thead>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>


        

Ezekbe az oszlopokba amit beírunk, meg fog jelenni az oldalunkon, pl.
 

    <table>
        <thead>
        </thead>
        <tbody>
            <tr>
                <td>
                    Sor 1 Oszlop 1
                </td>
                <td>
                    Sor 1 Oszlop 2
                </td>
            </tr>
            <tr>
                <td>
                    Sor 2 Oszlop 1
                </td>
                <td>
                    Sor 2 Oszlop 2
                </td>
            </tr>
        </tbody>
    </table>


        

A fejlécek meghatározásához előbb szintén fel kell bontanunk egy vagy több sorra a fejlécet, majd az oszlopok megadása th tagokkal történik.
 

    <table>
        <thead>
            <tr>
                <th>
                    Oszlop 1
                </th>
                <th>
                    Oszlop 2
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Sor 1 Oszlop 1
                </td>
                <td>
                    Sor 1 Oszlop 2
                </td>
            </tr>
            <tr>
                <td>
                    Sor 2 Oszlop 1
                </td>
                <td>
                    Sor 2 Oszlop 2
                </td>
            </tr>
        </tbody>
    </table>


        

A table elem is rendelkezik néhány saját tulajdonsággal, mint pl:
 

Ezeket a tulajdonságokat a nyitó tagon belül kell beállítanunk, mint pl. az alábbi példában:

    <table bgcolor="white" cellpadding="0">
        <thead>
            <tr>
                <th>
                    Oszlop 1
                </th>
                <th>
                    Oszlop 2
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Sor 1 Oszlop 1
                </td>
                <td>
                    Sor 1 Oszlop 2
                </td>
            </tr>
            <tr>
                <td>
                    Sor 2 Oszlop 1
                </td>
                <td>
                    Sor 2 Oszlop 2
                </td>
            </tr>
        </tbody>
    </table>


        

Oszlopok összevonása

A táblázatok szerkesztésénél lehetőségünk nyilik egymás után levő oszlopok összevonására is. Amennyiben ugyanabban a sorban levő két oszlopot szeretnénk összevonni, a colspan tulajdonságot-, ha 2 különböző sorban levőt, akkor a rowspan tulajdonságot kell használnunk. Mindig az első oszlopnak állítjuk be az értéket, mellyel meghatározzuk, hogy hány oszlopnyi helyet kell elfoglaljon, így tovább annyival kevesebb td elemet kell tennünk a táblázatba. Pl.
 

    <table bgcolor="white" bordercolor="green">
        <thead>
            <tr>
                <th>
                    Oszlop 1
                </th>
                <th>
                    Oszlop 2
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">
                    Két ugyanabban a sorban levő oszlop összevonása
                </td>
            </tr>
            <tr>
                <td rowspan="2">
                    Két különböző sorban levő oszlop összevonása
                </td>
                <td>
                    Sor 2 Oszlop 2
                </td>
            </tr>
            <tr>
                <td>
                    Sor 3 Oszlop 2
                </td>
            </tr>
        </tbody>
    </table>