Het element <th>

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 <th> mag alleen worden gebruikt binnen een <tr>-element.

• In eenvoudige contexten is het gebruik van het scope-attribuut op kopcellen (<th>-elementen) overbodig, omdat scope wordt afgeleid. Sommige ondersteunende technologieën kunnen echter de scope niet correct afleiden, dus het specificeren van de scope van de kop kan de gebruikerservaring verbeteren.

• Wanneer de attributen colspan en rowspan worden gebruikt om kopcellen over meerdere kolommen en rijen te laten overspannen, worden cellen zonder deze gedefinieerde attributen (met een standaardwaarde van 1) automatisch geplaatst in vrije beschikbare ruimtes in de tabelstructuur die 1x1-cellen beslaan, zoals geïllustreerd in de volgende afbeelding:

  

  Opmerking

  Deze attributen mogen niet worden gebruikt om cellen te laten overlappen.

Voorbeelden

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

Eenvoudige kolom- en rijkoppen

Dit voorbeeld gebruikt <th>-elementen om kolom- en rijkoppen te introduceren in een eenvoudige tabelstructuur.

HTML

De eerste rij (<tr>-element) bevat de kolomkoppen (<th>-elementen), die dienen als "titels" voor de kolommen om de informatie in de kolommen beter te begrijpen en de gegevens te identificeren. Om aan te geven dat elke kolomkop betrekking heeft op alle cellen in de bijbehorende kolom, is het scope-attribuut ingesteld op col (kolom).

De overige rijen bevatten de belangrijkste gegevens van de tabel. Elk van deze rijen heeft een rijkop (<th>-element) die als eerste cel wordt geïntroduceerd. Dit creëert een kolom met rijkoppen als eerste kolom van de tabel. Net als bij de kolomkoppen is het scope-attribuut ingesteld op row om aan te geven op welke cellen elke rijkop betrekking heeft, wat in het onderstaande voorbeeld alle gegevenscellen (<td>-elementen) in elke row zijn.

<table>
  <tr>
    <th scope="col">Symbol</th>
    <th scope="col">Code word</th>
    <th scope="col">Pronunciation</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>DELL tah</td>
  </tr>
</table>

CSS

Er wordt wat basis-CSS gebruikt om de tabel en de bijbehorende cellen op te maken. We gebruiken CSS-attribuutselectors om kopcellen te targeten op basis van hun scope-attribuutwaarden, waarbij kolom- en rijkoppen (<th>-elementen) worden gemarkeerd en van elkaar en van de gegevenscellen (<td>) worden onderscheiden.

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

th[scope="col"] {
  background-color: #505050;
  color: white;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

tr:nth-of-type(odd) td {
  background-color: #eeeeee;
}

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

Resultaat

Kolommen en rijen laten overspannen

Dit voorbeeld breidt de eenvoudige tabel uit het vorige voorbeeld uit en verbetert deze door een tweede rij toe te voegen voor extra kolomkoppen.

HTML

Een extra tabelrij (<tr>-element) wordt toegevoegd als de tweede koprij van de tabel met twee extra kolomkoppen (<th>-elementen). Op deze manier wordt de kolom "Pronunciation" opgesplitst in twee kolommen, één voor de IPA-notatie (International Phonetic Alphabet) en één voor de herspelling (de oorspronkelijke uitspraakkolom). De bijbehorende gegevenscellen (<td>-elementen) worden aan elke volgende rij toegevoegd.

Zoals getoond in de gebruiksnotities, kunnen de attributen colspan en rowspan worden gebruikt voor de <th>-elementen om de kopcellen aan de juiste kolommen en rijen toe te wijzen. Om een koptekst van "twee rijen" in de tabelstructuur te bereiken, overspannen de eerste twee kopcellen binnen het eerste <tr>-element twee rijen. De derde kopcel overspant twee kolommen breed (en blijft in de eerste rij). Deze opzet laat twee beschikbare gebieden over in de derde en vierde kolom van de tweede rij, waar de twee koppen binnen het tweede <tr>-element automatisch worden geplaatst, waarbij de standaardwaarde 1 is voor de attributen colspan en rowspan.

<table>
  <tr>
    <th scope="col" rowspan="2">Symbol</th>
    <th scope="col" rowspan="2">Code word</th>
    <th scope="col" colspan="2">Pronunciation</th>
  </tr>
  <tr>
    <th scope="col">IPA</th>
    <th scope="col">Respelling</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>ˈælfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>ˈbraːˈvo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>ˈtʃɑːli</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>ˈdeltɑ</td>
    <td>DELL tah</td>
  </tr>
</table>

CSS

De CSS is ongewijzigd ten opzichte van het vorige voorbeeld.

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;
}

th[scope="col"] {
  background-color: #505050;
  color: white;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

tr:nth-of-type(odd) td {
  background-color: #eeeeee;
}

Resultaat

Kopcellen associëren met andere kopcellen

Voor complexere relaties tussen kopcellen is het gebruik van th-elementen met alleen het scope-attribuut mogelijk niet voldoende voor ondersteunende technologieën, met name schermlezers.

HTML

Om de toegankelijkheid van het vorige voorbeeld te verbeteren en bijvoorbeeld schermlezers in staat te stellen de koppen die bij elke kopcel horen uit te spreken, kan het headers-attribuut worden geïntroduceerd samen met id-attributen. Doordat de kolom "Pronunciation" in het voorbeeld in twee kolommen wordt opgesplitst, waarbij een koptekst van "twee rijen" wordt geïntroduceerd, kunnen ondersteunende technologieën zoals schermlezers mogelijk niet identificeren met welke extra kopcellen (th-elementen) de kopcel "Pronunciation" gerelateerd is, en omgekeerd. Daarom wordt het headers-attribuut gebruikt op de kopcellen "Pronunciation", "IPA" en "Respelling" om de gerelateerde kopcellen te associëren op basis van de waarden van de unieke identifiers uit de toegevoegde id-attributen, in de vorm van een door spaties gescheiden lijst.

<table>
  <tr>
    <th scope="col" rowspan="2">Symbol</th>
    <th scope="col" rowspan="2">Code word</th>
    <th scope="col" colspan="2" id="p" headers="i r">Pronunciation</th>
  </tr>
  <tr>
    <th scope="col" id="i" headers="p">IPA</th>
    <th scope="col" id="r" headers="p">Respelling</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>ˈælfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>ˈbraːˈvo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>ˈtʃɑːli</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>ˈdeltɑ</td>
    <td>DELL tah</td>
  </tr>
</table>

Resultaat

Het visuele resultaat is ongewijzigd ten opzichte van de vorige voorbeeldtabel.

Technische samenvatting

Zie ook

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