Het element <td>

Attributen

Dit element bevat de globale attributen.

Verouderde attributen

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

Gebruiksopmerkingen

• <td> mag alleen worden gebruikt binnen een <tr>-element.

• Bij gebruik van de attributen colspan en rowspan om datacellen over meerdere kolommen en rijen te laten strekken, worden cellen zonder deze attributen (met een standaardwaarde van 1) automatisch ingepast in de 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 dat gangbare standaarden en best practices introduceert.

Basis-datacellen

Dit voorbeeld gebruikt <td>-elementen samen met andere tabelgerelateerde elementen om een eenvoudige tabel met data over het fonetische alfabet te introduceren.

HTML

Sommige tabelrijen (<tr>-elementen) bevatten zowel kopcellen (<th>-elementen) als datacellen (<td>-elementen). Het <th>-element dat het eerste kind van elke rij is, vormt de eerste kolom van de tabel, waarbij elke <th> de rijkop biedt voor de datacellen in die rij. Elk bijbehorend <td>-element bevat data die is uitgelijnd met de bijbehorende kolomkop en rijkopcel.

<table>
  <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 basale CSS gebruikt om de tabel en de cellen te stylen. CSS-attribuutselectors en de pseudo-klasse :nth-of-type worden gebruikt om het uiterlijk van de cellen af te wisselen, zodat de informatie in de tabel makkelijker te begrijpen en te herkennen is.

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

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

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

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

Resultaat

Kolom- en rij-overspanning

Dit voorbeeld breidt de basistabel uit het vorige voorbeeld uit met een extra "ABC"-cel.

HTML

Er wordt een extra datacel (<td>-element) geïntroduceerd binnen de eerste rij (<tr>-element). Dit creëert een vierde kolom in de tabel.

Met het rowspan-attribuut overspant de "ABC"-cel de eerste drie rijen van de tabel. De laatste datacellen van de volgende rijen overspannen elk twee kolommen. Dit wordt gedaan met het colspan-attribuut, waardoor ze correct binnen de tabelstructuur worden uitgelijnd. Merk op dat er een extra rij (<tr>-element) aan de tabel is toegevoegd om dit te illustreren.

<table>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
    <td rowspan="3">ABC</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 colspan="2">DELL tah</td>
  </tr>
  <tr>
    <th scope="row">E</th>
    <td>Echo</td>
    <td colspan="2">ECK oh</td>
  </tr>
</table>

CSS

De pseudo-klassen :first-of-type en :last-of-type worden in de CSS gebruikt om de toegevoegde "ABC"-datacel te selecteren en te stylen.

tr:first-of-type td:last-of-type {
  width: 60px;
  background-color: #505050;
  color: white;
  font-weight: bold;
  text-align: center;
}

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

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

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

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

Resultaat

Datacellen koppelen aan kopcellen

Voor complexere relaties tussen datacellen (<td>-elementen) en kopcellen (<th>-elementen) kan het gebruik van <th>-elementen met alleen het scope-attribuut onvoldoende zijn voor ondersteunende technologieën, met name schermlezers.

HTML

Om de toegankelijkheid van het vorige voorbeeld te verbeteren en om bijvoorbeeld schermlezers de koppen te laten uitspreken die bij elke datacel horen, kan het headers-attribuut worden geïntroduceerd samen met id-attributen. Elke rijkopcel (<th>-element) die bij de "ABC"-datacel hoort, dat wil zeggen de letters "A", "B" en "C", krijgt een unieke identificatie met het id-attribuut. De "ABC"-datacel (<td>-element) gebruikt vervolgens deze id-waarden in een door spaties gescheiden lijst voor het headers-attribuut.

<table>
  <tr>
    <th id="a" scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
    <td headers="a b c" rowspan="3">ABC</td>
  </tr>
  <tr>
    <th id="b" scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th id="c" scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td colspan="2">DELL tah</td>
  </tr>
  <tr>
    <th scope="row">E</th>
    <td>Echo</td>
    <td colspan="2">ECK oh</td>
  </tr>
</table>

Resultaat

Hoewel het visuele resultaat ongewijzigd is ten opzichte van de vorige voorbeeldtabel, is elke datacel (<td>) nu expliciet gekoppeld aan de bijbehorende rijkopcel (<th>).

Technische samenvatting

Zie ook

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