Belajar mengatur tampilan table pada css

belajar css

Style pada table

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

Menambahkan border pada table

Karena default dari table tidak ada visual perbatasan, maka Anda bisa memberikan visual perbatasan dengan property border.

Contoh:

Editor Online
  1. table, th, td {
  2. border: 1px solid black;
  3. }

Perhatikan contoh diatas !!

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

Table border collapse

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

Contoh:

Editor Online
  1. table {
  2. border-collapse: collapse;
  3. }

Table layout

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

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

Contoh:

Editor Online
  1. #fixed {
  2. table-layout: fixed;
  3. }

Table empty cells

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

  • show – menampilkan border atau perbatasan pada table yang tidak memiliki konten didalamnya. Ini adalah default.
  • hide – tidak menampilkan border atau perbatasan pada table yang tidak memiliki konten didalamnya.
  • inherit – mengikuti nilai dari elemen induknya.

Contoh:

Editor Online
  1. #show {
  2. empty-cells: show;
  3. }

Table caption side

Dengan property caption-side Anda bisa mengatur letak caption dari table apakah akan diatas atau dibawah.

Contoh:

Editor Online
  1. caption {
  2. caption-side: bottom;
  3. }

Table border spacing

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

Contoh:

Editor Online
  1. table {
  2. border-spacing: 20px;
  3. }

Daftar property table

PropertyKegunaanya
border-collapseMenentukan apakah perbatasan table harus diciutkan atau dihilangkan
border-spacingMenentukan ruang perbatasan table pada konten
caption-sideMenentukan letak caption table 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)

Leave a Reply

Your email address will not be published. Required fields are marked *