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

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


Halo Kawan-kawan,
Pada kesempatan kali ini kita akan belajar tag th yaitu jenis tag yang digunakan untuk membuat judul kolom (kolom header) dalam tabel HTML.


Langsung saja perhatikan kode berikut:
<!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>

Hasil Code:


Dapat dilihat pada tabel code diatas,
Jadi fungsi tag th adalah untuk menampilkan bagian yang menjadi judul kolom dengan cara memberi font yang berbeda. Cara penggunaannyapun tinggal mengganti tag td dengan th pada baris pertama tabel.


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.