Nyitó

Gyorstalpaló

Tervezés

HTML

CSS

Sablonok

Bevezetés

Szintaktika

Dokumentum szerkezet

Általános attribútumok

Szöveg megadása

Linkek

Kép beillesztése

Táblázatok

Listák

Űrlapok

Szkriptek

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:

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:

  Szüret kezdete Szüret vége Ár (Ft/kg)
Meggy Június 450
Szilva Július Augusztus 300
Szőlő Október 370

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

  Szüret kezdete Szüret vége Ár (Ft/kg)
Meggy Június Június 450
Szilva Július - Október 300
Szőlő 370

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:

Átfedő cellák

Tőzsde és technikai elemzés érthetően