Pada tutorial sebelumnya,kita sudah belajar tentang Tutorial CSS Bagian 33 : Cara Menggunakan Property Border Collapse di CSS. Pada tutorial kali ini, kita akan mempelajari tentang cara menggunakan border spacing di CSS untuk mendesain tabel.
Properti CSS ini digunakan untuk mengatur jarak antara batas sel yang berdekatan dalam tabel. Ini berlaku hanya ketika properti border-collapse diatur dengan nilai separate. Tidak akan ada ruang di antara border jika border-collapse diatur dengan nilai collapse.
Ini dapat didefinisikan sebagai satu atau dua nilai untuk menentukan jarak vertikal dan horizontal.
- Ketika hanya 1 nilai yang ditentukan, maka itu mengatur jarak horizontal dan vertikal.
- Saat kita menggunakan sintaks dengan 2 nilai, maka yang pertama digunakan untuk mengatur jarak horizontal (yaitu jarak antara kolom yang berdekatan), dan nilai kedua mengatur jarak vertikal (yaitu jarak antara baris yang berdekatan).
Sintaksis
border-spacing: length | initial | inherit;
Nilai properti
Nilai properti CSS ini didefinisikan sebagai berikut.
- Length : Nilai ini mengatur jarak antara batas sel tabel yang berdekatan dalam px, cm, pt, dll. Nilai negatif tidak diperbolehkan.
- Initial : Ini mengatur properti ke nilai defaultnya.
- Inherit : Ini mewarisi properti dari elemen induknya.
Mari kita pahami properti CSS ini dengan menggunakan beberapa contoh. Pada contoh pertama, kita menggunakan 1 nilai dari properti border-spacing, dan pada contoh kedua, kita menggunakan 2 nilai dari properti border-spacing.
Contoh :
Di sini, kita menggunakan 1 nilai dari properti border-spacing. Properti border-collapse diatur untuk memisahkan, dan nilai border-spacing diatur ke 45px.
<!DOCTYPE html>
<html>
<head>
<title> Property border-spacing </title>
<style>
table{
border: 2px solid blue;
text-align: center;
font-size: 20px;
background-color: lightgreen;
}
th{
border: 5px solid red;
background-color: yellow;
}
td{
border: 5px solid violet;
background-color: cyan;
}
#space{
border-collapse: separate;
border-spacing: 45px;
}
</style>
</head>
<body>
<h1> Property border-spacing </h1>
<h2> border-spacing: 45px; </h2>
<table id = "space">
<tr>
<th> Nama Depan </th>
<th> Nama Belakang </th>
<th> Mapel </th>
<th> Nilai </th>
</tr>
<tr>
<td> Iwan </td>
<td> Broder</td>
<td> IPA </td>
<td> 92 </td>
</tr>
<tr>
<td> Wati </td>
<td> Rina </td>
<td> IPA </td>
<td> 89 </td>
</tr>
<tr>
<td> Sally </td>
<td> Mendey </td>
<td> IPS </td>
<td> 82 </td>
</tr>
</table>
</body>
</html>Hasil dari kode di atas :
Contoh :
Di sini, kita menggunakan 2 nilai properti border-spacing. Properti border-collapse diatur untuk memisahkan, dan nilai border-spacing diatur ke 20pt 1em. Nilai pertama, yaitu 20pt mengatur jarak horizontal, dan nilai 1em mengatur jarak vertikal.
<!DOCTYPE html>
<html>
<head>
<title> border-spacing property </title>
<style>
table{
border: 2px solid blue;
text-align: center;
font-size: 20px;
background-color: lightgreen;
}
th{
border: 5px solid red;
background-color: yellow;
}
td{
border: 5px solid violet;
background-color: cyan;
}
#space{
border-collapse: separate;
border-spacing: 20pt 1em;
}
</style>
</head>
<body>
<h1> Property border-spacing </h1>
<h2> border-spacing: 20pt 1em; </h2>
<table id = "space">
<tr>
<th> Nama Depan </th>
<th> Nama Belakang </th>
<th> Mapel </th>
<th> Nilai </th>
</tr>
<tr>
<td> Iwan </td>
<td> Broder</td>
<td> IPA </td>
<td> 92 </td>
</tr>
<tr>
<td> Wati </td>
<td> Rina </td>
<td> IPA </td>
<td> 89 </td>
</tr>
<tr>
<td> Sally </td>
<td> Mendey </td>
<td> IPS </td>
<td> 82 </td>
</tr>
</table>
</body>
</html>Hasil dari kode di atas :
Itu dia penjelasan tentang penggunaan border spacing di CSS. Semoga tutorial ini membantu Anda untuk memahami penggunaan border spacing di CSS.
