A táblázatok használata a legrégebbi megoldás arra, hogy a szövegeket ne csak egymás alá, hanem egymás mellé oszlopokba és sorokba rendezve jelenítsünk meg. Bár a HTML elmélet azt mondja, hogy ezt a lehetőséget ne használjuk pozicionálásra, vagy csak nagyon kevéssé, de gyakran a táblázatok használata a legkézenfekvőbb megoldás az ilyen jellegű feladatok megoldására.
A táblázat sorokból és azon belül cellákból (oszlopokból) áll a HTML szerint. Valójában az oszlop elnevezés necces, ugyanis inkább cellákról beszéhetünk, amelyek minden sorban ugyanannyian vannak.
A táblázat alapesetben kitölti a rendelkezésére álló helyet, vagyik olyan széles, mint a weboldal aktuális tárolója (konténer -> container). Az aktuális szélességét tehát a környzezet határozza meg.
Alapesetben a táblázatnak van kerete (border). Az egyes cellákban lévő tartalmak kitöltik a rendlekezésre álló helyet.
Ez egy egyszerű táblázat két sorral és két oszloppal
| 1. sor és 1. oszlop | 1. sor és 2. oszlop |
| 2. sor és 1. oszlop | 2. sor és 2. oszlop |
A kód:
<table border="1">
<tr>
<td> 1. sor és 1. oszlop </td>
<td> 1. sor és 2. oszlop </td>
</tr>
<tr>
<td> 2. sor és 1. oszlop </td>
<td> 2. sor és 2. oszlop </td>
</tr>
</table>
Egyszerű táblázat keret nélkül:
<table border="">
<tr>
<td> 1. sor és 1. oszlop </td>
<td> 1. sor és 2. oszlop </td>
</tr>
<tr>
<td> 2. sor és 1. oszlop </td>
<td> 2. sor és 2. oszlop </td>
</tr>
</table>
A <tr>...</tr> tag megadja a sor elejét és végét. A <td>...</td> tagek megadják az egyes celláknak a keretét.
A táblázatok minden sora azonos szélességű és azonos számú cellát tartalmaz.
Egyszerű táblázat fejléccel
| 1. sor-oszlop fejléc | 2. oszlop fejléc | 3. oszlop fejléc |
|---|---|---|
| 2. sor fejléc | adat | adat |
| 3. sor fejléc | adat | adat |
<table border="1" summary="Minta táblázat leírása"><caption>Minta táblázat</caption>
<tr>
<th> 1. sor-oszlop fejléc </th>
<th> 2. oszlop fejléc </th>
<th> 3. oszlop fejléc </th>
</tr>
<tr>
<th> 2. sor fejléc</th>
<td> adat </td>
<td> adat </td>
</tr>
<tr>
<th> 3. sor fejléc</th>
<td> adat </td>
<td> adat </td>
</tr>
</table>
A fejléc formázása mindig vastag betűs és az adott oszlop vagy sor jelentését tartalmazza. A <th> tag-et kell használni erre a célra.
A táblázatoknak szokás címet adni. ebben az esetben a <caption>A táblázat címe</caption> tag-et kell használni.
Ha a táblázat oszlopainak nem adunk szélesség paramétert, akkor a táblázat olyan széles lesz, hogy a cellákban lévő tartalom elférjen. Ha keskenyebb a hely, mint amennyi az egy soros megjelenítéshez szükséges, akkor a cellákban a tartalom több sorossá töredezik.
Ha akár a teljes táblázatnak, akár egy-egy oszlopnak akarunk magasság és szélesség paramétert adni, akkor azt az alábbi módon tudjuk megtenni:
| Ez a cella száz pixel széles. enek a cellának 50 pixel a magassága | Ez is 100 pixel széles | Ez a maradék szélesség |
| A többi cella szélessége és magassága automatikusan beálítódik a maradék hely arányában. | ||
Nézzük a kódját:
<table border="1" cellpadding="1" cellspacing="1" height="500" width="400">
<tbody>
<tr>
<td width="100">Ez a cella száz pixel széles. enek a cellának 50 pixel a magassága</td>
<td height="100" width="100">Ez is 100 pixel széles</td>
<td>Ez a maradék szélesség</td>
</tr>
<tr>
<td>A többi cella szélessége és magassága automatikusan beálítódik a maradék hely arányában.</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
A fenti kódban van néhány érdekesség, amit megmagyarázok. A táblázatok méretét a böngészők automatikusan határozzák meg, ha nem adunk méret paramétereket.
width="100" height="100" - Szélesség és magasság beállítása képpontban (pixelben).
Bármelyik elemnek, a táblázatnak, a sornak vagy a cellának, megadva a szélességét és/vagy a magasságát, a böngésző igyekszik az értéket betartva megjeleníteni a táblázatot, azonban, ha az értékek ellentmondanak egymásnak, vagy a tartalom nem fér ki, akkor a megjelenítés érdekében az értékek megváltoznak.
Cellák összevonása
A táblázatok kialakításánál néha egy-egy sor több cellája helyett csak egy cellát szeretnénk megjeleníteni. Ekkor jól jön a <td> tag colspan illetve a rowspan paramétere. Segítségükkel meg lehet adni, hogy hány cella tartozzon egybe úgy, hogy a táblázat többi része változatlan marad. Nézzük a példát.
| Itt adjuk meg a sorok elbevezését | Itt adjuk meg a neveket | ||
| Első sor első cella | Első sor második cella | Első sor harmadik cella | |
| 2. sor 1. cella | 2. sor 2. cella | 2. sor 3. cella | |
| 3. sor 1. cella | 3. sor 1. cella | 3. sor 1. cella | |
<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
<caption>Minta a colspan és rowspan paraméter használatára</caption>
<tbody>
<tr>
<td rowspan="4" style="width: 100px;">Itt adjuk meg a sorok elbevezését</td>
<td colspan="3">Itt adjuk meg az oszlopok közös elnevezését</td>
</tr>
<tr>
<td>Első sor, első cella</td>
<td>Első sor második cella</td>
<td>Első sor harmadik cella;</td>
</tr>
<tr>
<td>2. sor 1.cella</td>
<td>2. sor 2.cella</td>
<td>2. sor 3.cella</td>
</tr>
<tr>
<td>3. sor 1.cella</td>
<td>3. sor 2.cella</td>
<td>3. sor 3.cella</td>
</tr>
</tbody>
</table>
Táblázat hármas tagolása
Ha nagy táblázatokat készítünk és weboldalunkat ki akarjuk nyomtatni, akkor szokásos probléma, hogy a nyomtatásban lévő oszlopfejléc csak egyszer jelenik meg. Ezt küszöböli ki, hogyha használjuk a <thead>, <tbody> és a <tfoot> tageket a táblázatok kialakításánál. Használata esetén a nyomtatásban minden oldalon megjelenik a thead-ban és a tfoot-ban megadott szöveg.
| 0. oszlop | 1. oszlop | 2. oszlop | 3. oszlop |
|---|---|---|---|
| Itt adjuk meg a sorok elnevezését | Itt adjuk meg a neveket | ||
| Első sor első cella | Első sor második cella | Első sor harmadik cella | |
| 2. sor 1. cella | 2. sor 2. cella | 2. sor 3. cella | |
| 3. sor 1. cella | 3. sor 1. cella | 3. sor 1. cella | |
| 0. lábléc | 1. lábléc | 2. lábléc | 3. lábléc |
A fenti táblázatnak az alábbi lesz a forráskódja. Látunk benne korábban is használt elemeket.
<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
<caption>Minta a <b>colspan</b> és <b>rowspan</b> paraméterek és<br />
a <b><thead></b> és a <b><tfoot></b> tagek használatára
</caption>
<thead><tr><th>0. oszlop</th>
<th>1. oszlop</th>
<th>2. oszlop</th>
<th>3. oszlop</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" style="width: 100px;">Itt adjuk meg a sorok elnevezését</td>
<td class="rtecenter" colspan="3">Itt adjuk meg a neveket</td>
</tr>
<tr>
<td>Első sor első cella</td>
<td>Első sor második cella</td>
<td>Első sor harmadik cella</td>
</tr>
<tr>
<td>2. sor 1. cella</td>
<td>2. sor 2. cella</td>
<td>2. sor 3. cella</td>
</tr>
<tr>
<td>3. sor 1. cella</td>
<td>3. sor 1. cella</td>
<td>3. sor 1. cella</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>0. lábléc</th>
<th>1. lábléc</th>
<th>2. lábléc</th>
<th>3. lábléc</th>
</tr>
</tfoot>
</table>
A táblázatokról ennyit.
Mikor használjunk táblázatokat?
Ha az információt táblázatos formában szeretnénk megjeleníteni.
Mikor NE használjunk táblázatokat?
Ha a táblázatot csak azért használjuk, hogy pozicionáljunk kereteket, dobozokat, akkor inkább használjunk DIV és CSS technikát, amit később fogunk megtanulni!