Tabel CSS

Tampilan tabel HTML dapat ditingkatkan dengan CSS:

Border Tabel

Untuk menentukan border (batas) tabel di CSS, gunakan properti border.

Contoh di bawah ini menentukan border hitam untuk elemen <table>, <th>, dan <td>.

Contoh

table, th, td {
  border: 1px solid black;
}

Full-Width Tabel

Tabel di atas mungkin tampak kecil dalam beberapa kasus. Jika Anda membutuhkan tabel yang harus menjangkau seluruh layar (lebar secara penuh), tambahkan width: 100% ke elemen <table>.

Contoh

table {
  width: 100%;
}

Border Ganda

Perhatikan bahwa tabel pada contoh di atas memiliki broder ganda. Ini karena tabel dan elemen <th> dan <td> memiliki border yang terpisah.

Untuk menghapus border ganda, lihat contoh di bawah ini.

Collapse Border Tabel

Properti border-collapse dapat mengatur untuk menghilangkan border yang tadinya ganda menjadi tunggal.

Contoh

table {
  border-collapse: collapse;
}

Jika Anda hanya menginginkan satu border saja yang di sekeliling tabel, tinggal tentukan saja properti border untuk <table>.

Contoh

table {
  border: 1px solid black;
}

Sumber referensi: w3schools