Tabel HTML Tutorial 3: Cara Membuat Judul Kolom Header, tag th

0
32

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>

Header Tabel HTML, gurukomputer.com, welovebet.com

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here