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 tệp tin dan ketikan script berikut ini:
Bạn đang xem: border collapse la gi
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!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:
1 2 3 4 5 6 |
<style> table, td, th { border: 1px solid black; } </style> |
Saya memberikan style border pada table td dan th sehingga hasilnya akan seperti berikut ini:
Xem thêm: thập niên 70 mẹ kế nuôi dạy đàn con
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,
1 2 3 |
table { border-collapse: collapse; } |
jika teman-teman save maka hasilnya akan seperti berikut ini:
Xem thêm: âu dương y phàm
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,
Bình luận