Táblázatok - Táblázat oszlop. A <col> tag.

A <col> tag is az oszloptulajdonságok megadására szolgál, de nem rendeli össze egy strukturális egységbe azokat az oszlopokat, amelyeknek a stílusát meghatározza.

A <col> tagnak nincs zárótagja.

Legfontosabb attribútumai:

• span: azt adja meg, hogy hány darab egymás utáni oszlopra vonatkozik a stílus
• class, style, id: általános attribútumok

Leggyakrabban használt stílus tulajdonságok:

• szélesség (width)
• háttérszín (background-color)
• keret tulajdonságai (border-style, border-width, border-color) Az oszlopok keret tulajdonságait a régebbi böngészők egy része sajnos nem kezeli megfelelően.

Amíg a colgroup elemet stílus megadására és oszlopcsoportok kialakítására használhatod, addig a <col> taggal kizárólag stílust definiálhatsz. Az alábbi példa nagyon hasonlít a colgroup elemnél látható táblázatra:

A táblázat oszlopait leíró HTML kód:

<table>

   <caption>Gyümölcsök szezonjai és árai</caption>

   <colgroup>
      <col>
      <col span="2" class="szuret">
      <col span="2">
   </colgroup>

   <tr><th>&nbsp;</th>
      <th>Szüret………

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

col {border-style: solid; border-color: #000000;
   border-width: 3px}

.szuret {border-color: #0000ff; border-width: 4px;
   background-color: #aaffff}

A colgroup elemnél látható táblázattól annyiban különbözik ez a táblázat, hogy minden oszlopot vastag vonal választ el a szomszédjától. Elvi szempontból fontosabb probléma, hogy nincs logikai kapcsolat a hasonló tartalmú oszlopok között, mivel az összes oszlop ugyan annak az oszlopcsoportnak a tagja. Így megadva a HTML kódban a minimum árnak ugyan annyi köze van a szüret végéhez, mint a maximum árhoz.

Stíluslapokkal persze lehetne javítani a látványon. Az oszlopok bal és jobb oldali keretvonalait különböző tulajdonságúra állítva elérhető egy olyan megjelenítés, ami a colgroup elemnél bemutatott példában látszik, de ez a feladat fölösleges bonyolítása lenne. Ennek a táblázatnak a HTML kódját helyesebb a colgroup elemnél ismertetett módon leírni.

Jó megoldást mutat az alábbi kódrészlet is, ami megfelelő módon csoportokba rendezi a táblázat adatait és az oszlopok önálló formázását is lehetővé teszi. (A tömörebb írásmód érdekében kihasználtam, hogy a colgroup elem zárótagja elhagyható.)

<table>

   <caption>Gyümölcsök szezonjai és árai</caption>

   <colgroup>
      <col>

   <colgroup class="szuret">
      <col>
      <col class="szuret2">

   <colgroup>
      <col class="arak1">
      <col class="arak2">
   </colgroup>…..

amihez például egy ilyen stílusú megjelenítés is definiálható:

Sor csoportok. A <tbody>, <thead>, <tfoot> tagok. »