Pusat Ilmu Secara Detil

Tutorial HTML: Cara Membuat Judul Kolom Tabel HTML

Tutorial HTML: Cara Membuat Judul Kolom Tabel HTML

Sesi tutorial dasar-dasar HTML kali ini akan mengdiskusikan tentang pembuatan judul kolom pada sebuah tabel.

Dalam menyajikan beberapa data dalam bentuk tabel, kolom-kolom pada baris bertama dari tabel tersebut akan bertindak sebagai judul.

Untuk membuat kolom berfungsi sebagai judul, maka kita dapat menggunakan tag<th>. Tag <th> merupakan singkatan dari table head, yang artinya bagian kepala dari tabel.


Fungsi Tag <th> dan cara penggunaannya dalam tabel HTML

Idealnya sebuah tabel yang disajikan harus memiliki judul kolom untuk setiap data yang diwakilinya. Penggunaan tag<th> yang berfungsi sebagai pembuatan judul kolom diletakkan diantara tag <tr>..</tr>, sehingga akan menjadi
<table>
    <tr>
        <th>No</th>
        <th>Nama</th>
        <th>Alamat</th>
    </tr>
</table>

Script diatas akan membuat judul kolom sebanyak tiga buah, yaitu : kolom judul "No", kolom judul "Nama", kolom judul "Alamat".

Contoh penggunaan tag<th> untuk membuat judul kolom tabel

Dalam contoh ini, kita akan membuat empat buah judul kolom seperti yang ditunjukkan oleh Gambar.1 dibawah ini :



(Gambar.1

Maka script html untuk membuat tabel yang memiliki judul kolom seperti Gambar.1 diatas adalah sebagai berikut :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>NIM</th>
    <th>Jenis Kelamin</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Andi Fraseria</td>
    <td>220120102001</td>
    <td>Pria</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Rudi Hariadi</td>
    <td>220120102002</td>
    <td>Pria</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Doni Mikarel</td>
    <td>220120102003</td>
    <td>Pria</td>
  </tr>
</table>
</body>
</html>

Tutorial Tabel HTML lainnya :

Share this:

You Might Also Like:

Disqus Comments