C. Pembatas (Border) Tabel
Pembuatan tabel yang telah kita lakukan sampai pada titik ini merupakan tabel yang tidak memiliki pembatas antar sel tabel. Tampilan standar yang diberikan HTML seperti ini sangat jarang dijumpai di dalam dokumen pada umumnya. Biasanya, tabel yang kita jumpai selalu memiliki batas antar setiap sel, sehingga membuat tabel tanpa batas akan menjadi aneh dan membingungkan pengguna.
Pembuatan tabel yang telah kita lakukan sampai pada titik ini merupakan tabel yang tidak memiliki pembatas antar sel tabel. Tampilan standar yang diberikan HTML seperti ini sangat jarang dijumpai di dalam dokumen pada umumnya. Biasanya, tabel yang kita jumpai selalu memiliki batas antar setiap sel, sehingga membuat tabel tanpa batas akan menjadi aneh dan membingungkan pengguna.
Untungnya, CSS telah memberikan fasilitas untuk memberikan tabel pada elemen-elemen yang ada, melalui properti border. Kita dapat menggunakan properti ini untuk memberikan garis pembatas antar setiap sel pada tabel, seperti berikut:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Test</title>
<style type="text/css">
table {
border: 1px solid #C6C6C6;
}
</style>
</head>
<body>
<table>
<tr>
<th> </th>
<th>Senin</th>
<th>Selasa</th>
<th>Rabu</th>
</tr>
<tr>
<th scope="row">TI-A</th>
<td>Basis Data</td>
<td>Desain Web</td>
<td>Matematik</td>
</tr>
<tr>
<th>TI-B</th>
<td>Desain Web</td>
<td>Struktur Data</td>
<td>Basis Data</td>
</tr>
<tr>
<th>TI-C</th>
<td>Struktur Data</td>
<td>Pemrograman</td>
<td>Matematika</td>
</tr>
</table>
</body>
</html>
Coba jalankan kode di atas untuk mendapatkan hasil seperti berikut:
Ternyata properti border tidak dapat menghasilkan pembatas pada sel tabel secara otomatis! Untuk menanggulanginya, kita perlu menambahkan kode border tersebut pada elemen td dan th juga, sehingga kode CSS menjadi seperti berikut:
table, td, th {
border: 1px solid #C6C6C6;
}
dan kita akan mendapatkan pembatas pada setiap sel:
Seperti yang dapat dilihat pada gambar Pembatas Tabel pada Setiap Sel, secara otomatis browser akan menambahkan jarak pada setiap sel yang ada. Untuk menambah dan mengurangi jarak antar sel ini kita dapat menggunakan properti CSS border-spacing, yang hanya dapat digunakan untuk elemen table. Tambahkan kode CSS baru berikut untuk melihat contoh penggunaan border-spacing:
table {
border-spacing: 15px;
}
Jika ingin menghilangkan keseluruhan jarak pada sel, kita dapat menggunakan properti border-collapse, yang sama seperti border-spacing hanya dapat digunakan pada elemen table. Properti border-collapse dapat diisikan dengan dua nilai, yaitu separate dan collapse. Nilai standar dari browser ialah separate, yang akan menghasilkan jarak antar sel. Nilai collapse, seperti yang telah dapat ditebak, akan menghilangkan segala jarak antar sel.
table {
border-collapse: collapse;
}
