Znacznik <tbody> HTML

Definicja i użycie

<tbody> tag jest używany do grupowania treści正文 w tabeli HTML.

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

Przeglądarki mogą 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ągających się na wiele stron, te elementy mogą umożliwić druk nagłówków i stopków na górze i dole każdej strony.

Uwaga:<tbody> wewnętrzny element musi zawierać jeden lub więcej tag <tr>.

<tbody> znacznik musi być używany w następującym kontekście: jako <table> podelementy elementu, w każdym <caption>,<colgroup> i <thead> po elemencie.

Wskazówka:Domyślnie, elementy <thead>, <tbody> i <tfoot> nie wpływają na układ tabeli. Możesz jednak 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ć <tbody> Zawartość w środku (używając CSS):

<table style="width:100%">
  <thead>
    <tr>
      <th>miesiąc</th>
      <th>oszczędności</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <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 <tbody> Zawartość w środku (używając CSS):

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

Spróbuj sam

Globalne atrybuty

<tbody> Znacznik również obsługuje Globalne atrybuty HTML.

Atrybuty zdarzeń

<tbody> Znacznik również obsługuje Atrybuty zdarzeń w HTML.

Domyślne ustawienia CSS

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

tbody {
  display: grupa wierszy 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