Penggunaan tabel tentunya menjadikan informasi lebih ringkas dan mudah dipahami oleh pembacanya. Selain itu, tampilan data yang diambil dari databse juga akan mudah dilihat dan nyaman.
Dahulu tabel sering digunakan untuk mendesain tampilan situs web. Namun, seiring dengan perkembangan CSS pembuatan tampilan web dengan tabel semakin ditinggalkan dan fungsi tabel kian menyusut dan hanya untuk menampilkan data supaya lebih rapi dan nyaman dilihat.
Mencermati dan mengetahui betapa pentingnya tabel dalam situs web, sebagai programmer website kita harus mempelajari bagaimana membuat suatu tabel dengan HTML. Dalam HTML kita bisa menggunakan tag khusus yang sudah disediakan oleh HTML dalam pembuatan tabel, tag-tag itu disusun diantara <table> dan </table>.
Tag-tag yang dimaksud adalah :
<table>
Sebagai pembuka dari proses pembuatan tabel.
<tr>
Merupakan perintah untuk membuat baris.
<th>
Perintah / tag yang digunakan untuk membuat tabel header. Tag ini digunakan untuk mendefinisikan judul pada sel dalam tabel yang berada di bagian paling atas atau kiri tabel. Tabel header yang berada di bagian atas tabel merupakan judul kolom dari tabel, sedangkan tabel header yang terletak di bagian kiri adalah judul dari baris tabel.
<td>
Merupakan fungsi / tag yang digunakan untuk membuat kolom.
Terlihat dari hasilnya bagian atas tabel tercetak tebal menunjukkan bahwa itu merupakan judul dari kolom dibawahnya. Selanjutnya perhatikan source code dibawah ini :
<html>
<head>
<title>Contoh Tabel</title>
</head>
<body>
<table width="200" border="1">
<tr>
<th>No.</td>
<th>Nama</td>
<th>Alamat</td>
</tr>
<tr>
<th>1</td>
<td>Ahmad</td>
<td>Wonosobo</td>
</tr>
<tr>
<th>2</td>
<td>Istaqiem</td>
<td>Kepil</td>
</tr>
</table>
</body>
</html>
Hasil dari source code diatas adalah seperti dibawah ini :
Sebuah tabel di HTML dimulai dengan penggunaan tag <table> dan diakhiri dengan </table>. Diantara pasangan tag tersebut ditulis tag <tr> beserta penutupnya guna membuat baris tabel. Setelah itu diantara tag <tr> ditulis tag <th> guna membuat header atau tag <td> untuk membuat kolom.
Berikut contoh membuat tabel dengan HTML :
<html>
<head>
<title> Contoh Tabel </title>
</head>
<body>
<table border="1">
<tr>
<td>No.</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
<table>
<tr>
<td>1</td>
<td>Ahmad</td>
<td>Wonosobo</td>
</tr>
<table>
<tr>
<td>2</td>
<td>Istaqiem</td>
<td>Kepil</td>
</tr>
</table>
</body>
</html>
Hasil dari script diatas adalah sebagai berikut :
Contoh diatas merupakan pembuatan tabel lengkap tanpa menggunakan tag <th>, untuk membuat lebih paham dengan <th>, mari perhatikan source code berikut ini :
<html>
<head>
<title>Contoh Tabel</title>
</head>
<body>
<table width="200" border="1">
<tr>
<th>No.</td>
<th>Nama</td>
<th>Alamat</td>
</tr>
<tr>
<td>1</td>
<td>Ahmad</td>
<td>Wonosobo</td>
</tr>
<tr>
<td>2</td>
<td>Istaqiem</td>
<td>Kepil</td>
</tr>
</table>
</body>
</html>
Scrip source code diatas merupakan contoh membuat tabel disertai dengan header diatas bagian tabel akan menghasilkan :
<html>
<head>
<title>Contoh Tabel</title>
</head>
<body>
<table width="200" border="1">
<tr>
<th>No.</td>
<th>Nama</td>
<th>Alamat</td>
</tr>
<tr>
<th>1</td>
<td>Ahmad</td>
<td>Wonosobo</td>
</tr>
<tr>
<th>2</td>
<td>Istaqiem</td>
<td>Kepil</td>
</tr>
</table>
</body>
</html>
Hasil dari source code diatas adalah seperti dibawah ini :
No., Nama, Alamat, 1 dan 2 tercetak lebih tebal dari lainnya karena itu didefinisikan sebagai header tabel. Perlu diingat bahwa jika tag <th> diletakkan di atas bagian tabel maka itu disebut sebagai judul kolom dan apabila tag <th> diletakkan disebelah kiri maka itu dinamakan sebagai judul dari baris.
Semoga pemaparan ini memberi anda pengetahuan baru dan bisa bermanfaat. Selamat mencoba !
Tags:
HTML