4.07. Táblázatok

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

Minta táblázat
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>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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.

Minta a colspan és rowspan paraméter használatára
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.

Minta a colspan és rowspan paraméterek és
a <thead> és a <tfoot> tagek használatára
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>&lt;thead&gt;</b> és a <b>&lt;tfoot&gt;</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!