Táblázatok használata

Táblázatokat gyakran használunk a szövegszerkesztési feladatok során is, hogy az adatokat átlátható módon, srokoba és oszlopokba rendezveprezentáljuk. A weblapkészítés során a táblázatokat gyakran arra is használták, hogy az oldal struktúráját ezzel alakítsák ki. Például a táblázat első sora volt a fejléc, a második sor két cellából állt, a bal oldali tartalmazta a menüt, a jobb oldali a tartalmat, és így tovább. A stíluslapokban rejlő lehetőségek ma már nem indokolják, hogy az oldal struktúrájának kialakítására, pusztán prezentációs célokból használjuk a táblázatokat, ez a megoldás ma már nem megfelelő. Vannak azonban olyan esetek, amikor természetesen nagyon előnyös a táblázatok használata.

Nézzük akkor a lehetőségeket sorjában, konkrét példákon bemutatva, csak ezek után térünk ki az egyes tageknél használt speciális attribútumok szerepére és használati módjára.

Példa egy egyszerű táblázat felépítésre – <table>, <tr>, <th>, <td>

Mielőtt az egyes tagek szerepét részletesebben bemutatjuk, nézzünk egy egyszerűbb példát, amin jól látszik, hogy ennek a négy tagnek mi a szerepe a táblázat kialakításában!

A táblázat megadása a <table> tag használatával lehetséges. A <table> és </table> tageken belül a <tr> és </tr> elemek között adhatjuk meg a táblázat sorait. A <td> elem a sorokon belüli adatcellák létrehozására szolgál. Az egyes sorok/oszlopok fejléceit a <th> tagek között adhatjuk meg, amelyek majd kiemelve (félkövér) jelennek meg alapesetben.

<table>
<!-- ez lesz az első sor a fejléc elemekkel-->
 <tr>
    <th>Ország</th>
    <th>Főváros</th>
</tr>
<!-- itt van az első sor vége-->
<!-- itt kezdődik a második sor -->
<tr>
    <td>Afganisztán</td>
    <td>Kabul</td>
</tr>
<!-- ez a harmadik sor -->
<tr>
    <td>Albánia</td>
    <td>Tirana</td>
</tr>
<tr>
    <td>Algéria</td>
    <td>Algír</td>
</tr>
</table>

Vissza a tartalomjegyzékhez

Táblázat fejlécek irányának beállítása (scope), a táblázat felirata (<caption>)

Fejlesszük tovább az előző táblázatunkat! Legyen egy újabb oszlopa is, amelyben az ország népességét is feltüntetjük.

Adjunk egy feliratot a táblázatnak, amely jól leírja a tartalmát. Ezt a <caption> taggek tudjuk megtenni. Ez az elem közvetlenül a <table> elem után kell, hogy álljon, vagyis a <table> elem első gyereke kell, hogy legyen.

<table>
<caption>Országok fővárosa és népessége</caption>
<!-- táblázat kódjának folytatása -->

Mivel most egy országhoz több adat is tartozik, növelhetnénk a táblázat áttekinthetőségét, ha magukat az országneveket tartalmazó cellákat is fejléccellaként adnánk meg.

Vagyis a táblázatunk így jelenne meg:

<table border="1">
<caption>Országok fővárosa és népessége</caption>
 <tr>
    <th scope="col">Ország</th>
    <th scope="col">Főváros</th>
    <th scope="col">Népesség</th>
</tr>
<tr>
    <th scope="row">Afganisztán</th>
    <td>Kabul</td>
    <td>25 500 100 fő</td>
</tr>
<tr>
    <th scope="row">Albánia</th>
    <td>Tirana</td>
    <td>2 831 741 fő</td>
</tr>
<tr>
    <th scope="row">Algéria</th>
    <td>Algír</td>
    <td>37 100 000 fő</td>
</tr>
</table>

Vissza a tartalomjegyzékhez

A táblázat struktúrájának precízebb megadása (<thead><tfoot><tbody>)

A konkrét példánkban csak egy pár sorból álló táblázatot adtunk meg, de ha a világ összes országának adatait felsorolnánk, akkor már egy hatalmas táblázattal lenne dolgunk. Egy ilyen, hosszabb táblázat esetén már érdemes kifinomultabb struktúrát alkalmaznunk.

A táblázat sorait fejlécekbe <thead>, láblécekbe <tfoot>, illetve törzsbe <tbody> szervezhetjük. Ez a fajta felosztás lehetővé teszi a böngészőprogramoknak, hogy a táblázat törzsét különválasszák a fejléctől és lábléctől. Ennek előnye például az lehet, hogy hosszabb táblázatok nyomtatásánál a fejléc és lábléc elemek minden kinyomtatott oldalon szerepelni fognak (amennyiben a böngésző támogatja ezt a funkciót).

Először a fejlécet (<thead>) kell megadnunk, azt követően pedig a láblécet (<tfoot>). Ezután adhatjuk meg a táblázat törzsét (<tbody>).

<table border="1">
<caption>Országok fővárosa és népessége</caption>
<thead>
 <tr>
    <th scope="col">Ország</th>
    <th scope="col">Főváros</th>
    <th scope="col">Népesség</th>
</tr>
</thead>
<tfoot>
<tr>
     <td>Forrás: Wikipedia</td>
     <td></td>
     <td></td>
<!-- Itt igazából egy cellára lenne szükség, így ezeket össze kellene vonni. Erre nézünk példát később. -->
</tr>
</tfoot>
<tbody>
<tr>
    <th scope="row">Afganisztán</th>
    <td>Kabul</td>
    <td>25 500 100 fő</td>
</tr>
<tr>
    <th scope="row">Albánia</th>
    <td>Tirana</td>
    <td>2 831 741 fő</td>
