HTML <tfoot> etiket

definition og brug

<tfoot> etiket bruges til at gruppere fodsøg indhold i HTML-tabeller.

<tfoot> elementet sammen med <thead> og <tbody> elementer bruges sammen til at specificere hver del af tabellen (fodnote, rubrik, hovedindhold).

browserne kan bruge disse elementer til at sikre, at rubrikker og fodnoter vises separat, når tabellens hovedindhold rulles. Derudover kan disse elementer gøre det muligt at printe rubrikker og fodnoter øverst og nederst på hver side, når store tabeller printes over flere sider.

bemærk: <tfoot>-elementet skal indeholde en eller flere <tr> etiket.

<tfoot> etiket skal bruges i følgende kontekst: som en <table> elementets underelementer, i hvilken som helst <caption>og<colgroup>og<thead> og <tbody> element efter.

tip:Standardmæssigt, <thead>, <tbody> og <tfoot> elementer påvirker ikke tabellens layout. Men du kan bruge CSS til at sætte disse elementers stil (se eksempler nedenfor)!

eksempel

eksempel 1

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

<table>
  <thead>
    <tr>
      <th>maaneder</th>
      <th>opsparing</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>januar</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februar</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Samlet</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prøv det selv

eksempel 2

Brug CSS til at sætte stil 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>maaneder</th>
      <th>opsparing</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>januar</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februar</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Samlet</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prøv det selv

eksempel 3

hvorledes justere <tfoot> indholdet (brug CSS):

<table style="width:100%">
  <tr>
    <th>maaneder</th>
    <th>opsparing</th>
  </tr>
  <tr>
    <td>januar</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>Samlet</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prøv det selv

eksempel 4

hvorledes justere lodret <tfoot> indholdet (brug CSS):

<table style="width:100%">
  <tr>
    <th>maaneder</th>
    <th>opsparing</th>
  </tr>
  <tr>
    <td>januar</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Samlet</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prøv det selv

Globale attributter

<tfoot> Tagget understøtter også Globale attributter i HTML.

begivenhedsattributter

<tfoot> Tagget understøtter også Begivenhedsattributter i HTML.

Standard CSS-indstillinger

De fleste browsere viser følgende standardværdier <tfoot> Element:

tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: arvelig;
}

Browserstøtte

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