HTML <thead> etikett

Definition och användning

<thead> etikett används för att gruppera rubrikinnehåll i HTML-tabeller.

<thead> element med </tbody> och <tfoot> element kombineras för att definiera varje del (rubrik, kropp, fotnot) av tabellen.

webbläsare kan använda dessa element för att visa rubrik och fotnot oberoende när kroppen av tabellen rullas. Dessutom kan dessa element användas för att skriva ut rubrik och fotnot på toppen och botten av varje sida när en stor tabell som sträcker sig över flera sidor skrivs ut.

Observera:<thead> element måste innehålla en eller flera <tr> etikett.

<thead> etikett måste användas i följande kontext: som <table> elementets underelement, vid alla <caption> och <colgroup> element efter, samt vid alla </tbody>och<tfoot> och <tr> element innan

Tips:som standard<thead>och <tfoot>-element påverkar inte tabellens layout. Men du kan använda CSS för att ställa in stilen för dessa element (se exempel nedan)!

exempel

exempel 1

HTML-tabell som innehåller <thead>, <tbody> och <tfoot>-element:

<table>
  <thead>
    <tr>
      <th>Månad</th>
      <th>Sparande</th>
    </tr>
  </thead>
  </tbody>
    <tr>
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>totalt</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prova själv

exempel 2

Använd CSS för att ställa in stilen för <thead>, <tbody> och <tfoot>:

<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>Månad</th>
      <th>Sparande</th>
    </tr>
  </thead>
  </tbody>
    <tr>
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>totalt</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prova själv

exempel 3

hur man justerar <thead> innehållet (använd CSS):

<table style="width:100%">
  <thead style="text-align:left">
    <tr>
      <th>Månad</th>
      <th>Sparande</th>
    </tr>
  </thead>
  </tbody>
    <tr>
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Prova själv

exempel 4

hur man justerar vertikalt <thead> innehållet (använd CSS):

<table style="width:50%;">
  <thead style="vertical-align:bottom">
    <tr style="height:100px">
      <th>Månad</th>
      <th>Sparande</th>
    </tr>
  </thead>
   </tbody>
    <tr>
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Prova själv

Globala egenskaper

<thead> Etiketterna stöder också Globala egenskaper i HTML.

händelseegenskaper

<thead> Etiketterna stöder också Händelseegenskaper i HTML.

Standard CSS-inställningar

De flesta webbläsare kommer att använda följande standardvärden för att visa <thead> Element:

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

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd