Sound of the Wind

Táblázatok

A weboldalak fontos elemei a táblázatok, amiket a table elemmel készíthetünk el. A táblázatok sorait tr elemek, majd a sorokon belüli cellákat pedig td elemek testesítik meg. Ennek tükrében, egy 2 soros és 3 oszlopos táblázatot elkészíthetünk például így:

<table>
  <tr>
    <td>1. sor 1. cella</td>
    <td>1. sor 2. cella</td>
    <td>1. sor 3. cella</td>
  </tr>
  <tr>
    <td>2. sor 1. cella</td>
    <td>2. sor 2. cella</td>
    <td>2. sor 3. cella</td>
  </tr>
</table>

Ha a táblázatban bizonyos cellákat össze szeretnénk vonni, azt a td elemek megfelelő paraméterezésével tehetjük meg. Ha például azt szeretném, hogy a fentebbi táblázat első sorában csak egy cella legyen, de az teljes szélességű, akkor a vízszintes cellaösszevonásra használhatjuk a colspan paramétert. Ennek egy számot kell megadnunk, ami mutatja, hogy az adott cella hány oszlop szélességét fogja kitölteni - jelen esetben tehát 3-ét, így:

<table>
  <tr>
    <td colspan="3">1. sor 1-2-3. cella egyben</td>
  </tr>
  <tr>
    <td>2. sor 1. cella</td>
    <td>2. sor 2. cella</td>
    <td>2. sor 3. cella</td>
  </tr>
</table>

Hasonlóképp ha a táblázat celláit függőlegesen szeretnénk összevonni, erre a rowspan tulajdonság ad lehetőséget. Természetesen mivel ebben a példában a második oszlop celláit függőlegesen összevontuk, így a második sorban csak két cella szerepel: az első, és a harmadik, a köztük lévő területet az összevont cella tölti majd ki.

<table>
  <tr>
    <td>1. sor 1. cella</td>
    <td rowspan="2">1-2. sor 2. cella</td>
    <td>1. sor 3. cella</td>
  </tr>
  <tr>
    <td>2. sor 1. cella</td>
    <td>2. sor 3. cella</td>
  </tr>
</table>

A colspan és a rowspan tulajdonságok természetesen együtt is használhatóak, komplexebb táblázatok kialakításához.

Címmezők

A táblázatok gyakran tartalmaznak címeket, feliratokat. Bár ezeket is elhelyezhetnénk td elemekbe, mégis érdemes ezeket inkább elkülöníteni, és a th elemekkel jelölni, megkönnyítve ezzel a formázást. Nézzünk egy példát:

<table>
  <tr>
    <th>Év</th>
    <td>2002</td>
    <td>2008</td>
  </tr>
  <tr>
    <th>Lakosság</th>
    <td>13 490</td>
    <td>13 921</td>
  </tr>
</table>

Táblázat szakaszai

Bár a táblázatok címeinek, feliratainak kiemelésével már megismerkedtünk, van egy másik lehetőség is a táblázatunk különféle részeinek szemantikus jelölésére: a táblázat szakaszok. Ezzel a táblázatunk egyes sorait (tehát csak teljes sorokat) megjelölhetünk fejlécként, és láblécként, megkönnyítve a későbbi megfelelő formázást (pl.: nyomtatáskor fejléc ismétlése minden oldalon, stb.).

A táblázat szakaszokra történő tagolásához a thead, tbody, illetve a tfoot elemeket használhatjuk, amelyekkel körülfogjuk az egyes szakaszokba tartozó sorokat:

<table>
  <thead>
    <tr>
      <th>Termék neve</th>
      <th>Fizetendő</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Kenyér</td>
      <td>450 Ft</td>
    </tr>
    <tr>
      <td>Alma</td>
      <td>270 Ft</td>
    </tr>
    <tr>
      <td>Rágógumi</td>
      <td>320 Ft</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Végösszeg</td>
      <td>1040 Ft</td>
    </tr>
  </tfoot>
</table>