Het element <col>

Attributen

Dit element bevat de globale attributen.

Verouderde attributen

De volgende attributen zijn verouderd en mogen niet worden gebruikt. Ze worden hieronder gedocumenteerd ter referentie bij het bijwerken van bestaande code en alleen voor historisch belang.

Gebruiksopmerkingen

• Het <col>-element wordt gebruikt binnen een <colgroup>-element dat geen span-attribuut heeft.
• De <col>-elementen groeperen kolommen niet structureel bij elkaar. Dat is de rol van het <colgroup>-element.
• Slechts een beperkt aantal CSS-eigenschappen heeft invloed op <col>:
  • background: De verschillende background-eigenschappen stellen de achtergrond in voor cellen binnen de kolom. Aangezien de achtergrondkleur van de kolom wordt getekend boven op de tabel en kolomgroepen (<colgroup>), maar achter de achtergrondkleuren die zijn toegepast op de rijgroepen (<thead>, <tbody> en <tfoot>), de rijen (<tr>) en de individuele cellen (<th> en <td>), zijn achtergronden die op tabelkolommen worden toegepast alleen zichtbaar als elke laag die erboven wordt getekend een transparante achtergrond heeft.
  • border: De verschillende border-eigenschappen gelden, maar alleen als de <table> border-collapse: collapse heeft ingesteld.
  • visibility: De waarde collapse voor een kolom zorgt ervoor dat alle cellen van die kolom niet worden weergegeven, en cellen die zich uitstrekken naar andere kolommen worden bijgesneden. De ruimte die deze kolommen zouden hebben ingenomen, wordt verwijderd. De grootte van andere kolommen wordt echter nog steeds berekend alsof de cellen in de samengevouwen kolom(men) aanwezig zijn. Andere waarden voor visibility hebben geen effect.
  • width: De eigenschap width definieert een minimale breedte voor de kolom, alsof min-width was ingesteld.

Voorbeeld

Zie <table> voor een compleet tabelvoorbeeld met een introductie tot algemene standaarden en beste praktijken.

Dit voorbeeld toont een tabel met acht kolommen, verdeeld over drie <col>-elementen.

HTML

Een <colgroup>-element geeft structuur aan een eenvoudige tabel, waardoor één impliciete kolomgroep wordt gecreëerd. Er zijn drie <col>-elementen opgenomen binnen de <colgroup>, waardoor drie stileerbare kolommen ontstaan. Het span-attribuut specificeert het aantal tabelkolommen dat elk <col> moet overspannen (standaard 1 indien weggelaten), waardoor attributen kunnen worden gedeeld tussen de kolommen in elk <col>.

<table>
  <caption>
    Personal weekly activities
  </caption>
  <colgroup>
    <col />
    <col span="5" class="weekdays" />
    <col span="2" class="weekend" />
  </colgroup>
  <thead>
    <tr>
      <th>Period</th>
      <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>
      <th>a.m.</th>
      <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>
      <th>p.m.</th>
      <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

We gebruiken CSS, in plaats van verouderde HTML-attributen, om de kolommen een achtergrondkleur te geven en de celinhoud uit te lijnen:

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>
• <colgroup>
• <table>
• <tbody>
• <td>
• <tfoot>
• <th>
• <thead>
• <tr>