Hai teman-teman semuanya, apa kabar? semoga tetap dalam keadaan sehat, kita lanjut lagi belajarnya yah, pada tutorial kali ini kita akan belajar tentang fungsi border-collapse pada css.

Fungsi Propertis ini adalah untuk membuat spasi pada border menghilang, jadi konsep table ketika kita berikan style border akan terbentuk 2 garis tepi, nah untuk lebih jelasnya kita langsung saja praktekan, pertama silahakan teman-teman buat sebuah file dan ketikan script berikut ini:

Saya membuat table denga 3 baris dan 2 kolom, jika teman-teman save maka hasilnya akan seperti berikut ini:

Fungsi Border-collapse Pada CSS 1

Tidak ada border atau apapun pada hasilnya, nah sekarang coba tambahkan script css berikut ini:

Saya memberikan style border pada table td dan th sehingga hasilnya akan seperti berikut ini:

Fungsi Border-collapse Pada CSS 2

terlihat ada 2 garis pada table tersebut padahal kita hanya memberikan style border sebanyak 1px, nah untuk membuat table lebih rapih lagi kita bisa menggunakan border-collapse, silahakan teman-teman tambahkan script ini pada bagian css,

jika teman-teman save maka hasilnya akan seperti berikut ini:

Fungsi Border-collapse Pada CSS 3

Hanya akan ada satu garis didalam tablenya,

Gimana teman-teman cukup mudah bukan, saya rasa untuk tutorial kali ini tentang fungsi border-collapse pada css cukup sampai disini dulu, semoga tutorial yang sederhana ini dapat bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya,

Terima kasih,