fungsi border-collapse pada css

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:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<table>
  <tr>
    <th>nama</th>
    <th>usia</th>
  </tr>
  <tr>
    <td>rizal</td>
    <td>24</td>
  </tr>
  <tr>
    <td>indah</td>
    <td>19</td>
  </tr>
</table>


</body>
</html>

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

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

<style>

table, td, th {
    border: 1px solid black;
}
</style>

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

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,

table {
    border-collapse: collapse;
}

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

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,

Fungsi Border-collapse Pada CSS

Kategori