10 Ide Desain Tabel Menarik Dengan CSS 3 – Fresh Design

Sebelumnya telah kita bahas bagaimana cara membuat tabel dengan HTML 5 dan cara mendesain tabel dengan CSS 3, kali ini kita  akan membahas  10 ide desain tabel dengan CSS 3.

Terdapat beberapa hal yang perlu diperhatikan ketika mendesain tabel agar tampilan tabel tetap menarik dan data yang ditampilkan tetap nyaman dibaca, diantaranya adalah:

1. Gunakan padding yang cukup sehingga teks tabel mempunyai jarak yang cukup dengan tepi tabel.
2. Perhatikan ukuran huruf, sesuaikan dengan padding dan ukuran huruf global pada website tersebut.
3. Pastikan data tetap jelas terbaca yaitu dengan membuat warna background kontras dengan warna teks.
4. Identifikasi tabel apakah sifatnya horizontal (data dibaca secara horizontal), vertikal, atau keduanya, kemudian tentukan pola warna yang sesuai dengan sifat tabel tersebut.
5. Jika kita menampilkan banyak data numerik, maka pertimbangkan untuk menggunakan jenis huruf yang dapat menampilkan angka dengan baik, seperti verdana.
6. Sesuaikan warna tabel dengan warna tema website, sehingga tetap tampak serasi ketika ditampilkan di tengah-tengah teks/artikel.
7. Gunakan caption (judul tabel) jika diperlukan.

DEMO

Penting Diperhatikan

Perlu diperhatikan bahwa ketika mendesain tabel, terdapat beberapa selector yang baru tersedia pada CSS 3.

CSS 3 sendiri sudah didukung oleh browser modern, namun khusus Internet Explorer, baru mendukungnya pada versi 9 ketas

Adapun  selector tersebut diantaranya adalah :last-child dan :nth-child, dan :empty()  yang sering digunakan  ketika mendesain tabel.

1. Desain Tabel HTML Minimalis

Tabel ini hanya menampilkan border kolom secara horizontal, sedangkan untuk warna background tidak kita isi (menggunakan warna background web), sehingga terlihat minimalis.

Tabel ini cocok untuk data yang bersifat horizontal, dimana data dibaca mendatar dari kiri ke kanan/kanan ke kiri pada web RTL. Meskipun simpel, namun tetap elegan dan fokus pada data yang ditampilkan.

Tabel ini umum digunakan ketika menampilkan tabel di tengah-tengah sekumpulan teks (konten utama web berupa artikel), karena, dengan tidak adanya background dan border vertikal, akan membuatnya menyatu  dengan konten web

Jika warna tema website cenderung gelap, kita bisa sesuaikan warna border dan font menjadi terang

2. Desain Tabel HTML Minimalis dengan border dash

Jika tema web anda memiliki penekanan pada warna tertentu, dan garis yang digunakan tidak terlalu tegas, maka bisa mencoba desain tabel berikut ini.

Tabel ini memiliki  header berwarna merah terang dengan border tipe dash pada tiap-tiap baris. Meski demikian, desain tabel ini tetap terlihat simpel dan elegan

3. Desain Tabel HTML Zebra

Mungkin bentuk desain tabel ini merupakan desain yang umum kita temui, dimana header memiliki background tertentu, sedangkan baris memiliki warna berselang seling (zebra)

Tabel ini memiliki batas yang jelas  antar baris, sehingga dapat memudahkan untuk membaca data yang ada di kolom sebelahnya, pada baris yang sama.

Tips: Jenis tabel seperti ini lebih tepat di terapkan ketika mayoritas konten web adalah data tabel.

Anda dapat mengubah warna baris sesuai dengan tema web anda

4. Desain Tabel HTML Zebra Tanpa Border dan Background Pada Header

Tabel ini sama dengan tabel sebelumnya, dimana warna baris berselang seling, bedanya, background pada header dan footer kita hilangkan, disamping itu border antar kolom juga kita hilangkan, sehingga fokus penglihatan pada data tabel.

Dengan tidak adanya batas tabel (tidak ada background pada header tabel), tabel ini pas jika di tampilkan pada website yang konten utamanya berupa artikel.

5. Desain Tabel HTML Zebra Tanpa Background Pada Header

