Lektioner

Kolumngrupper i tabeller

Elementet <colgroup> används för att gruppera kolumner i en tabell och ge dessa gemensamma egenskaper med CSS.

Elementet <col>

<colgroup> placeras i <table> innan <thead> och den första <tr>, men efter <caption>. Mellan <colgroup> och </colgroup> placeras en <col>-tagg för varje kolumn (om du inte använder attributet span). <col> behöver ingen sluttagg. Kolumnerna räknas (som vanligt) från vänster till höger i tabellen.

Varje <col> kan sedan styleas med CSS.

Attributet span

Om flera kolumner efter varandra ska ha gemensamma egenskaper ger man <col> attributet span, för att låta den gälla för fler än en kolumn i följd. Värdet till span är det antal kolumner som avses, <col span="3"> gäller till exempel för tre kolumner i följd.

Exempel

Utan <colgroup>

Tabell utan <colgroup>
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 
<table>
   <caption>Tabell utan &lt;colgroup&gt;</caption>
   <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>

Alla kolumner har varsin <col>

Alla kolumner har fått varsin <col>
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 
<table class="tabellexempel">
  <caption>Alla kolumner har fått varsin &lt;col&gt;</caption>
  <colgroup>
    <col class="rodkolumn">
    <col class="blakolumn">
    <col class="gronkolumn">
    <col class="gulkolumn">
  </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>

<colgroup> med span="2"

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 
<table class="tabellexempel">
   <caption>En viktig tabell</caption>
   <colgroup>
      <col class="rodkolumn">
      <col span="2" class="gronkolumn">
      <col class="blakolumn">
   </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>