Tag <thead> HTML

Definicja i użycie

<thead> etykieta do grupowania tytułów treści tabeli HTML.

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

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

Uwaga:<thead> Element musi zawierać przynajmniej jeden z tych elementów: <tr> etykieta.

<thead> etykieta musi być używana w następującym kontekście: jako <table> podelementy elementu, w każdym <caption> i <colgroup> po elemencie, oraz w każdym </tbody>,<tfoot> i <tr> przed elementem.

Wskazówka:Domyślnie,<thead>Elementy <thead>, <tbody> i <tfoot> nie wpływają na układ tabeli. Ale możesz ustawić ich styl za pomocą CSS (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>luty</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Suma</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Spróbuj sam

Przykład 2

Ustawienie stylu <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>luty</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ć <thead> Zawartość (używając CSS):

<table style="width:100%">
  <thead style="text-align:left">
    <tr>
      <th>miesiąc</th>
      <th>oszczędności</th>
    </tr>
  </thead>
  </tbody>
    <tr>
      <td>styczeń</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>luty</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Spróbuj sam

Przykład 4

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

<table style="width:50%;">
  <thead style="vertical-align:bottom">
    <tr style="height:100px">
      <th>miesiąc</th>
      <th>oszczędności</th>
    </tr>
  </thead>
   </tbody>
    <tr>
      <td>styczeń</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>luty</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Spróbuj sam

Globalne atrybuty

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

Atrybuty zdarzeń

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

Domyślne ustawienia CSS

Większość przeglądarek wyświetli następujące wartości domyślne <thead> Element:

thead {
  display: grupa nagłówków tabeli;
  vertical-align: środek;
  border-color: dziedziczyć;
}

Obsługa przeglądarek

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