Tabel ini juga sama dengan tabel sebelumnya (nomor 3), kita hilangkan warna background pada header dan footer, namun tetap mempertahankan border pada tiap kolom, sehingga memudahkan untuk membaca data baik secara horizontal maupun vertikal.

Sama seperti tabel nomor 4, dengan tidak adanya background pada header, maka tabel ini cocok jika ditampilkan pada website yang konten utamanya berupa artikel.

6. Desain Tabel HTML  Minimalis Dengan Background Pada Header

Desain tabel berikut ini sama dengan tabel minimalis pada nomor satu, bedanya kita beri warna background pada header dan kita beri border yang tegas pada footer.

Desain ini dapat kita gunakan ketika ingin memberikan batas yang jelas antara tabel dengan konten web lainnya.

Tabel ini tetap cocok ditampilkan pada website dengan konten utama berupa artikel, karena meskipun terdapat background pada header, background pada body  kita hilangkan.

7. Desain Tabel HTML  Zebra

Dengan desain ini, kita buat  elemen  <th> yang ada pada header <thead> tidak memiliki background, sedangkan element <th> pada elemen body <body> kita buat warna terang dengan warna dasar putih.

Selanjutnya, dengan warna yang berselang seling (zebra) pada baris body, akan membuat perhatian terfokus pada data yang ada pada row tersebut.

Seperti sebelumnya, data yang disajikan bersifat horizontal dimana pengunjung diarahkan untuk membaca data secara horizontal dalam contoh ini persentase perkembangan browser tertentu dari bulan ke bulan.

Perhatikan bahwa pada tabel diatas, kita menambahkan link pada judul (caption) tabel.

8. Desain Tabel HTML  Zebra Dengan Warna Kuat Pada Header

Desain kali ini mirip dengan desain sebelumnya (nomor 7), bedanya, kita buat element <th> memiliki background warna yang kuat.

Desain ini digunakan jika ingin menampilkan tabel dengan batas jelas, sehingga terlihat batas antara tabel dengan konten di sekitarnya.

Dengan pemilihan warna yang tepat (monochromatic) yang telah kita bahas diatas, tampilan tabel tetap menarik.

9. Desain Tabel HTML  Colorful

Desain tabel ini akan memberikan warna yang berbeda untuk setiap kolomnya.

Jika informasi pada tabel sebelumnya (tabel 7 dan 8) lebih ditekankan pada pembacaan data horizontal, pada tabel ini lebih ditekankan pembacaan data secara vertikal, meskipun masih relevan dengan data horizontal

Pada tabel ini, pembaca akan lebih diarahkan untuk membandingkan trend perkembangan browser tertentu selama lima tahun dibanding membandingkannya  dengan browser lain.

Karena menggunakan banyak warna, pastikan warna yang kita gunakan sesuai dengan warna tema website.

10. Desain Tabel HTML  Verikal

Desain kita yang terakhir ini, sama seperti pada tabel sebelumnya (nomor 9) dimana kita ingin menunjukkan kepada pembaca bahwa data tabel bersifat vertikal.

Dengan memberi jarak antar kolom menunjukkan bahwa data tidak bersifat horizontal (tidak ada kaitan informasi antara kolom satu dengan kolom yang lain)

Meskipun bentuk informasi diatas jarang ditampilkan menggunakan tabel (biasanya menggunakan HTML list), contoh diatas tetap dapat memberikan ide bentuk layout dan kombinasi warna yang bisa digunakan.

Penutup

Mendesain tabel dengan CSS 3 dapat dilakukan dengan mudah.

Jika kita lihat source code dari ke sepuluh tabel diatas, maka terlihat bahwa kode css yang digunakan sangat ringkas, karena memang emelen yang digunakan tidak terlalu banyak.

Namun, terkadang ide untuk mendapatkan bentuk tabel dan kombinasi warna yang tepat tidak mudah ditemukan.

Dengan mempelajari 10 contoh desain tabel diatas, dapat lebih memudahkan anda untuk menemukan bentuk tabel dan kombinasi warna yang tepat sesuai dengan website anda.

Demikian pembahasan mengenai 10 Ide Desain Tabel Menarik dengan CSS 3, semoga bermanfaat.