Tag <tfoot> HTML

Definicja i użycie

<tfoot> tagi są używane do grupowania treści stopki w tabeli HTML.

<tfoot> Element <thead> i <tbody> Elementy te są używane razem, aby określić każdą część tabeli (stopka, nagłówek, treść).

Przeglądarki mogą używać tych elementów, aby umożliwić niezależne wyświetlanie nagłówków i stopów podczas przewijania treści tabeli. Ponadto, podczas drukowania dużych tabel rozciągających się na wiele stron, te elementy mogą umożliwić drukowanie nagłówków i stopów w górnej i dolnej części każdej strony.

Uwaga: Element <tfoot> musi zawierać przynajmniej jeden <tr> tagi.

<tfoot> Tagi muszą być używane w następującym kontekście: jako <table> Podelementy elementu, w każdym <caption>,<colgroup>,<thead> i <tbody> po elemencie.

Wskazówka:Domyślnie, <thead>, <tbody> i <tfoot> Elementy te nie wpływają na układ tabeli. Ale możesz użyć CSS do ustawienia ich stylów (zobacz poniższe przykłady)!

Przykład

Przykład 1

HTML tabela zawierająca <thead>, <tbody> i <tfoot> elementy:

<table>
  <thead>
    <tr>
      <th>Miesiąc</th>
      <th>Oszczędności</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Styczeń</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td> lutego</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Suma</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Spróbuj sam

Przykład 2

Ustawianie stylów dla <thead>, <tbody> i <tfoot> za pomocą CSS:

<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>Miesiąc</th>
      <th>Oszczędności</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Styczeń</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td> lutego</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Suma</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Spróbuj sam

Przykład 3

Jak wyrównać <tfoot> Zawartość (używając CSS):

<table style="width:100%">
  <tr>
    <th>Miesiąc</th>
    <th>Oszczędności</th>
  </tr>
  <tr>
    <td>Styczeń</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td> lutego</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>Suma</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Spróbuj sam

Przykład 4

Jak wyrównać pionowo <tfoot> Zawartość (używając CSS):

<table style="width:100%">
  <tr>
    <th>Miesiąc</th>
    <th>Oszczędności</th>
  </tr>
  <tr>
    <td>Styczeń</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td> lutego</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Suma</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Spróbuj sam

Globalne atrybuty

<tfoot> Tagi te obsługują również Globalne atrybuty HTML.

Atrybuty wydarzeń

<tfoot> Tagi te obsługują również Atrybuty wydarzeń w HTML.

Domyślne ustawienia CSS

Większość przeglądarek będzie używała następujących wartości domyślnych do wyświetlania <tfoot> Element:

tfoot {
  display: grupa stopki tabeli;
  vertical-align: środek;
  border-color: dziedziczenie;
}

Obsługa przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie