Tampilan menjadi lebih rapi dan indah dipandang oleh para user dalam membaca data-data yang terpampang dalam sebuah website.
Untuk membuat tabel, digunakan Tag <table></table>.
Macam-macam atribut yang ada pada tag <table> sebagai berikut :
| TAG | KETERANGAN |
|---|---|
| width | Untuk mengatur lebar tabel (% atau Pixel) |
| height | Untuk mengatur tinggi tabel |
| border | Untuk menentukan tebal bingkai |
| cellpadding | Menentukan jarak padding antar cell |
| cellspacing | menentukan jarak spasi antar cell |
| name | Untuk menentukan nama tabel |
| bgcolor | Untuk menentukan warna background |
| background | Untuk menyisipkan gambar background |
| align | Peletakan teks(letak kiri, tengah, kanan) |
| valign | Peletakan teks(Letak atas, tengah, bawah) |
| style | Untuk mengatur CSS |
| bordercolor | Memberi warna pada bingkai |
Tag <table></table> tidak akan bisa berdiri sendiri tanpa adanya tag <th>, <td>, <tr>. Tag <th></th> digunakan untuk membuat header pada tabel, tag <tr></tr> digunakan untuk membuat baris, sedangkan tag <td></td> digunakan untuk membuat kolom.
Berikut daftar atribut tag <th>, <td>, <tr> sebagai berikut :
| TAG | KETERANGAN |
|---|---|
| height | Untuk mengatur tinggi tabel |
| bgcolor | Untuk menentukan warna background |
| background | Untuk menyisipkan gambar background |
| align | Peletakan teks(letak kiri, tengah, kanan) |
| valign | Peletakan teks(Letak atas, tengah, bawah) |
| colspan | Untuk menghilangkan beberapa kolom |
| rowspan | Untuk menghilangkan beberapa baris |
Berikut contoh penerapannya :
<html>
<head>
<title>Belajar Membuat Tabel</title>
</head>
<body>
<h2>Daftar Harga</h2>
<table border="1" style="border-collapse: collapse" width="100%">
<tr bgcolor="#eee">
<th>Barang</th><th>Harga</th><th>Jumlah Barang</th>
<th>Total</th>
</tr>
<tr align="center">
<td>Shampo</td><td>Rp. 1.000,-</td><td>5</td><td>Rp. 5.000,-</td>
</tr>
<tr align="center">
<td>Sabun</td><td>Rp. 3.000,-</td><td>1</td><td>Rp. 3.000,-</td>
</tr>
<tr align="center">
<td colspan="3">TOTAL >>> </td><td><b>Rp. 8.000,-</b></td>
</tr>
</table>
</body>
</html>
Hasil Output :
Demikian penjelasan pembuatan tabel dari saya, Semoga Bermanfaat :)