Het element <tbody>

Attributen

Dit element bevat de globale attributen.

Afgekeurde attributen

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

Gebruiksnotities

• De <tbody> wordt geplaatst na eventuele <caption>-, <colgroup>- en <thead>-elementen.
• Als <tr>-elementen zijn opgegeven als directe kinderen van de <table> (zie "weglaten van tags" in de technische samenvatting voor een beschrijving van wanneer dit geldig is), dan zal de door de browser gegenereerde markup een <tbody>-element bevatten dat ze omvat. Hierdoor zullen CSS-selectors zoals table > tr deze elementen niet selecteren. Zie ook het voorbeeld Geen body opgeven.
• Het is toegestaan om meer dan één <tbody> per tabel te gebruiken, zolang ze allemaal opeenvolgend zijn. Hierdoor kunnen de rijen (<tr>-elementen) in grote tabellen worden onderverdeeld in secties, die elk desgewenst afzonderlijk kunnen worden opgemaakt. Als deze niet opeenvolgend zijn opgemaakt, corrigeren browsers deze fout van de auteur, en zorgen ervoor dat eventuele <thead>- en <tfoot>-elementen respectievelijk als eerste en laatste element van de tabel worden weergegeven.
• Samen met de gerelateerde <thead>- en <tfoot>-elementen biedt het <tbody>-element nuttige semantische informatie en kan het worden gebruikt bij weergave voor scherm of afdruk. Het opgeven van dergelijke tabelinhoudsgroepen biedt ook waardevolle contextuele informatie voor ondersteunende technologie, waaronder schermlezers en zoekmachines.
• Bij het afdrukken van een document geven, in het geval van een tabel die meerdere pagina's beslaat, de elementen <thead> en <tfoot> meestal informatie aan die op elke pagina hetzelfde blijft — of in ieder geval erg vergelijkbaar is — terwijl de inhoud van het <tbody>-element doorgaans van pagina tot pagina verschilt.
• Wanneer een tabel wordt weergegeven in een schermcontext (zoals een venster) die niet groot genoeg is om de hele tabel weer te geven, kan de user agent de gebruiker toestaan om de inhoud van de blokken <thead>, <tbody>, <tfoot> en <caption> onafhankelijk van elkaar te scrollen binnen dezelfde bovenliggende <table>.

Voorbeelden

Zie <table> voor een compleet tabelvoorbeeld waarin gangbare standaarden en best practices worden geïntroduceerd.

Geen body opgeven

Dit voorbeeld laat zien dat de browser <tr>-elementen automatisch omvat met een <tbody>-element als de rijen niet zijn genest binnen een tabelgroeperingselement (<tbody>, <tfoot> of <thead>) en, zoals in dit voorbeeld, directe kinderen zijn van het <table>-element.

HTML

Hier wordt een zeer eenvoudige tabel gemaakt met enkele tabelrijen (<tr>-elementen) die gegevens (<td>-elementen) over studenten bevatten.

<table>
  <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>
</table>

CSS

Let op de CSS in het voorbeeld, waar een background-color is opgegeven voor het <tbody>-element en tbody wordt gebruikt als onderdeel van een aanvullende CSS-selector. Als alternatief kunnen browserontwikkeltools worden gebruikt om de aanwezigheid van het <tbody>-element in de DOM te controleren.

tbody {
  background-color: #e4f0f5;
}

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

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

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

Resultaat

Basisstructuur van de body

Dit voorbeeld breidt de basistabel uit het vorige voorbeeld uit en verbetert deze.

HTML

We introduceren een tabelkop (<thead>-element) en gebruiken expliciet een <tbody>-element om de tabel in semantische secties te structureren. De tabelkop bevat de kolomkoppen (<th>-elementen). Het <tbody>-element vertegenwoordigt de bodysectie van de tabel, die een aantal rijen (<tr>-elementen) bevat met de hoofdgegevens van de tabel, namelijk de gegevens van elke student.

Het gebruik van dergelijke tabelinhoudsgroepen en semantische markup is niet alleen nuttig voor visuele weergave (via CSS-styling) en contextuele informatie voor ondersteunende technologie; bovendien helpt het expliciete gebruik van het <tbody>-element de browser om de bedoelde tabelstructuur te creëren, waardoor ongewenste resultaten worden vermeden.

<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

De CSS is nagenoeg ongewijzigd ten opzichte van het vorige voorbeeld, afgezien van wat basisstyling om de tabelkop te benadrukken, zodat de koppen van de kolommen opvallen ten opzichte van de gegevens in de tabelbody. Net als in het voorbeeld hierboven wordt de tbody-typeselector gebruikt om de bodycellen te stylen.

tbody {
  background-color: #e4f0f5;
}

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

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

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

Resultaat

Meerdere bodies

Dit voorbeeld breidt de tabel uit het voorbeeld hierboven nog verder uit door meerdere bodysecties te introduceren.

Door meerdere <tbody>-elementen te gebruiken, kun je rijgroeperingen binnen een tabel maken. Elke tabelbody kan mogelijk zijn eigen kop-rij of -rijen hebben; er mag echter maar één <thead>-element per tabel zijn! Daarom kunnen <tr>-elementen met <th>-elementen worden gebruikt om koppen binnen elke <tbody> te maken.

HTML

Voortbouwend op de tabel uit het vorige basisvoorbeeld worden meer studenten toegevoegd en, in plaats van de major van elke student op elke rij te vermelden, worden de studenten gegroepeerd per major. Merk op dat elke major is ingesloten in zijn eigen <tbody>-blok, waarbij de eerste rij (<tr>-element) dient als de kop van het blok en de majortitel weergeeft binnen een <th>-element dat het colspan-attribuut gebruikt om de kop over alle drie de kolommen van de tabel te laten spannen. Elke resterende rij binnen de <tbody> van elke major vertegenwoordigt één student.

<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="3">Computer Science</th>
    </tr>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>240</td>
    </tr>
    <tr>
      <td>4077830</td>
      <td>Pierce, Benjamin</td>
      <td>200</td>
    </tr>
    <tr>
      <td>5151701</td>
      <td>Kirk, James</td>
      <td>230</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Russian Literature</th>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>220</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Astrophysics</th>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>260</td>
    </tr>
    <tr>
      <td>8892377</td>
      <td>Toyota, Hiroko</td>
      <td>240</td>
    </tr>
  </tbody>
</table>

CSS

Het grootste deel van de CSS is ongewijzigd. Er wordt echter een iets subtielere stijl toegevoegd voor kopcellen die zich direct binnen een <tbody> bevinden (in tegenstelling tot cellen die zich in de <thead> bevinden). Dit wordt gebruikt voor de koppen die de bijbehorende major van elke tabelsectie aangeven.

tbody > tr > th {
  border-top: 2px solid rgb(160 160 160);
  border-bottom: 1px solid rgb(140 140 140);
  background-color: #e4f0f5;
  font-weight: normal;
}

tbody {
  background-color: whitesmoke;
}

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

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

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

Resultaat

Technische samenvatting

Zie ook

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