Táblázatok - Sor csoportok. A <tbody>, <thead>, <tfoot> tagok.

A HTML szabvány lehetővé teszi a táblázatok sorainak csoportosítását a tbody, thead és a tfoot elemek alkalmazásával.

A <tbody> nyitó tag elhagyható abban az esetben, ha a táblázatban nincs thead és tfoot elem, továbbá a táblázat sorai egyetlen csoportot alkotnak. Másképp fogalmazva, ha nincs tbody, thead és tfoot elem definiálva a HTML kódban, akkor a böngésző a táblázat összes sorát egyetlen csoportnak tekinti. A </tbody> zárótag mindig elhagyható. Ha van a táblázatban thead és tfoot elem, akkor azok zárótagjai is opcionálisak.

A tbody, tfoot és thead tagok legfontosabb attribútumai az id, class, style á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) A sorcsoportok keret tulajdonságait a régebbi böngészők egy része sajnos nem kezeli megfelelően.

Ha megvannak adva, akkor a thead és a tfoot elemek határozzák meg a táblázat fejlécét illetve láblécét, a tbody elem pedig a táblázat törzse, ami az adatokat tartalmazza. Ebből következően a fejlécet és a láblécet alkotó sorok jellemzően <th> cellákból épülnek fel, a táblázat törzs pedig általában <td> cellákból áll, de ezzel kapcsolatban a szabvány nem tartalmaz semmilyen korlátozást. Tbody elemből több is lehet egy táblázaton belül.

A HTML 4.01 szabvány szerint, ha van tfoot elem, akkor annak a programkódban a táblázat törzs előtt kell elhelyezkednie, annak ellenére, hogy a lábléc a táblázat utolsó sora. A szabvány alkotói így biztosították annak lehetőségét, hogy a böngészők a táblázat teljes letöltése előtt elkezdhessék annak megjelenítését, és a megjelenített adatok azonnal értelmezhetőek legyenek. Ennek az elvnek az előnyei a terjedelmes, nagyon sok sort tartalmazó táblázatoknál jelentkezhetnek.

A weblapfejlesztők a gyakorlatban ritkán használják a tbody, thead és a tfoot elemeket. Egy egyszerűbb táblázatnál nincs rájuk szükség. A fejléc információkat <th> cellákban megadva, az adatokat <td> cellákban elhelyezve a HTML kód megfelelően reprezentálja a táblázatot alkotó adathalmaz logikai felépítését. A thead és a tfoot elemek alkalmazása akkor jelenthet komolyabb előnyt a felhasználók számára, ha a táblázatot gyakran kinyomtatják és az sok sort tartalmaz. Több lapos nyomtatás esetén a böngészőnek lehetősége van a fejléc és lábléc információkat minden oldalon elhelyezni, ami nagy mértékben segítheti az adatok értelmezését.

Példa:

Aminek a HTML kódja:

<table>

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

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

   <tbody>
      <tr><th>Meggy</th>
         <td>Június</td>
         <td>Június</td>
         <td>440</td>
      </tr>

      <tr><th>Szilva</th>
         <td>Július</td>
         <td>Augusztus</td>
         <td>300</td>
      </tr>

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

</table>

És a hozzá tartozó stílus deklarációk:

tfoot, thead {border-style: solid; border-color: #000000;
   border-width: 2px; background-color: #cccccc}

table {border-style: solid; border-color: #000000; padding: 0px;
   margin: 10px; border-width: 4px; border-collapse: collapse}

th {border-style: solid; border-color: #000000; padding: 5px;
   border-width: 1px; text-align: center}

td {border-style: solid; border-color: #000000; padding: 5px;
   border-width: 1px; text-align: center}

Táblázat sor. A <tr> tag. »