Tutorial Tabel HTML Part 3: Cara Membuat Judul Kolom Header Tabel HTML (tag th)

Dalam tutorial tabel HTML: cara membuat judul kolom header tabel HTML ini, kita akan mempelajari fungsi tag th. Tag th digunakan untuk membuat judul kolom (kolom header) dalam tabel HTML.


Fungsi Tag th

Sering kali dalam membuat tabel, baris pertama kita gunakan sebagai judul kolom dari baris-baris dibawahnya. Dan biasanya baris pertama tabel ini secara visual dibedakan dengan baris dibawahnya agar tampak lebih menarik, misalnya diberi warna yang berbeda, atau font yang berbeda.

Untuk keperluan ini, HTML memiliki tag khusus yang bisa digunakan, yaitu tag th (singkatan dari table head) . Dalam penggunaan tag th, kita hanya perlu mengganti tag td dengan th pada baris pertama tabel.

Sebagai contoh cara penggunaan tag th, silahkan buka aplikasi text editor, ketikkan kode berikut, dan save sebagai tabelth.html

Contoh penggunaan tag th:

<!DOCTYPE html>
<html>
    <head>
        <title>Cara Penulisan Tag th dalam Tabel HTML</title>
    </head>
<body>
<h2>Belajar Tag th untuk Tabel HTML</h2>
<table border="1">
    <tr>
        <th>Judul 1</th>
        <th>Judul 2</th>
        <th>Judul 3</th>
    </tr>
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>
</body>
</html>

Cara Membuat Kolom Header Untuk Tabel HTML (Tag th)Perhatikan pada baris pertama tabel, dimana dalam tutorial tentang tabel HTML sebelumnya, semua sel dari tabel ditulis menggunnakan tag td. Namun, kali ini tag td kita ganti menjadi tag th.

Tag th secara default akan ditampilkan sedikit berbeda pada beberapa web browser. Pada mozilla firefox yang saya gunakan, tag th ditampilkan dengan huruf tebal dan berada di tengah-tengah kolom.

Dengan menggunakan atribut style ataupun dengan CSS, kita dapat merubah tampilan huruf pada tag td biasa menjadi tag th tersebut. Tag th lebih diperuntukkan untuk memberikan struktur pada tabel. Sedapat mungkin kita menggunakan HTML hanya untuk stuktur, mengenai tampilan sebaiknya menggunakan CSS.

Untuk tutorial tabel HTML selanjutnya, kita akan membahas tentang tag caption untuk membuat judul tabel HTML.

11 Comments

  1. beby
    25 Sep 14
  2. kaya ilmu
    21 May 15
    • Andre
      21 May 15
  3. dadan
    25 Apr 16
  4. Mohammad Adiyatma
    17 Jun 16
    • Andre
      18 Jun 16
  5. ardy
    20 Jan 18
  6. Anonymous
    24 Aug 18

Add Comment

Leave a Reply to Andre Cancel reply