Belajar Tabel HTML Part 3 - Cara Membuat Judul Kolom Header Tabel (Tag th)

Desember 19, 2021 Posting Komentar

Membuat sebuah judul dalam baris dan kolom pertama itu sangat diharuskan. Kenapa? Supaya tampilan dan tulisan akan rapih bila ada perbedaan diantara baris dan kolom pertama, dan baris kolom seterusnya. Cara ini sangat efektif untuk membuat tampilan menarik. Pemberian judul pada setiap baris dan kolom memudahkan juga perhatian si pembaca.

Belajar Tabel HTML Part 3 - Cara Membuat Judul Kolom Header Tabel (Tag th)

Untuk belajar membuat judul pada kolom Header dengan Tag <th> berpengaruh besar dalam sebuah table singkat. Memberikan judul pada pembuka tabel itu sangatlah penting. Tidak hanya dari segi tampilan ya.

Tag <th> ini di tulis dalam Tag <tr> berharap anda dapat memahaminya dengan baik. Contoh pembuatan ya seperti berikut:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Tag th pada table html - scripypad</title>
</head>
<body>
<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 colspan="2" >Baris 2, Kolom 2 & 3</td>
    </tr>
    <tr>
        <td rowspan="2"> Baris 3 & 4, Kolom 1</td>
        <td> Baris 3, Kolom 2</td>
        <td> Baris 3, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 4, Kolom 2</td>
        <td> Baris 4, Kolom 3</td>
    </tr>
</table>
</body>
</html>


Kesimpulan

Hasilnya akan seperti ini. Diatas ada sebuah 3 judul yang dibuat menggunakan Tag <th> dalam Tag <tr> yang dijelaskan diawal tadi. Menarik bukan?