Tanda <th> HTML

Definisi dan penggunaan

<th> Tag <th> menentukan sel judul dalam tabel HTML.

Tabel HTML memiliki dua jenis sel:

  • Sel judul - mengandung informasi judul (menggunakan <th> pembuatan elemen)
  • Sel data - mengandung data (menggunakan <td> pembuatan elemen)

Secara default,<th> Teks dalam elemen adalah tebal dan di tengah.

Secara default, teks dalam elemen <td> adalah biasa dan diatur kiri.

Lihat pula:

Tutorial HTML:Tabel HTML

Panduan Referensi HTML DOM:Objek TableHeader

Tutorial CSS:Atur gaya formulir

Contoh

Contoh 1

Tabel HTML sederhana yang mengandung tiga baris, dua sel judul dan empat sel data:

<table>
  <tr>
    <th>Bulan</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Coba sendiri

Contoh 2

Bagaimana untuk mengeatur <th> Isi (menggunakan CSS):

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

Coba sendiri

Contoh 3

Bagaimana menambahkan warna latar untuk sel header tabel (menggunakan CSS):

<table>
  <tr>
    <th style="background-color:#FF0000">Bulan</th>
    <th style="background-color:#00FF00">Tabungan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
 </table>

Coba sendiri

Contoh 4

Bagaimana mengatur tinggi sel header tabel (menggunakan CSS):

<table>
  <tr>
    <th style="height:100px">Bulan</th>
    <th style="height:100px">Tabungan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
</table>

Coba sendiri

Contoh 5

Bagaimana menentukan sel judul tabel untuk tidak mengganti baris (menggunakan CSS):

<table>
  <tr>
    <th>Bulan</th>
    <th style="white-space:nowrap">Uang untuk mobil baru</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
</table>

Coba sendiri

Contoh 6

Bagaimana mengatur penarikan vertikal: <th> Isi (menggunakan CSS):

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

Coba sendiri

Contoh 7

Bagaimana menetapkan lebar sel judul tabel (menggunakan CSS):

<table style="width:100%">
  <tr>
    <th style="width:70%">Bulan</th>
    <th style="width:30%">Tabungan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
</table>

Coba sendiri

Contoh 8

Bagaimana membuat judul tabel:

<table>
  <tr>
    <th> Nama </th>
    <th> Email </th>
    <th>Telepon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Coba sendiri

Contoh 9

Bagaimana membuat tabel dengan judul:

<table>
  <caption>Tabungan Bulanan</caption>
  <tr>
    <th>Bulan</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Coba sendiri

Contoh 10

Bagaimana menentukan sel tabel yang melintasi banyak baris atau kolom:

<table>
  <tr>
    <th> Nama </th>
    <th> Email </th>
    <th colspan="2">Telepon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Coba sendiri

Atribut

Atribut Nilai Deskripsi
abbr Teks Ditetapkan versi singkat konten sel judul.
colspan Angka Ditetapkan bahwa sel judul harus melintasi kolom.
headers header_id Ditetapkan satu atau beberapa sel judul yang berhubungan dengan sel.
rowspan Angka Ditetapkan bahwa sel judul harus melintasi baris.
scope
  • col
  • colgroup
  • row
  • rowgroup
 Kolom judul adalah judul kolom, baris judul, atau grup kolom atau baris yang berjudul.

Atribut global

<th> Tanda masih mendukung Atribut global dalam HTML.

Atribut acara

<th> Tanda masih mendukung Atribut acara dalam HTML.

Pengaturan CSS standar

Sebagian besar browser akan menampilkan nilai standar berikut ini <th> Elemen:

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}

Dukungan browser

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