Fungsi border-collapse (Property CSS)

BERANDA > FUNGSI DAN KEGUNAAN PROPERTI CSS > Fungsi border-collapse (Property CSS)


A. Pengenalan border-collapse (Property CSS)


CSS border-collapse merupakan properti yang digunakan untuk mengubah garis pembatas pada tabel untuk menyatu atau menjadi 1 garis dari dua garis pada tiap tag.

B. Contoh Penggunaan border-collapse (Property CSS)


• Penggunaan border-collapse

Contoh:


<style>
table.initabel {
border: 1px solid blue;
}
td.initabel {
border: 1px solid blue;
}
table.initabel {
border-collapse: separate;
}

table.initabel2 {
border: 1px solid blue;
}
td.initabel2 {
border: 1px solid blue;
}
table.initabel2 {
border-collapse: collapse;
}
</style>

<b>Sebelum Perubahan</b>

<table class="initabel">

<tr>
<td class="initabel">Satu</td>
<td class="initabel">Dua</td>
<td class="initabel">Tiga</td>
</tr>

<tr>
<td class="initabel">Empat</td>
<td class="initabel">Lima</td>
<td class="initabel">Enam</td>
</tr>

<tr>
<td class="initabel">Tujuh</td>
<td class="initabel">Delapan</td>
<td class="initabel">Sembilan</td>
</tr>

</table>

<b>Setelah Perubahan</b>

<table class="initabel2">

<tr>
<td class="initabel2">Satu</td>
<td class="initabel2">Dua</td>
<td class="initabel2">Tiga</td>
</tr>

<tr>
<td class="initabel2">Empat</td>
<td class="initabel2">Lima</td>
<td class="initabel2">Enam</td>
</tr>

<tr>
<td class="initabel2">Tujuh</td>
<td class="initabel2">Delapan</td>
<td class="initabel2">Sembilan</td>
</tr>

</table>


Hasil:


Sebelum Perubahan

SatuDuaTiga
EmpatLimaEnam
TujuhDelapanSembilan

Setelah Perubahan

SatuDuaTiga
EmpatLimaEnam
TujuhDelapanSembilan

Keterangan: separate adalah nilai dasar, tanpa kamu tulis bentuk table-collape:separate akan seperti sebelum perubahan.

Tidak ada komentar:

Posting Komentar

Jangan lupa memberikan saran dan laporan bila terdapat sesuatu yang ingin kamu sampaikan.

Gunakan kata - kata yang sopan untuk mengomentar dan mengkritik.

Katakan bila ingin ada materi atau pembahasan yang ingin ditambahkan atau yang kurang lengkap.