Het element <colgroup>

Attributen

Dit element bevat de globale attributen.

Verouderde attributen

De volgende attributen zijn verouderd en mogen niet meer worden gebruikt. Ze worden hieronder gedocumenteerd ter referentie bij het bijwerken van bestaande code en om historische redenen.

Gebruiksnotities

• De <colgroup> moet binnen een <table> voorkomen, na een eventueel <caption>-element (indien gebruikt), maar vóór eventuele <thead>-, <tbody>-, <tfoot>- en <tr>-elementen.
• Slechts een beperkt aantal CSS-eigenschappen heeft effect op <colgroup>:
  • background: De verschillende background-eigenschappen stellen de achtergrond in voor cellen binnen de kolomgroep. Aangezien de achtergrondkleur van de kolomgroep bovenop de tabel wordt getekend, maar achter de achtergrondkleuren die zijn toegepast op de kolommen (<col>), de rijgroepen (<thead>, <tbody> en <tfoot>), de rijen (<tr>), en de afzonderlijke cellen (<th> en <td>), zijn achtergronden die zijn toegepast op tabelkolomgroepen alleen zichtbaar als elke laag die erbovenop wordt getekend een transparante achtergrond heeft.
  • border: De verschillende border-eigenschappen zijn van toepassing, maar alleen als de <table> border-collapse: collapse heeft ingesteld.
  • visibility: De waarde collapse voor een kolomgroep zorgt ervoor dat alle cellen van de kolommen in die kolomgroep niet worden weergegeven, en dat cellen die zich over andere kolommen uitstrekken worden afgeknot. De ruimte die deze kolommen in de kolomgroep zouden hebben ingenomen, wordt verwijderd. De grootte van andere kolommen wordt echter nog steeds berekend alsof de cellen in de samengevouwen kolom(men) in de kolomgroep aanwezig zijn. Andere waarden voor visibility hebben geen effect.
  • width: De width-eigenschap definieert een minimumbreedte voor de kolommen binnen de kolomgroep, alsof min-width was ingesteld.

Voorbeeld

Zie <table> voor een compleet tabelvoorbeeld dat gangbare standaarden en beste praktijken introduceert.

Dit voorbeeld laat een tabel met zeven kolommen zien die is verdeeld in twee <colgroup>-elementen die zich over meerdere kolommen uitstrekken.

HTML

Er worden twee <colgroup>-elementen gebruikt om een eenvoudige tabel te structureren door kolomgroepen te maken. Het aantal kolommen in elke kolomgroep wordt opgegeven door het span-attribuut.

<table>
  <caption>
    Personal weekly activities
  </caption>
  <colgroup span="5" class="weekdays"></colgroup>
  <colgroup span="2" class="weekend"></colgroup>
  <thead>
    <tr>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
      <th>Sat</th>
      <th>Sun</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Clean room</td>
      <td>Football training</td>
      <td>Dance Course</td>
      <td>History Class</td>
      <td>Buy drinks</td>
      <td>Study hour</td>
      <td>Free time</td>
    </tr>
    <tr>
      <td>Yoga</td>
      <td>Chess Club</td>
      <td>Meet friends</td>
      <td>Gymnastics</td>
      <td>Birthday party</td>
      <td>Fishing trip</td>
      <td>Free time</td>
    </tr>
  </tbody>
</table>

CSS

Gegroepeerde kolommen kunnen worden gebruikt om de structuur visueel te benadrukken met CSS:

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 6px;
  text-align: center;
}

.weekdays {
  background-color: #d7d9f2;
}

.weekend {
  background-color: #ffe8d4;
}

table {
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

Resultaat

Technische samenvatting

Zie ook

• <caption>
• <col>
• <table>
• <tbody>
• <td>
• <tfoot>
• <th>
• <thead>
• <tr>