Cara Membuat Judul Kolom di Header Tabel HTML

Penggunaan Tag TH dalam Tabel

Penggunaan Tag TH untuk Membuat Kolom Judul di Tabel HTML
Dalam tabel biasanya dalam baris paling pertama kita akan membuat judul dari kolom, judul kolom ini akan menejelaskan isi dari kolom.
di tutorial Cara Membuat Kolom Judul Header Tabel HTML ini saya akan menjelaskan bagaimana cara membuat judul dari kolom ini, serta saya akan menyuntikan sedikit code css agar nanti tampilan tabel lebih komplit.

Tag th

untuk membuat judul kolom pada tabel kita akan memakai tag th, tag th adalah singkatan dari table headings. penulisan tag th ditulis dengan <th>…</th>. secara otomatis tag th akan menambilkan text tebal atau bold.

Contoh Tag Th

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table style="width:100%" border="1">
 <tr>
 <th>Nama Depan</th>
 <th>Nama Belakang</th>
 <th>Points</th>
 </tr>
 <tr>
 <td>Jill</td>
 <td>Smith</td>
 <td>50</td>
 </tr>
 <tr>
 <td>Eve</td>
 <td>Jackson</td>
 <td>94</td>
 </tr>
 <tr>
 <td>John</td>
 <td>Doe</td>
 <td>80</td>
 </tr>
</table>
</body>
</html>

perhatikan contoh diatas secara otomatis text pada tag th akan tampil di tengah (center), dan tulisan menjadi bold.
untuk membuat text pada tag th tampil rata kiri (left) kita bisa mengunakan penggunaan style css, dan css akan membuat tampilan table lebih indah.

contoh tag th text left

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
 border: 1px solid black;
 border-collapse: collapse;
}
th, td {
 padding: 5px;
}
th {
 text-align: left;
}
</style>
</head>
<body>
<table style="width:100%" border="1">
 <tr>
 <th>Nama Depan</th>
 <th>Nama Belakang</th>
 <th>Points</th>
 </tr>
 <tr>
 <td>Jill</td>
 <td>Smith</td>
 <td>50</td>
 </tr>
 <tr>
 <td>Eve</td>
 <td>Jackson</td>
 <td>94</td>
 </tr>
 <tr>
 <td>John</td>
 <td>Doe</td>
 <td>80</td>
 </tr>
</table>
</body>
</html>

dengan contoh kedua ini kita bisa melihat bahwa text pada tag th akan tampil di kiri bukan di tengah. dan perhatikan border atau garis dari tabel juga lebih tipis dan lebih enak dilihat dari pada tabel sebelumnya.
pada contoh kedua saya menambahkan sedikit style css kedalam code html berikut code css nya.

saya menempatkan style ini pada bagian tag <head> html sehingga membuat tabel lebih sempurna dari pada tanpa style, begitulah kiranya fungsi dari css, nanti kita akan pelajari tentang css ini secara lengkap.
sekian tutorial tentang membuat judul kolom tabel html ini, semoga bermanfaat, jika ada yang masih kurang jelas silakan dikomentar. kolom komentar selalu terbuka untuk anda.

Keyword:

  • membuat judul table di php

Ada Komentar?

×