Batas Tabel HTML
Tabel HTML dapat memiliki batas gaya dan bentuk yang berbeda.
Cara Menambahkan Perbatasan
Saat Anda menambahkan batas ke tabel, Anda juga menambahkan batas di sekitar setiap sel tabel:
Untuk menambahkan batas, gunakan borderproperti CSS pada
table, th, dan
tdelemen:
Contoh
table, th, td
{
border: 1px solid black;
}
Batas Tabel Diciutkan
Untuk menghindari batas ganda seperti pada contoh di atas, setel border-collapse
properti CSS ke collapse.
Ini akan membuat perbatasan runtuh menjadi satu perbatasan:
Contoh
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Perbatasan Tabel Gaya
Jika Anda mengatur warna latar belakang setiap sel, dan memberi batas warna putih (sama dengan latar belakang dokumen), Anda mendapatkan kesan batas yang tidak terlihat:
Contoh
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Perbatasan Meja Bundar
Dengan border-radiusproperti, perbatasan mendapatkan sudut membulat:
Contoh
table, th, td {
border: 1px solid
black;
border-radius: 10px;
}
Lewati batas di sekitar tabel dengan keluar tabledari pemilih css:
Contoh
th, td {
border: 1px solid
black;
border-radius: 10px;
}
Batas Meja Bertitik
Dengan border-styleproperti, Anda dapat mengatur tampilan perbatasan.
Nilai berikut diperbolehkan:
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
Contoh
th, td {
border-style: dotted;
}
Warna Perbatasan
Dengan border-colorproperti, Anda dapat mengatur warna perbatasan.
Contoh
th, td {
border-color: #96D4D4;
}