Táblázatok - Táblázat cellák. A <th> és a <td> tagok

Egy táblázatcella tartalma a <th> és </th> illetve a <td> és </td> tagok között helyezkedik el. A th elem egy fejléc információkat tartalmazó cella, a td elemben pedig a táblázat adatait lehet megadni. Ez a megkülönböztetés elsősorban a felolvasó szoftverek számára fontos. Vizuális megjelenítés során csak annyi a különbség, hogy a böngészők az alapbeállításuk szerint más stílust használnak a fejléc és az adat cellák esetén. A fejlécet általában vastag, az adatcellák tartalmát pedig normál betűvel írják ki, de persze ez stíluslapokkal megváltoztatható.

A th és a td elem zárótagja is elhagyható.

A <th> és a <td> tagok legfontosabb attribútumai:

• colspan: mennyi oszlopot fog át a cella. Alapértéke 1, ami azt jelenti, hogy a cella nincs összevonva más cellával.
• rowspan: mennyi sort fog át a cella. Alapértéke 1.
• class, style, id: általános attribútumok

Leggyakrabban használt stílus tulajdonságok:

• háttérszín (background-color)
• keret tulajdonságai (border-style, border-width, border-color)
• vízszintes igazítás (text-align)
• függőleges igazítás (vertical-align)
• helykitöltés (padding): távolság a cella széle és a benne lévő tartalom között

Az alábbi példa a cellák összevonását mutatja. A második sor második és harmadik cellája össze lett vonva. Szintén összevonásra került a második oszlop két cellája. Ezért a negyedik sorban egy <td> taggal kevesebb van, mivel az összevont adatcella már az előző sorban meg lett adva.

<table>

   <tr><th>&nbsp;</th>
      <th>Szüret kezdete</th>
      <th>Szüret vége</th>
      <th>Ár (Ft/kg)</th>
   </tr>

   <tr><th>Meggy</th>
      <td colspan="2">Június</td>
      <td>450</td>
   </tr>

   <tr><th>Szilva</th>
      <td rowspan="2">Július</td>
      <td>Augusztus</td>
      <td>300</td>
   </tr>

   <tr><th>Szőlő</th>
      <td>Október</td>
      <td>370</td>
   </tr>

</table>

Ami így jelenik meg:

Lehet definiálni olyan cellát is, amelyik egyszerre fog át több sort és oszlopot:

Aminek a HTML kódja:

<table>

   <tr><th>&nbsp;</th>
      <th>Szüret kezdete</th>
      <th>Szüret vége</th>
      <th>Ár (Ft/kg)</th>
   </tr>

   <tr><th>Meggy</th>
      <td>Június</td>
      <td>Június</td>
      <td>450</td>
   </tr>

   <tr><th>Szilva</th>
      <td colspan="2" rowspan="2">Július - Október</td>
      <td>300</td>
   </tr>

   <tr><th>Szőlő</th>
      <td>370</td>
   </tr>

</table>

Összevont cellákat tartalmazó táblázatok létrehozása közben vigyázni kell arra, hogy ne keletkezzenek egymást átfedő cellák. Az alábbi programkód egy ilyen hibás példát mutat, a harmadik sor harmadik cellája össze lett vonva a fölötte lévő cellával is és a baloldali szomszédjával is:

<table>

   <tr><th>&nbsp;</th>
      <th>Szüret kezdete</th>
      <th>Szüret vége</th>
      <th>Ár (Ft/kg)</th>
   </tr>

   <tr><th>Meggy</th>
      <td>Június</td>
      <td rowspan="2">Június</td>
      <td>450</td>
   </tr>

   <tr><th>Szilva</th>
      <td colspan="2">Július</td>
      <td>300</td>
   </tr>

   <tr><th>Szőlő</th>
      <td>Július</td>
      <td>Október</td>
      <td>370</td>
   </tr>

</table>

Ha a táblázat kódja egymást átfedő cellákat tartalmaz, akkor a böngészőkben megjelenő eredmény nem jósolható meg, bár a fenti egyszerű példában szereplő ellentmondást az Internet Explorer és a Mozilla Firefox is azonos módon oldja fel: