Táblázatok használata

<table> – Táblázat megadása

Mire használjuk?

A <table> és </table> tag-ek között kell elhelyeznünk a táblázat tartalmát.

A tag paraméterei:

• globális attribútumok
• border: szegélyt jeleníthetünk meg a táblázaton. Az értéke 1, ha szeretnénk szegélyt megjeleníteni, és üres, ha nem.
• sortable: logikai attribútum. Ha szerepeltetjük, akkor a táblázat adatait sorrendbe rendezhetjük a fejlécek szerint (ha a böngésző támogatja ezt a funkciót). A tananyag írásakor ezt még nem tudtuk tesztelni.

<table border="1" sortable>
 <tr>
    <th>Ország</th>
    <th>Főváros</th>
</tr>
<tr>
    <td>Afganisztán</td>
    <td>Kabul</td>
</tr>
<tr>
    <td>Albánia</td>
    <td>Tirana</td>
</tr>
<tr>
    <td>Algéria</td>
    <td>Algír</td>
</tr>
</table>

<tr> – Táblázat sora

Mire használjuk?

A táblázat sorának megadására. A <thead>, <tbody>, <tfoot> és <table> tagek gyerekelemeként használható. A <tr> elem gyerekelemei pedig <th> és <td> elemek lehetnek.

A tag paraméterei: globális attribútumok

<td> – adatcella

Mire használjuk?

Táblázat adatcelláinak megadására. A <tr> elem gyerekelemeként használható!

A tag paraméterei:

• globális attribútumok
• colspan: egymás melletti táblázatcellák vízszintes összevonására szolgál. A megadott szám jelzi, hogy hány cellát akarunk összevonni. Pl. colspan="3".
• rowspan: egymás feletti táblázatcellák függőleges összevonására szolgál. A megadott szám jelzi, hogy hány cellát akarunk összevonni. Pl. rowspan="2".
• headers: a fejlécek precíz beállítására szolgál. Bonyolultabb (pl. cellaösszevonásokat tartalmazó) táblázatok esetén nem feltétlenül elegendő a scope paraméter használata a fejlécek hatáskörének (sor, oszlop) beállításához. Ekkor az cellálnak egyedi azonosítót kell adnunk, a headers paraméterbe pedig azon cellák azonosítóit kell beírnunk, amelyek az adott adatcellához tartoznak.

Vegyük alapul a korábbi példánkat, de a <th> tagnél most ne alkalmazzuk a scope paramétert, hanem egyedi azonosítókat osszunk ki! Vigyázzunk arra, hogy az egyedi azonosítóknál számít a kis- és nagybetű közti különbség.

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

<th> – fejléc cella megadása

Mire használjuk?

Táblázat fejléccelláinak megadására használjuk. A <tr> elem gyerekelemeként használhatjuk.

A tag paraméterei:

• globális attribútumok
• colspan: (ugyanaz, mint a <td> tagnél). Egymás melletti táblázatcellák vízszintes összevonására szolgál. A megadott szám jelzi, hogy hány cellát akarunk összevonni. Pl. colspan="3".
• rowspan: (ugyanaz, mint a <td> tagnél). Egymás feletti táblázatcellák függőleges összevonására szolgál. A megadott szám jelzi, hogy hány cellát akarunk összevonni. Pl. rowspan="2".
• headers: (ugyanaz, mint a <td> tagnél). A fejlécek precíz beállítására szolgál. Bonyolultabb (pl. cellaösszevonásokat tartalmazó) táblázatok esetén nem feltétlenül elegendő a scope paraméter használata a fejlécek hatáskörének (sor, oszlop) beállításához. Ekkor az cellálnak egyedi azonosítót kell adnunk, a headers paraméterbe pedig azon cellák azonosítóit kell beírnunk, amelyek az adott adatcellához tartoznak.
• scope: a fejléc hatáskörének beállítására szolgál. Az értékei a következők lehetnek:
  • row: sor, vagyis a fejléc az adott sorban lévő elemekre vonatkozik.
  • col: oszlop, vagyis a fejléc az adott oszlopban lévő elemekre vonatkozik.
  • rowgroup: sorcsoport, vagyis a fejléc az adott sorban lévő elemekre vonatkozik.
  • colgroup: oszlopcsoport, vagyis a fejléc az adott sorban lévő elemekre vonatkozik.

<tbody> – táblázattörzs

Mire használjuk?

A táblázat struktúrájának precízebb megadására használhatjuk, ebbe kerül a táblázat törzse.

Ez az elem a <table> tag gyereke lehet, és a <caption>, <colgroup>, <thead> elemek mögött állhat, de csak akkor, ha a <table> elemnek nincs <tr> gyereke. A <tbody> elem <tr> elemeket tartalmazhat, vagy üres is lehet.

A tag paraméterei: globális attribútumok

<thead> – táblázat fejléc

Mire használjuk?

A táblázat struktúrájának precízebb megadására használhatjuk, ebbe kerül a táblázat fejléce.

Ez az elem a <table> tag gyereke lehet, és a <caption>, <colgroup> elemek után, de a <tbody>, <tfoot>, <tr> elemek előtt állhat. A <thead> elem <tr> elemeket tartalmazhat, vagy üres is lehet.

A tag paraméterei: globális attribútumok

<tfoot> – táblázat lábléc

Mire használjuk?

A táblázat struktúrájának precízebb megadására használhatjuk, ebbe kerül a táblázat lábléce.

Ez az elem a <table> tag gyereke lehet, és a <caption>, <colgroup>, <thead> elemek után, de a <tbody>, <tr> elemek előtt állhat. A <tfoot> elem <tr> elemeket tartalmazhat, vagy üres is lehet.

A tag paraméterei: globális attribútumok

<caption> –táblázat felirata

Mire használjuk?

A táblázat feliratának megadásához. A felirat akár több bekezdésből is állhat, amely egy rövid ismertetést is tartalmazhat. A <table> elem első gyerekeként kell elhelyeznünk.

A tag paraméterei: globális attribútumok

<colgroup> –Oszlopcsoport

Mire használjuk?

Oszlopcsoport megadására használjuk. A <table> elem gyereke lehet, a <caption> elem után, de a <thead>, <tbody>, <tfoot> és <tr> elemek előtt.

Amennyiben a <colgroup> tagnek nincs beágyazott <col> eleme, akkor a span paraméterrel lehet megadni, hogy hány oszlopot csoportosít az adott tag.

A tag paraméterei:

• globális attribútumok
• span: a csoportosított oszlopok számának megadására. pl. <colgroup span="2"></colgroup>

<col> – Oszlop

Mire használjuk?

A táblázat oszlopainak azonosítására használhatjuk. A <colgroup> elemen belül is szerepeltethetjük.

A tag paraméterei:

• globális attribútumok
• span: a csoportosított oszlopok számának megadására.

Vissza a tartalomjegyzékhez