Cara Membuat Judul Kolom/ Header Tabel HTML (Tag th)
Cara Membuat Judul Kolom/ Header Tabel HTML Menggunakan (Tag th)
Sebelumnya admin sudah membahas Mengenal atribut Border, Cellpadding dan Cellspacing pada tabel HTML. Dimana kita dapat mengatur ketebalan dan jarak pada tabel HTML.Pada tutorial part 2 untuk mengatur tabel kali ini admin akan membahas Cara membuat judul kolom pada sebuah tabel HTML menggunakan fungsi tag th. Seperti misalnya memberikan No, Nama dan lain-lain.
Fungsi Tag th
Sering kali dalam sebuah tabel pada baris pertama kita akan membuat judul dari tabel, yang mendeskripsikan isi dari kolom dibawahnya atau menjelaskan baris kedua, ketiga dan seterusnya yang termasuk dari kolom pertama tersebut.Misalnya membuat No, Nama, Alamat dan lain sebagainya. Dan biasanya baris pertama atau judul tabel ini secara visual dibedakan dengan isi kolom agar terlihat lebih menarik. Seperti pemberian warna atau ukuran dan ketebalan font yang berbeda.
Tag th adalah singkatan dari (table head). penulisan tag th diawali dengan <th> dan diakhiri dengan </th>. Hampir sama seperti pembuatan tabel sebelumnya, bedanya syntak baris pertama tag <td> diganti dengan tag <th>.
Contoh file judultabel.html
<!DOCTYPE html>
<html>
<head>
<title>Cara Penulisan Tag th pada Tabel HTML</title>
</head>
<body>
<h3>Belajar Tag th pada Tabel HTML</h3>
<table border="1" cellspacing="0">
<tr>
<th>NO</th>
<th>NAMA</th>
<th>ALAMAT</th>
</tr>
<tr>
<td>1</td>
<td>ZikriTekno</td>
<td>Taluk Kuantan</td>
</tr>
<tr>
<td>2</td>
<td>ZikriTekno</td>
<td>Pangean</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Cara Penulisan Tag th pada Tabel HTML</title>
</head>
<body>
<h3>Belajar Tag th pada Tabel HTML</h3>
<table border="1" cellspacing="0">
<tr>
<th>NO</th>
<th>NAMA</th>
<th>ALAMAT</th>
</tr>
<tr>
<td>1</td>
<td>ZikriTekno</td>
<td>Taluk Kuantan</td>
</tr>
<tr>
<td>2</td>
<td>ZikriTekno</td>
<td>Pangean</td>
</tr>
</table>
</body>
</html>
Pada syntak diatas admin memberikan atribut border dan cellspacing yang telah admin jelaskan pada tutorial sebelumnya.
Terlihat dari syntak diatas ada 3 baris dan 3 kolom, pada baris pertama menggunakan fungsi (tag th) dan baris kedua dan ketiga menggunakan fungsi (tag td). jika dijalankan maka akan menampilkan seperti gambar berikut :
 |
| judul tabel |
Ok sampai tahap ini kita sudah menghasilkan tampilan tabel sederhana yang telah memenuhi standar.
Itulah tutorial singkat Cara membuat judul/ header tabel HTML. Selanjutnya Tutorial part 3 untuk mengatur tabel mebahas tentang Cara menggabungkan cell tabel HTML menggunakan atribut (rowspan dan colspan).
Artikel yang bermanfaat
ReplyDelete