HTML táblázat készítése (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ése (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>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

Eredmény

Első címsor Második címsor
Első cella Második cella

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

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;
      }
Code language: CSS (css)

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>
Code language: HTML, XML (xml)

Eredmény

Első címsor Második címsor
Első cella Második cella

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

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;
   }
Code language: CSS (css)

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>
Code language: HTML, XML (xml)

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>Kozma</td>
    <td>László</td>
    <td></td>
  </tr>
  <tr>
    <td>Kozma</td>
    <td>Petra</td>
    <td>Vivien</td>
  </tr>
</table>
Code language: HTML, XML (xml)

Eredmény

Vezetéknév Keresztnév
Kozma László
Kozma Petra Vivien

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

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>
Code language: HTML, XML (xml)

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>Kozma</td>
    <td>Kozma</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>
Code language: HTML, XML (xml)

Eredmény

Vezetéknév Kozma Kozma
Keresztnév László Petra
Vivien

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

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>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

Eredmény

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

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

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>
Code language: HTML, XML (xml)

Eredmény

Első címsor Második címsor
Első cella Második cella

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!