Pada tutorial sebelumnya,kita sudah mempelajari tentang Tutorial CSS Bagian 32 : Cara Menggunakan Property Border Radius di CSS. Pada tutorial kali ini, kita akan mempelajari tentang cara menggunakan property border collapse di CSS.
Properti CSS ini digunakan untuk mengatur batas sel pada tabel dan menentukan apakah sel tabel berbagi batas yang separate atau bersama.
Properti ini memiliki 2 nilai utama yaitu separate dan collapse. Ketika diatur ke nilai separate, jarak antar sel dapat ditentukan menggunakan properti border-spacing. Ketika border-collapse diatur ke nilai collapse, maka nilai inset dari properti border-style berperilaku seperti groove, dan nilai awal berperilaku seperti ridge.
Sintaksis
Nilai properti CSS ini didefinisikan sebagai berikut.
Nilai properti
- Separate : Ini adalah nilai default yang memisahkan batas sel tabel. Dengan menggunakan nilai ini, setiap sel akan menampilkan batasnya sendiri.
- Collapse : Nilai ini digunakan untuk menciutkan perbatasan menjadi satu perbatasan. Dengan menggunakan ini, dua sel tabel yang berdekatan akan berbagi perbatasan. Saat nilai ini diterapkan, properti border-spacing tidak berpengaruh.
- Initial: Ini mengatur properti ke nilai defaultnya.
- Inherit: Ini mewarisi properti dari elemen induknya.
Sekarang, mari kita pahami properti CSS ini dengan menggunakan beberapa contoh.
Pada contoh pertama, kita menggunakan nilai separate dari properti border-collapse. Pada contoh kedua, kita menggunakan nilai collapse dari properti border-collapse.
Contoh – Menggunakan nilai separate
Dengan nilai ini, kita dapat menggunakan properti border-spacing untuk mengatur jarak antar sel tabel yang berdekatan.
<!DOCTYPE html>
<html>
<head>
<title> border-collapse property </title>
<style>
table{
border: 2px solid blue;
text-align: center;
font-size: 20px;
width: 80%;
height: 50%;
}
th{
border: 5px solid red;
background-color: yellow;
}
td{
border: 5px solid violet;
background-color: cyan;
}
#t1 {
border-collapse: separate;
}
</style>
</head>
<body>
<h1> Property border-collapse </h1>
<h2> border-collapse: separate; </h2>
<table id = "t1">
<tr>
<th> Nama Depan </th>
<th> Nama Belakang </th>
<th> Mapel </th>
<th> Nilai </th>
</tr>
<tr>
<tr>
<td> Budi </td>
<td> Darmawan </td>
<td> Biologi </td>
<td> 92 </td>
</tr>
<tr>
<td> Rio </td>
<td> Arya </td>
<td> IPA </td>
<td> 89 </td>
</tr>
<tr>
<td> Hendra </td>
<td> Suheri </td>
<td> IPS </td>
<td> 70 </td>
</tr>
</table>
</body>
</html>Berikut hasil dari kode di atas :
Contoh – Menggunakan properti collapse
Properti border-spacing dan border-radius tidak dapat digunakan dengan nilai ini.
<!DOCTYPE html>
<html>
<head>
<title> border-collapse property </title>
<style>
table{
border: 2px solid blue;
text-align: center;
font-size: 20px;
width: 80%;
height: 50%;
}
th{
border: 5px solid red;
background-color: yellow;
}
td{
border: 5px solid violet;
background-color: cyan;
}
#t1{
border-collapse: collapse;
}
</style>
</head>
<body>
<h1> Property border-collapse </h1>
<h2> border-collapse: collapse; </h2>
<table id = "t1">
<tr>
<th> Nama Depan </th>
<th> Nama Belakang </th>
<th> Mapel </th>
<th> Nilai </th>
</tr>
<tr>
<td> Budi </td>
<td> Darmawan </td>
<td> Biologi </td>
<td> 92 </td>
</tr>
<tr>
<td> Rio </td>
<td> Arya </td>
<td> IPA </td>
<td> 89 </td>
</tr>
<tr>
<td> Hendra </td>
<td> Suheri </td>
<td> IPS </td>
<td> 70 </td>
</tr>
</table>
</body>
</html>Hasil dari kode di atas adalah :
Itu dia cara menggunakan property boder-collapse di CSS. Semoga tutorial ini membantu Anda untuk mempelajari cara penggunaan property border-collapse.
