HTML <thead> 标签

Definition og brug

<thead> etiketten bruges til at gruppere titelindhold i HTML-tabeller.

<thead> elementet med </tbody> og </tfoot> elementer bruges sammen til at specificere hver del af tabellen (overskrift, krop, fod).

browseren kan bruge disse elementer til at gøre det muligt at vise overskrifter og fødder uafhængigt, når kroppen af tabellen rulles. Derudover kan disse elementer gøre det muligt at printe overskrifter og fødder øverst og nederst på hver side, når store tabeller printes over flere sider.

Bemærk:<thead> elementet skal have en eller flere <tr> etiket.

<thead> etiketten skal bruges i følgende kontekst: som <table> elementets underelementer, i alle <caption> og <colgroup> element efter, samt i alle </tbody>,</tfoot> og <tr> element før.

Tip:som standard<thead>og <tfoot>-elementer påvirker ikke tabellens layout. Men du kan bruge CSS til at sætte stilen på disse elementer (se eksemplerne nedenfor)!

Eksempel

eksempel 1

HTML-tabellen, der indeholder <thead>, <tbody> og <tfoot>-elementer:

<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>Samlet</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Try it yourself

eksempel 2

Brug CSS til at sætte stilen på <thead>, <tbody> og <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>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>Samlet</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Try it yourself

eksempel 3

hvorledes justere <thead> indholdet (brug 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

eksempel 4

hvorledes justere lodret <thead> indholdet (brug 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