CSS : Table

Tabel biasanya digunakan untuk menyajikan data tabular.

Styling Tabel dengan CSS

Saat kalian membuat tabel HTML tanpa style atau atribut apa pun, browser akan menampilkannya tanpa border. Mendesain sebuah tabel dengan CSS dapat memperindah tampilannya secara drastis.

Bagian berikut akan menunjukkan kepada kalian bagaimana mengontrol layout dan menampilkan elemen tabel menggunakan CSS untuk membuat tabel yang bagus.

Menambahkan Border ke Tabel

Properti border CSS adalah cara terbaik dalam memberikan border untuk tabel.

Contoh berikut untuk menetapkan black border untuk elemen <table>, <th>, dan <td>.

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

Collapsing Tabel Border

Fungsi dari border-collapse adalah untuk membuat model border yang spesifik pada table.

Biasanya jika kita ingin membuat border pada table kita tinggal beri properti border saja sudah cukup, tetapi ada satu properti yang memungkinkan memberi border pada table yang lebih spesifik lagi modelnya. Kalian bisa mengecilkan tabel border yang terpisah menjadi satu dengan menggunakan properti border-collapse pada elemen <table>:

Aturan style dalam contoh berikut ini akan mengecilkan sel tabel border serta menerapkan black border satu piksel pada tabel dan elemen sel tabel tersebut. Berikut contohnya:

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

Kalian juga dapat menghapus ruang antara batas sel tabel dengan menetapkan nilai properti border-spacing CSS menjadi 0. Namun, itu hanya menghilangkan ruang tetapi tidak menggabungkan border seperti ketika kalian mengatur border-collapse ke collapse.

Catatan: Jika <! DOCTYPE> tidak ditentukan dalam dokumen HTML, maka properti CSS border-collapse dapat menghasilkan hasil yang tidak sesuai harapan.

Menyesuaikan Spasi di dalam Tabel

Secara default, browser membuat sel tabel cukup besar untuk memuat data dalam sel. Untuk membuatnya menjadi lebih besar lagi kalian dapat menggunakan properti padding CSS, seperti berikut ini:

th, td {
    padding: 15px;
}

Kalian juga bisa menyesuaikan jarak antar border sel menggunakan properti border-spacing CSS, jika border tabel kalian dipisahkan (default-nya).

Aturan style berikut menerapkan jarak 10 piksel antara semua border dalam tabel:

table {
    border-spacing: 10px;
}

Menangani Empty Cell

Properti empty-cells menentukan apakah perbatasan harus ditampilkan jika sel tidak memiliki data (kosong).

Properti ini dapat menggunakan salah satu dari tiga nilai: show, hide or inherit.

Aturan style berikut menyembunyikan sel kosong di elemen tabel.

table {
    border-collapse: separate;
    empty-cells: hide;
}