</tr>
<tr>
    <th scope="row">Algéria</th>
    <td>Algír</td>
    <td>37 100 000 fő</td>
</tr>
</tbody>
</table>

A fenti példa láblécében most 3 cellát adtunk meg, igazából szerencsésebb lett volna egy olyan cella, ami három cella szélességű, vagyis össze kellett volna vonni a cellákat.

Erre nézünk példákat a következőkben.

Vissza a tartalomjegyzékhez

Cellák összevonása (colspan és rowspan paraméter, <colgroup>)

Az előző példában is láthattuk, hogy szükség lehet arra, hogy a szomszédos cellákat vízszintesen, vagy függőlegesen (vagy mindkét módon) összevonjuk. A vízszintes összevonáshoz a colspan, a függőlegeshez a rowspan paramétert kell használnunk. Ezt egyaránt alkalmazhatjuk a <td> és <th> tagtag-k sem.lendő -t kellett a cellába írni. A 9-es, 10-es Explorer esetében nem tudom, mi a helyzet, most épp nincs kéznél eknél is. Ha összevontunk cellákat, akkor a táblázatban már csak azokat a cellákat kell szerepeltetni, amelyeket nem érintett az összevonás.

Cellák összevonása vízszintesen (colspan)

<table border="1">
 <tr>
  <th colspan="2">Név</th>
  <th colspan="2">Telefonszám</th>
 </tr>
 <tr>
  <th>Vezetéknév</th>
  <th>Keresztnév</th>
  <th>Körzetszám</th>
  <th>Kapcsolási szám</th>
 </tr>
 <tr>
  <td>Kovács</td>
  <td>Viktor</td>
  <td>45</td>
  <td>555465</td>
 </tr>
</table>

Láthatjuk, hogy a fenti kód is látszólag a megfelelő eredményt adja, de érdemes lehet még precízebben megadni a táblázatunkat. Ennek később (pl. a táblázatok stíluslappal való szépítése) nagy hasznát vesszük. Ehhez azonban meg kell ismerkednünk a <col>, illetve <colgroup> taggel.

A <colgroup> taggel oszlopcsoportokat adhatunk meg, és azok tulajdonságait is beállíthatjuk. A <colgroup> tagnek a <caption> tag után, a <thead> tag előtt kell szerepelnie. A <colgroup> tagen belül szerepelhet a <col> tag is (ha a colgroup elemnek nincs span attribútuma), amely az egyes oszlopokba tartozó cellák tulajdonságait írja le.

Nézzük, hogy a példánk hogyan változik a <col> és <colgroup> használatával! A lehetőségek bemutatása miatt a korábbi táblázatot még egy oszloppal (Nem) kiegészítettük.

<table border="1">
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<col>
 <tr>
  <th colspan="2">Név</th>
  <th colspan="2">Telefonszám</th>
  <th>Nem</th>
 </tr>
 <tr>
  <th>Vezetéknév</th>
  <th>Keresztnév</th>
  <th>Körzetszám</th>
  <th>Kapcsolási szám</th>
  <th></th>
 </tr>
 <tr>
  <td>Kovács</td>
  <td>Viktor</td>
  <td>45</td>
  <td>555465</td>
  <td>Férfi</td>
 </tr>
</table>

Fejléccellák akadálymentesítése oszlopcsoportok esetén

Azáltal, hogy oszlopcsoportot használtunk, és az összevont cellákban fejléccellák is szerepelnek, a <th> elem scope attribútumát is ennek megfelelően kell beállítani. Az oszlopcsoportok esetén a scope="colgroup" paramétert kell beállítani, a sima oszlopokban viszont marad a scope="col" paraméter megadása.

<table border="1">
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<col>
 <tr>
  <th scope="colgroup" colspan="2">Név</th>
  <th scope="colgroup" colspan="2">Telefonszám</th>
  <th scope="col">Nem</th>
 </tr>
 <tr>
  <th scope="col">Vezetéknév</th>
  <th scope="col">Keresztnév</th>
  <th scope="col">Körzetszám</th>
  <th scope="col">Kapcsolási szám</th>
  <th></th>
 </tr>
 <tr>
  <td>Kovács</td>
  <td>Viktor</td>
  <td>45</td>
  <td>555465</td>
  <td>Férfi</td>
 </tr>
</table>

Most nézzünk egy olyan példát, ahol függőeleges összevonás történt!

Cellák összevonása függőlegesen (rowspan)

<table border="1">
 <tr>
  <th scope="row" rowspan="3">Név</th>
  <th scope="row">Titulus</th>
  <td>Dr.</td>
 </tr>  
<tr>
   <th scope="row">Vezetéknév</th>
   <td>Kovács</td>
 </tr>
<tr>
   <th scope="row">Keresztnév</th>
   <td>Henrik</td>
 </tr> 
</table>

Cellák összevonása (gyakorlat)

Gyakorlat

Az alábbi interaktív példában egy 4×4-es táblázatot helyeztünk el. Módosítsd a kódot a megfelelő összevonásokkal, hogy az alábbi felosztásban 9 cella maradjon. Az ábrának megfelelően sorszámozd a cellákat!

A kép (nagyobb változata) külön ablakban is megtekinthető.colrowspanfeladat_full.jpgFeladat a cella összevonások gyakorlásához

Interaktív példa

<!DOCTYPE HTML> <html lang="hu"> <head> <meta charset="utf-8"> <title>4x4-es táblázat</title> </head> <body> <table border="1"> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>

A következőkben újra áttekintjük a bemutatott tageket, a használható paraméterek felsorolásával és magyarázatával.

Vissza a tartalomjegyzékhez