Het element <tfoot>

Attributen

Dit element bevat de globale attributen.

Verouderde attributen

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

Gebruiksopmerkingen

• De <tfoot> wordt geplaatst na eventuele elementen <caption>, <colgroup>, <thead>, <tbody>, en <tr>.
• Samen met de bijbehorende elementen <thead> en <tbody> biedt het <tfoot>-element nuttige semantische informatie en kan het gebruikt worden bij weergave voor zowel scherm als afdrukken. Het opgeven van dergelijke tabelinhoudsgroepen biedt ook waardevolle contextuele informatie voor ondersteunende technologieën, waaronder schermlezers en zoekmachines.
• Bij het afdrukken van een document specificeert de tabelvoet, in het geval van een tabel die meerdere pagina's beslaat, doorgaans informatie die als tussentijdse samenvatting op elke pagina wordt weergegeven.

Voorbeeld

Zie <table> voor een compleet tabelvoorbeeld dat gangbare standaarden en best practices introduceert.

Tabel met voettekst

Dit voorbeeld demonstreert een tabel die is opgedeeld in een koptekstsectie met kolomkoppen, een hoofdtekstsectie met de hoofdgegevens van de tabel, en een voettekstsectie die de gegevens van één kolom samenvat.

HTML

De elementen <thead>, <tbody>, en <tfoot> worden gebruikt om een eenvoudige tabel in te delen in semantische secties. Het <tfoot>-element vertegenwoordigt de voetsectie van de tabel, die een rij (<tr>) bevat die het berekende gemiddelde van de waarden in de kolom "Credits" weergeeft.

Om de cellen in de voet aan de juiste kolommen toe te wijzen, wordt het colspan-attribuut gebruikt op het <th>-element om de rijkopcel over de eerste drie tabelkolommen te laten overspannen. De enkele gegevenscel (<td>) in de voet wordt automatisch op de juiste plaats geplaatst, d.w.z. de vierde kolom, waarbij de weggelaten waarde van het colspan-attribuut standaard op 1 staat. Daarnaast is het scope-attribuut ingesteld op row bij de kopcel (<th>) in de voet, om expliciet aan te geven dat deze voetkopcel betrekking heeft op de tabelcellen binnen dezelfde rij, wat in ons voorbeeld de ene gegevenscel is in de voetrij die het berekende gemiddelde 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>
  <tfoot>
    <tr>
      <th colspan="3" scope="row">Average Credits</th>
      <td>240</td>
    </tr>
  </tfoot>
</table>

CSS

Er wordt wat basale CSS gebruikt om de tabelvoet te stylen en te markeren, zodat de voetcellen opvallen ten opzichte van de gegevens in de tabelhoofdtekst.

tfoot {
  border-top: 3px dotted rgb(160 160 160);
  background-color: #2c5e77;
  color: white;
}

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}

thead {
  border-bottom: 2px solid rgb(160 160 160);
  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;
}

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

Resultaat

Technische samenvatting

Zie ook

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