HTML <thead> tag

Aanbevolen cursussen:

<thead> Definitie en gebruik

<thead> elementen worden gebruikt om de titelinhoud van HTML-tabellen te groeperen. </tbody> en <tfoot> elementen gecombineerd worden gebruikt om elke sectie van de tabel (kop, tekst, voettekst) te specificeren.

browsers kunnen deze elementen gebruiken om koppen en voetteksten afzonderlijk weer te geven tijdens het scrollen van de tabeltekst. Bovendien kunnen deze elementen ervoor zorgen dat koppen en voetteksten van een grote tabel op de boven- en onderkant van elke pagina worden afgedrukt wanneer een tabel over meerdere pagina's wordt afgedrukt.

Opmerking:<thead> elementen moeten minstens één of meer <tr> labels.

<thead> labels moeten in de volgende context worden gebruikt: als <table> onderdeel van de elementen, op elk <caption> en <colgroup> na de elementen, en op elk </tbody>,<tfoot> en <tr> voor de elementen.

Tip:Standaard:<thead>en <tbody> en <tfoot>-elementen beïnvloeden de lay-out van de tabel niet. Maar je kunt CSS gebruiken om de stijl van deze elementen in te stellen (zie de voorbeelden hieronder)!

Voorbeeld

Voorbeeld 1

HTML-tabel met <thead>, <tbody> en <tfoot>-elementen:

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  </tbody>
    <tr>
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>February</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Totaal</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Try it yourself

Voorbeeld 2

Gebruik CSS om de stijl van <thead>, <tbody> en <tfoot> in te stellen:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  </tbody>
    <tr>
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>February</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Totaal</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Try it yourself

Voorbeeld 3

Hoe uitlijnen: <thead> inhoud (gebruik CSS):

<table style="width:100%">
  <thead style="text-align:left">
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  </tbody>
    <tr>
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>February</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Try it yourself

Voorbeeld 4

Hoe verticaal uitlijnen: <thead> inhoud (gebruik CSS):

<table style="width:50%;">
  <thead style="vertical-align:bottom">
    <tr style="height:100px">
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
   </tbody>
    <tr>
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>February</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Try it yourself

Global attributes

<thead> The tag also supports Global attributes in HTML.

event attributes

<thead> The tag also supports Event attributes in HTML.

Default CSS settings

Most browsers will display the following default values <thead> Element:

thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support