Táblázatok - Oszlop csoportok. A <colgroup> tag.

Egy HTML táblázat oszlopainak csoportosítását és az oszlopok tulajdonságainak meghatározását a <colgroup> tag segítségével teheted meg. A zárótag használata nem kötelező.

Legfontosabb attribútumai:

• span: a csoportba tartozó oszlopok száma
• 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 oszlopcsoportok keret tulajdonságait a régebbi böngészők egy része sajnos nem kezeli megfelelően.

A span attribútum adja meg, hogy mennyi oszlop tartozik a csoportba. Alapértelmezett értéke 1. Ha a colgroup elem col elemet vagy elemeket tartalmaz, akkor a böngészők figyelmen kívül hagyják a <colgroup> tag span attribútumának értékét. (Vagyis akkor a colgroup elem azokat az oszlopokat fogja össze egy csoportba, amelyeket az általa tartalmazott <col> tagok definiálnak.)

A weblapkészítésben szokásos megoldásnak számít, hogy a táblázat összes oszlopa egyetlen oszlopcsoportot alkot, az oszlopok jellemzői egy colgroup elemen belül <col> tagok attribútumaként vannak definiálva. Például a webkalap.hu oldalainak elrendezését definiáló háromoszlopos táblázat kódja a következő:

<table class="elhelyezfotabla">
   <colgroup>
      <col class="colalmenu">
      <col class="colszovegmezo">
      <col class="colreklam">
   </colgroup>……

Egy „rendes” adattáblában viszont érdemes lehet oszlopcsoportokat létrehozni, mert az a vizuális formázást is egyszerűsíti és logikai kapcsolatot is teremt az egymással szorosan összefüggő adatok között. A logikai kapcsolat elsősorban a felolvasó szoftvert használó emberek számára fontos. Annak, aki nem láthatja, egy kisebb táblázat is bonyolult információhalmaznak számít. Sokat segíthet a megértésben, ha az adatok közötti logikai kapcsolat a HTML kód szerkezetéből már kiolvasható.

Az alábbi táblázatban a szüret idejére vonatkozó két oszlop egy olyan csoportot képez, amelyik a többitől eltérő formázást kapott, valamint az árakat tartalmazó két oszlop is egy csoportba lett összevonva. (Az első oszlop önállóan is egy „oszlopcsoportot” alkot.)

A táblázat HTML kódja így kezdődik:

<table>

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

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

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

és az oszlopcsoportokhoz tartozó stílus deklarációk:

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

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

Így leírva a táblázatot, a HTML kód ugyan azt a logikát tartalmazza, amit egy átlagos felhasználó a látvány alapján kialakít magában.

Táblázat oszlop. A <col> tag. »