Tag thead

Tag thead menentukan bahagian atas jadual. Digunakan untuk mengumpulkan baris dengan cara yang membolehkan gaya CSS digunakan terus kepada sekumpulan baris. Hanya satu tag thead dibenarkan dalam satu jadual.

Tag thead sering digunakan bersama dengan tbody dan tfoot untuk menentukan bahagian atas, bahagian utama, dan bahagian bawah jadual HTML.

Contoh

Mari tambahkan warna teks merah kepada kumpulan baris yang dikumpulkan oleh tag thead menggunakan sifat color:

html<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Surname</th>
      <th>Gaji</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>nama1</td>
      <td>surname1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>nama2</td>
      <td>surname2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>bilangan: 2</td>
      <td>-</td>
      <td>jumlah: 1200$</td>
    </tr>
  </tfoot>
</table>

cssthead {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

Contoh

Di sini thead tidak berada di atas, dan tfoot tidak berada di bawah, namun pelayar akan meletakkan kedua-duanya di kedudukan yang sepatutnya:

html<table>
  <tfoot>
    <tr>
      <td>bilangan: 2</td>
      <td>-</td>
      <td>jumlah: 1200$</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>nama1</td>
      <td>surname1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>nama2</td>
      <td>surname2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Surname</th>
      <th>Gaji</th>
    </tr>
  </thead>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Lihat juga