Tanda <tbody> HTML

Rekomendasi kuliah:

<tbody> Definisi dan penggunaan

<tbody> tanda digunakan untuk mengelompokkan konten isian tabel HTML. <thead> dan </tfoot> elemen digabungkan untuk menentukan setiap bagian tabel (isi, judul, kaki halaman).

Peramban dapat menggunakan elemen ini untuk membuat judul dan kaki halaman muncul secara terpisah saat menggulir konten tabel. Selain itu, saat mencetak tabel besar yang melintasi beberapa halaman, elemen ini dapat membuat judul dan kaki halaman muncul di atas dan bawah setiap halaman.

Perhatian:<tbody> elemen dalam harus memiliki satu atau lebih tanda <tr>.

<tbody> tanda harus digunakan dalam konteks berikut: sebagai <table> elemen anak, di mana saja <caption>dan<colgroup> dan <thead> setelah elemen.

Petunjuk:Secara default, elemen <thead>, <tbody>, dan <tfoot> tidak mempengaruhi tata letak tabel. Namun, Anda dapat mengatur gaya elemen ini menggunakan CSS (lihat contoh di bawah ini)!

contoh

contoh 1

Tabel HTML yang mengandung elemen <thead>, <tbody>, dan <tfoot>:

<table>
  <thead>
    <tr>
      <th>Bulan</th>
      <th>Tabungan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  </tfoot>
    <tr>
      <td>total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Coba Sendiri

contoh 2

Atur gaya <thead>, <tbody>, dan <tfoot> menggunakan 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>Bulan</th>
      <th>Tabungan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  </tfoot>
    <tr>
      <td>total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Coba Sendiri

contoh 3

bagaimana untuk mengatur rata <tbody> isi (menggunakan CSS):

<table style="width:100%">
  <thead>
    <tr>
      <th>Bulan</th>
      <th>Tabungan</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Coba Sendiri

contoh 4

bagaimana untuk mengatur rata vertikal <tbody> isi (menggunakan CSS):

<table style="width:50%;">
  <tr>
    <th>Bulan</th>
    <th>Tabungan</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr style="height:100px">
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Coba Sendiri

Atribut Global

<tbody> Tanda ini juga mendukung Atribut Global di HTML.

Atribut Acara

<tbody> Tanda ini juga mendukung Atribut Acara di HTML.

Pengaturan CSS Baku

Sebagian besar peramban akan menampilkan nilai baku berikut ini <tbody> Elemen:

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

Dukungan Peramban

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan