Thead-taggen

Taggen thead definerer den øverste delen av en tabell. Den brukes for å gruppere rader på en slik måte at man umiddelbart kan påføre CSS-stiler til en bestemt gruppe. Det kan kun være én thead-tagg i en tabell.

Taggen thead brukes ofte sammen med tbody og tfoot for å definere toppdelen, hoveddelen og bunn-delen av en HTML-tabell.

Eksempel

La oss gi gruppen av rader samlet av taggen thead en rød tekstfarge ved hjelp av egenskapen color:

html<table>
  <thead>
    <tr>
      <th>Navn</th>
      <th>Etternavn</th>
      <th>Lønn</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>navn1</td>
      <td>etternavn1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>navn2</td>
      <td>etternavn2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>antall: 2</td>
      <td>-</td>
      <td>totalt: 1200$</td>
    </tr>
  </tfoot>
</table>

cssthead {
  color: red;
}

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

Результат:

Eksempel

Her er thead ikke plassert på toppen, og tfoot ikke på bunnen, likevel vil nettleseren plassere dem på riktig sted:

html<table>
  <tfoot>
    <tr>
      <td>antall: 2</td>
      <td>-</td>
      <td>totalt: 1200$</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>navn1</td>
      <td>etternavn1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>navn2</td>
      <td>etternavn2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>Navn</th>
      <th>Etternavn</th>
      <th>Lønn</th>
    </tr>
  </thead>
</table>

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

Результат:

Se også