Properti CSS yang umum digunakan untuk elemen tabel adalah properti border. Kalian mungkin juga akan memerlukan properti padding, color, background, dan properti-properti lain yang terkait dengan isi tabel. Selain itu, kalian juga bisa menggunakan border-collapse dan border-spacing yang merupakan properti khusus untuk tag <table>.
Border Pada tabel
Properti border CSS berbeda dengan atribut border HTML. Properti border pada tag <table> hanya memberikan kotak yang mengelilingi tabel. Bagian dalam tabel tidak akan memiliki garis jika kalian hanya memberikan properti border pada tag <table>. Untuk membuat tabel yang utuh, kalian juga perlu memberikan border pada tag <td> seperti contoh di bawah ini.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
.tabel1{
border:solid 1px red;
}
.tabel2{
border:solid 1px red;
}
.tabel2 td{
border:solid 1px red;
}
</style>
</HEAD>
<BODY>
<table class="tabel1">
<tr>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>Geri</td>
<td>Pringsewu</td>
</tr>
<tr>
<td>Heri</td>
<td>Medan</td>
</tr>
</table>
<br>
<table class="tabel2">
<tr>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>Geri</td>
<td>Pringsewu</td>
</tr>
<tr>
<td>Heri</td>
<td>Medan</td>
</tr>
</table>
</BODY>
</HTML>
Tabel pertama hanya menggunakan border di sisi luar karena properti border hanya digunakan pada tag <table>. Sebaliknya, tabel ke-2 terlihat dengan border yang utuh karena tag <td> juga diberi border dengan warna yang sama. Kalian tidak harus memberikan warna yang sama pada garis luar tabel dan garis bagian dalam. Border untuk garis luar tabel bisa dibuat beda dengan border untuk kolom pada tabel.
Border-Collapse
Properti border-collapse digunakan untuk menentukan apakah border tabel disatukan dengan border kolom atau tidak. Jika kalian ingin membuat tabel dengan model lama yang terpisah garisnya, kalian bisa memberikan nilai "separate" pada properti border-collapse. Sebaliknya, kalian bisa memberikan nilai collapse jika kalian ingin membuat tabel yang border luar dan border dalamnya menyatu.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
table, td, th{
border:solid 1px red;
}
.tabel1{
border:solid 1px red;
border-collapse : separate;
}
.tabel2{
border:solid 1px red;
border-collapse : collapse;
}
</style>
</HEAD>
<BODY>
<table class="tabel1">
<tr>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>Geri</td>
<td>Pringsewu</td>
</tr>
<tr>
<td>Heri</td>
<td>Medan</td>
</tr>
</table>
<br>
<table class="tabel2">
<tr>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>Geri</td>
<td>Pringsewu</td>
</tr>
<tr>
<td>Heri</td>
<td>Medan</td>
</tr>
</table>
</BODY>
</HTML>
Pada contoh di atas selector th, td, dan tabel mendapatkan nilai properti border yang sama. Walaupun begitu, dua tabel yang ada memiliki nilai border-collapse yang berbeda. Perbedaan nilai properti tersebut membuat kedua tabel terlihat berbeda.
Border-Spacing
Selain cara di atas, untuk menyatukan border bagian luar dan dalam dari tabel, kalian bisa menggunakan properti border-spacing dengan nilai 0. Properti border-spacing digunakan untuk menentukan jarak border kolom dengan border bagian luar tabel. Sama dengan Border-collapse, properti ini digunakan pada tag <table>.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
table, td, th{
border:solid 1px red;
}
.tabel1{
border:solid 1px red;
border-spacing : 16px;
}
.tabel2{
border:solid 1px red;
border-spacing : 0px;
}
</style>
</HEAD>
<BODY>
<table class="tabel1">
<tr>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>Geri</td>
<td>Pringsewu</td>
</tr>
<tr>
<td>Heri</td>
<td>Medan</td>
</tr>
</table>
<br>
<table class="tabel2">
<tr>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>Geri</td>
<td>Pringsewu</td>
</tr>
<tr>
<td>Heri</td>
<td>Medan</td>
</tr>
</table>
</BODY>
</HTML>
Perbedaan kedua tabel cukup jelas. Seharusnya saya tidak perlu lagi menjelaskan kegunaan border-spacing.