Het element <thead>

Attributen

Dit element bevat de globale attributen.

Verouderde attributen

De volgende attributen zijn verouderd en mogen niet worden gebruikt. Ze worden hieronder gedocumenteerd als naslag bij het bijwerken van bestaande code en alleen vanwege historisch belang.

Gebruiksnotities

• De <thead> wordt geplaatst na eventuele <caption>- en <colgroup>-elementen, maar vóór eventuele <tbody>-, <tfoot>- en <tr>-elementen.
• Samen met de bijbehorende <tbody>- en <tfoot>-elementen biedt het <thead>-element nuttige semantische informatie en kan het worden gebruikt bij weergave op scherm of in print. Het specificeren van dergelijke groepen tabelinhoud biedt ook waardevolle contextuele informatie voor ondersteunende technologieën, waaronder schermlezers en zoekmachines.
• Bij het afdrukken van een document, in het geval van een tabel die over meerdere pagina's loopt, specificeert de tabelkop meestal informatie die op elke pagina hetzelfde blijft.

Voorbeelden

Zie <table> voor een compleet tabelvoorbeeld met een introductie van veelgebruikte standaarden en best practices.

Basisstructuur van de kop

Dit voorbeeld toont een tabel die is verdeeld in een koptekstsectie met kolomkoppen en een hoofdtekstsectie met de belangrijkste gegevens van de tabel.

HTML

De elementen <thead> en <tbody> worden gebruikt om de tabelrijen te structureren in semantische secties. Het <thead>-element vertegenwoordigt de koptekstsectie van de tabel, die een rij (<tr>) van kolomkopcellen (<th>) bevat.

<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

CSS

Er wordt wat basis-CSS gebruikt om de tabelkop op te maken en te markeren, zodat de kopjes van de kolommen opvallen ten opzichte van de gegevens in de tabelbody.

thead {
  border-bottom: 2px solid rgb(160 160 160);
  text-align: center;
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

tbody > tr > td:last-of-type {
  text-align: center;
}

Resultaat

Meerdere koprijen

Dit voorbeeld toont een tabelkopsectie met twee rijen.

HTML

We breiden de opmaak van de tabel uit het basisvoorbeeld in dit voorbeeld uit door twee tabelrijen (<tr>) binnen het <thead>-element op te nemen, waardoor een tabelkop met meerdere rijen ontstaat. We hebben een extra kolom toegevoegd, waarbij de namen van de studenten zijn opgesplitst in voor- en achternaam.

<table>
  <thead>
    <tr>
      <th rowspan="2">Student ID</th>
      <th colspan="2">Student</th>
      <th rowspan="2">Major</th>
      <th rowspan="2">Credits</th>
    </tr>
    <tr>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Martha</td>
      <td>Jones</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Victor</td>
      <td>Nim</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Alexandra</td>
      <td>Petrov</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

Cellen laten overspannen

Om de kopcellen te koppelen en uit te lijnen met de juiste kolommen en rijen, worden de attributen colspan en rowspan gebruikt op de <th>-elementen. De waarden die in deze attributen zijn ingesteld, specificeren over hoeveel cellen elke kopcel (<th>) zich uitstrekt. Door de manier waarop deze attributen zijn ingesteld, worden de twee kopcellen van de tweede rij uitgelijnd met de kolommen waarvan ze de kop vormen. Deze overspannen elk één rij en één kolom, aangezien de standaardwaarden voor de attributen colspan en rowspan beide 1 zijn.

Het overspannen van kolommen en rijen dat in dit voorbeeld wordt getoond, wordt geïllustreerd in de volgende afbeelding:

CSS

De CSS is ongewijzigd ten opzichte van het vorige voorbeeld.

thead {
  border-bottom: 2px solid rgb(160 160 160);
  background-color: #2c5e77;
  color: white;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

tbody {
  background-color: #e4f0f5;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

tbody > tr > td:last-of-type {
  text-align: center;
}

Resultaat

Technische samenvatting

Zie ook

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