HTML táblázat

Az HTML táblázatok olyan elemek, amelyek segítségével strukturált adatokat jeleníthetünk meg az oldalon. A táblázatok sorai és oszlopai segítségével rendezhetjük az adatokat, és áttekinthetőbbé tehetjük azokat.

Az HTML táblázatokat a <table> elemmel hozhatjuk létre. A táblázat sorait a <tr> elemekkel, az oszlopait pedig a <td> elemekkel jelöljük. A <td> elemeket a <tr> elemeken belül helyezzük el. Példa az HTML táblázat létrehozására:

<table>
  <tr>
    <td>Cím 1</td>
    <td>Cím 2</td>
  </tr>
  <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>
</table>

Az HTML táblázatokat számos módon formázhatjuk a CSS segítségével. Például megadhatjuk a táblázat szélességét, a táblázat szegélyének stílusát, a táblázat celláinak színét, stb. Példa a táblázat formázására a CSS segítségével:

table {
  width: 400px; /* Táblázat szélessége 400 pixel lesz */
  border: 1px solid black; /* Táblázat szegélye fekete lesz */
}

td {
  background-color: lightblue; /* Táblázat celláinak háttérszíne kék lesz */
  text-align: center; /* Táblázat celláinak szövege középre lesz igazítva */
}

Az HTML táblázatokban számos más elemet is használhatunk, például a <th> elemet, amely a táblázat fejlécének szolgál, a <caption> elemet, amely a táblázat feliratát tartalmazza, stb.

Az HTML táblázatok border-collapse attribútumával megadhatjuk, hogy a táblázat celláinak szegélyei összeolvadjanak-e, vagy különállóan jelenjenek meg.

Az border-collapse attribútum két értéke lehet:

• collapse: ha az border-collapse attribútum értéke collapse, akkor a táblázat celláinak szegélyei összeolvadnak.
• separate: ha az border-collapse attribútum értéke separate, akkor a táblázat celláinak szegélyei különállóan jelennek meg.