HTML táblázat készítés (HTML table)

Tanuld meg a HTML táblázat készítését ingyen ebből a cikkből. A HTML táblázatok lehetővé teszik, hogy az adatainkat sorokba és oszlopokba rendezzük és ezáltal egy sokkal átláthatóbb adatszerkezetet kapjunk.

HTML táblázat készítés (HTML table) cikk nyitóképe

HTML táblázat készítés (HTML table)

A HTML táblázatok lehetővé teszik, hogy az adatainkat sorokba és oszlopokba rendezzük és ezáltal egy sokkal átláthatóbb adatszerkezetet kapjunk. A táblákat ugyebár senkinek sem kell bemutatni, mindenki találkozott már táblázatokkal.

HTML táblázat felépítése

Először is fontos megmondanunk a böngészők számára, hogy itt egy HTML táblázat fog következni. Ezt egy <table> nyitó és egy </table> zárópárral tehetjük meg.

<table>
</table>

A kettő közé fogjuk írni a táblázat többi elemét, például az oszlopait, sorait, vagy a tartalmat.

A <tr></tr> párossal létrehozhatunk egy konkrét sort a táblázatunkban.
Ha szeretnénk ebbe a sorba cellákat elhelyezni, akkor használnunk kell a <td> elemet. Így néz ki egy konkrét sor:

<table>
    <tr>
        <td>Első cella</td>
        <td>Második cella</td>
    </tr>
</table>

HTML táblázat címsor

Az előző példában <td>-t használtunk, de használhatunk a táblázat első sorában <th>-t is, amely egy táblázat címsort takar. Alapértelmezetten félkövéren jelenik meg. Kiemelkedik a többi sortól, jól látszik, hogy nem adatot tartalmaz, hanem csak az adott sor vagy oszlop tartalmát írja le.

Példa

HTML kód

<table>
    <tr>
        <th>Első címsor</th>
        <th>Második címsor</th>
    </tr>

<tr>
        <td>Első cella</td>
        <td>Második cella</td>
    </tr>
</table>

Eredmény

Első címsorMásodik címsor
Első cellaMásodik cella

A fent látható példában meghatároztam, hogy ez egy táblázat lesz a <table> elemmel. Majd létrehoztam egy sort a <tr>-el, amibe létrehoztam két címsor cellát a <th>-val. Majd bezártam az első sort a </tr>-el. Majd nyitottam egy új sort a <tr>-el, amibe létrehoztam két cellát a <td>-vel. Majd bezártam az új sort a </tr>-el és bezártam az egész táblázatot is a </table>-el.

A <td> elemek tartalmazhatnak további HTML elemeket is (pl.: h1), vagy akár képeket, listákat stb.

Keret, szegély hozzáadása a HTML táblázathoz

Látható a fenti példában, hogy alapértelmezett esetben a táblázat körül nincs keret, szegély. A megszokott táblázatokban viszont szokott lenni, ezt egy nagyon egyszerű kódrészlettel érhetjük el.

Keret, szegély kód:

table, th, td, tr 
      {
          border: 1px solid black;
      }

Példa

HTML kód

<!DOCTYPE html>
<html>

<head>
    <style>
       table, th, td, tr {
          border: 1px solid black;
}
    </style>
</head>

<body>
<table>
    <tr>
        <th>Első címsor</th>
        <th>Második címsor</th>
    </tr>

<tr>
        <td>Első cella</td>
        <td>Második cella</td>
    </tr>
</table>
</body>
</html>

Eredmény

Első címsorMásodik címsor
Első cellaMásodik cella

Dupla vonalas szegély megszüntetése

Ha a szegély dupla vonallal jelenik meg és ez téged zavar, akkor ezzel a kóddal könnyedén összevonhatod a szegélyeket.

table, th, td, tr 
   {
        border: 1px solid black;
        border-collapse: collapse;
   }

A border: 1px solid black; sort már előzőleg megadtuk, ezzel érjük el a keretet. A border-collapse: collapse; intézi el a dupla szegélyvonal összevonását.

Táblázat oszlopainak összevonása

Van olyan eset amikor szükséges lehet egy táblázaton belül két oszlopot összevonni, ezt nagyon egyszerűen megtehetjük a HTML nyelvben az alábbi utasítással:

<th colspan="2"></th>

Fontos, hogy akár 3-4, sőt még több oszlopot is összevonhatunk, csak cseréljük ki a “colspan=” után szereplő számot.

Példa

HTML kód

<table>
  <tr>
    <th>Vezetéknév</th>
    <th colspan="2">Keresztnév</th>
  </tr>
  <tr>
    <td>Cellár</td>
    <td>László</td>
    <td></td>
  </tr>
<tr>
    <td>Kádár</td>
    <td>Petra</td>
    <td>Vivien</td>
  </tr>
</table>

Eredmény

VezetéknévKeresztnév
CellárLászló
KádárPetraVivien

A fent látható példán láthatjuk, hogy összevontuk a keresztnév mezőt, mivel van olyan eset, amikor valakinek két keresztneve van. Úgy kell alkalmazni ezt, hogy arra a <th>-ra vagy <td>-re, amelyet szeretnénk összevonni más cellával, arra alkalmazzuk a colspan tulajdonságot.

Táblázat sorainak összevonása

Olyan eset is létezik, amikor nem két oszlopot, hanem két sort kell összevonni, erre is van megoldás a HTML nyelvben.

<th rowspan="2"></th>

Fontos, hogy akár 3-4, sőt még több sort is összevonhatunk, csak cseréljük ki a “rowspan=” után szereplő számot.

Példa

HTML kód

<table>
  <tr>
    <th>Vezetéknév</th>
    <td>Cellár</td>
    <td>Kádár</td>
  </tr>
  <tr>
    <th rowspan="2">Keresztnév</th>
    <td>László</td>
    <td>Petra</td>
  </tr>
<tr>
    <td></td>
    <td>Vivien</td>
  </tr>
</table>

Eredmény

VezetéknévCellárKádár
KeresztnévLászlóPetra
Vivien

A fent látható példán láthatjuk, hogy összevontunk két keresztnév mezőt, mivel van olyan eset, amikor valakinek két keresztneve van. Úgy kell alkalmazni ezt, hogy arra a <th>-ra vagy <td>-re, amelyet szeretnénk összevonni más cellával, arra alkalmazzuk a rowspan tulajdonságot.

Táblázat elnevezése, feliratozása

Van lehetőségünk a HTML nyelvben arra is, hogy elnevezzük a táblázatot, azaz címet adjunk neki. Így a látogató a címből könnyedén kiderítheti, hogy miről is szól a táblázat.

Szintaktika

<caption>Táblázat címe</caption>

Példa

HTML kód

  <caption>Táblázat címe</caption>
<table>
    <tr>
        <th>Első címsor</th>
        <th>Második címsor</th>
    </tr>

<tr>
        <td>Első cella</td>
        <td>Második cella</td>
    </tr>
</table>

Eredmény

Táblázat címe
Első címsorMásodik címsor
Első cellaMásodik cella

Táblázat háttérszíne

A táblázaton bármilyen stílusbeállításokat elvégezhetünk. Például a háttérszínét is meghatározhatjuk.

Példa

HTML kód

<table style="background-color:yellow;">
    <tr>
        <th>Első címsor</th>
        <th>Második címsor</th>
    </tr>

<tr>
        <td>Első cella</td>
        <td>Második cella</td>
    </tr>
</table>

Eredmény

Első címsorMásodik címsor
Első cellaMásodik cella