Mengatur tampilan tabel dengan CSS

Pada CSS Anda bisa mengatur tampilan pada tabel agar memberikan design yang lebih menarik, seperti me

Style CSS pada tabel

Jika Anda membuat tabel pada HTML dan tidak diberikan style apa pun, maka browser menampilkannya tanpa border atau batas. Dengan begitu Anda perlu memberikan style atau CSS pada tabel agar memberikan design yang lebih menarik.

Menambahkan border pada tabel

Karena default dari tabel tidak ada visual perbatasan, maka Anda bisa memberikan visual perbatasan dengan properti border.

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

Perhatikan contoh diatas !!

bahwa tabel memiliki border ganda, hal ini karena kedua elemen tabel <th> dan <td> memiliki border terpisah.

Tabel border collapse

Jika Anda telah melihat hasil dari contoh diatas, bahwa tabel memiliki border ganda dan ada sedikit ruang pada sekitar konten, ini karena border tabel dipisahkan secara default. Tetapi dengan properti border-collapse Anda bisa menghilangkanya supaya tabel memiliki border tunggal.

table {
    border-collapse: collapse;
}

Tabel layout

Secara default lebar dari tabel akan memperluas menyesuaikan lebar dari konten didalamnya, tetapi Anda bisa mengatur lebar tetap atau fixed pada tabel dengan properti table-layout. Kemungkinan nilai untuk properti ini adalah:

  • auto – dengan nilai auto lebar dari tabel akan memperluas menyesuaikan lebar dari konten didalamnya. Ini adalah default.
  • fixed – dengan nilai fixed lebar dari tabel akan mengikuti lebar yang telah ditentukan. Tata letak horizontal tabel tidak bergantung pada isi sel, tetapi hanya tergantung pada lebar tabel, lebar kolom, dan border atau jarak sel.
  • inherit – mengikuti nilai dari elemen induknya.
#fixed {
    table-layout: fixed;
}

Tabel empty cells

Dengan properti empty-cells Anda bisa mengontrol border atau perbatasan apakah akan menggunakan border atau tidak pada sel tabel yang tidak memiliki konten didalamnya. Kemungkinan nilai untuk properti ini adalah:

  • show – menampilkan border atau perbatasan pada tabel yang tidak memiliki konten didalamnya. Ini adalah default.
  • hide – tidak menampilkan border atau perbatasan pada tabel yang tidak memiliki konten didalamnya.
  • inherit – mengikuti nilai dari elemen induknya.
#show {
    empty-cells: show;
}

Tabel caption side

Dengan properti caption-side Anda bisa mengatur letak caption dari tabel apakah akan diatas atau dibawah.

caption {
    caption-side: bottom;
}

Tabel border spacing

Jika Anda menambahkan border pada tabel, maka tabel akan memiliki border atau perbatasan ganda, hal ini karena kedua elemen tabel <th> dan <td> memiliki border terpisah. Secara default border ganda tersebut mempunyai ruang didalam tabel. Anda bisa memperluas ruang tersebut dengan properti border-spacing.

table {
    border-spacing: 20px;
}

Daftar properti tabel

PropertiKegunaanya
border-collapseMenentukan apakah perbatasan tabel harus diciutkan atau dihilangkan
border-spacingMenentukan ruang perbatasan tabel pada konten
caption-sideMenentukan letak caption tabel apakah diatas atau dibawah
empty-cellsMenentukan konten kosong apakah akan menggunakan perbatasan atau tidak
table-layoutMenentukan apakah lebar konten akan tetap atau auto (menyesuaikan konten)