Border-collapse Separate Html Là Gì

3 min read Jun 30, 2024

Border-Collapse: Separate dalam HTML

border-collapse adalah properti CSS yang mengontrol bagaimana batas dari tabel di-render. border-collapse: separate adalah salah satu nilainya, dan dalam kasus ini, batas setiap sel dalam tabel akan ditampilkan secara terpisah. Mari kita bahas lebih lanjut:

Memahami Border-Collapse: Separate

Ketika border-collapse: separate diterapkan pada tabel, batas dari setiap sel akan di-render secara independen, sehingga setiap sel memiliki batas yang lengkap. Ini berarti bahwa jika ada dua sel yang bersebelahan, batas dari kedua sel tersebut akan terlihat secara terpisah.

Contoh

Berikut adalah contoh penggunaan border-collapse: separate:




    
    
    Border Collapse Separate
    


    
        
            Nama
            Usia
        
        
            John Doe
            30

Nama	Usia
John Doe	30

Dalam contoh ini, batas dari setiap sel akan ditampilkan secara terpisah, dan terdapat spasi antara batas dari sel yang bersebelahan. Hal ini terjadi karena properti border-spacing yang ditetapkan pada tabel.

Keuntungan Menggunakan Border-Collapse: Separate

Kontrol batas yang lebih baik: Anda dapat dengan mudah mengontrol bagaimana batas ditampilkan untuk setiap sel.
Tampilan yang lebih fleksibel: Anda dapat menciptakan efek desain yang unik dengan memanipulasi batas setiap sel.

Catatan

border-collapse: separate adalah nilai default untuk properti border-collapse.
Nilai lain untuk border-collapse adalah collapse, yang menggabungkan batas-batas sel yang bersebelahan menjadi satu batas.

Dengan memahami cara kerja border-collapse: separate, Anda dapat menciptakan tabel yang lebih menarik dan profesional.