HTML

Tabeller: kolumngrupper

Genom att använda elementet <colgroup> kan du gruppera kolumner i en tabell och ge dessa gemensamma egenskaper. Förr gjordes detta med attribut direkt i HTML, men idag ger man hellre själva egenskaperna till kolumngrupperna med CSS.

För att ange hur många kolumner som ska ingå i kolumngruppen kan man antingen ange det med attributet span i <colgroup> eller genom att lägga till <col>-element mellan <colgroup> och </colgroup>, ett för varje kolumn som ska ingå i kolumngruppen.

<colgroup>
   <col>
   <col>
   <col>
</colgroup>
är alltså likvärdigt med:
<colgroup span="3">
</colgroup>
båda ger en kolumngrupp bestående av tre kolumner. Som du ser har <col> ingen sluttagg.

En fördel med att använda <col> är att dessa kan ges sina egna egenskaper. Du kan också låta en <col> gälla för flera kolumner genom att använda attributet span.

<colgroup>
   <col>
   <col>
   <col span="2">
</colgroup>
Tillämpat på vårt tidigare exempel, skulle det se ut så här, om man ger kolumnerna olika färg genom att bädda in CSS-snuttar med hjälp av attributet style:
<table>
   <caption>En viktig tabell</caption>
   <colgroup>
      <col style="background-color: red;">
      <col span="2" style="background-color: green;">
      <col style="background-color: blue;">
   </colgroup>
   <thead>
      <tr>
         <th>Kolumn 1</th>
         <th>Kolumn 2</th>
         <th>Kolumn 3</th>
         <th>Kolumn 4</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>Kolumn 1</th>
         <th>Kolumn 2</th>
         <th>Kolumn 3</th>
         <th>Kolumn 4</th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Item</td>
         <td>Item</td>
         <td>Item</td>
         <td rowspan="3">Item</td>
      </tr>
      <tr>
         <td>Item</td>
         <td>Item</td>
         <td>Item</td>
      </tr>
      <tr>
         <td>Item</td>
         <td>Item</td>
         <td>Item</td>
      </tr>
   </tbody>
</table>
och visas:
En viktig tabell
Kolumn 1 Kolumn 2 Kolumn 3 Kolumn 4
Kolumn 1 Kolumn 2 Kolumn 3 Kolumn 4
Item Item Item Item
Item Item Item
Item Item Item

Placering

Som du ser i exemplet ovan ska <colgroup> placeras efter <caption>, men före <thead>. Den ska alltså placeras precis innan själva tabellinnehållet (även om du inte har någon <caption>).

Mer information

Komplett information om tabeller finns att läsa hos W3C