De tfoot-tag

De tag tfoot definieert het onderste deel van een tabel. Wordt gebruikt om rijen te groeperen op zo'n manier dat CSS-stijlen direct op een bepaalde groep kunnen worden toegepast. Een tabel kan slechts één tfoot-tag bevatten.

De tag tfoot wordt vaak samen gebruikt met thead en tbody om het bovenste deel, het hoofdgedeelte en het onderste deel van een HTML-tabel te definiëren. Standaard plaatst de browser de inhoud van tfoot onderaan de tabel, en thead - bovenaan.

Voorbeeld

Laten we de groep rijen, gegroepeerd door de tag tfoot, een rode tekstkleur geven met behulp van de eigenschap color:

html<table>
  <thead>
    <tr>
      <th>Naam</th>
      <th>Achternaam</th>
      <th>Salaris</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>naam1</td>
      <td>achternaam1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>naam2</td>
      <td>achternaam2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>aantal: 2</td>
      <td>-</td>
      <td>totaal: 1200$</td>
    </tr>
  </tfoot>
</table>

csstfoot {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

Voorbeeld

En hier, laten we kijken, thead staat niet bovenaan, en tfoot staat niet onderaan, toch plaatst de browser ze op hun eigen plaatsen:

html<table>
  <tfoot>
    <tr>
      <td>aantal: 2</td>
      <td>-</td>
      <td>totaal: 1200$</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>naam1</td>
      <td>achternaam1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>naam2</td>
      <td>achternaam2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>Naam</th>
      <th>Achternaam</th>
      <th>Salaris</th>
    </tr>
  </thead>
</table>

csstfoot {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

Zie ook