Show
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:
DEMO Penting DiperhatikanPerlu 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 1. Desain Tabel HTML MinimalisTabel 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 1Tabel Penjualan Divisi Elektronik
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 dashJika 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 Tabel 2Tabel Penjualan Divisi Elektronik
3. Desain Tabel HTML ZebraMungkin 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. Tabel 3Tabel Penjualan Devisi Elektronik
Anda dapat mengubah warna baris sesuai dengan tema web anda 4. Desain Tabel HTML Zebra Tanpa Border dan Background Pada HeaderTabel 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. Tabel 4Tabel Penjualan Devisi Elektronik
5. Desain Tabel HTML Zebra Tanpa Background Pada HeaderTabel 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. Tabel 5Tabel Penjualan Divisi Elektronik
6. Desain Tabel HTML Minimalis Dengan Background Pada HeaderDesain 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. Tabel 6Tabel Penjualan Devisi Elektronik
7. Desain Tabel HTML ZebraDengan desain ini, kita buat elemen 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. Tabel 7Browser Usage Statistics, source: statcounter.com
Perhatikan bahwa pada tabel diatas, kita menambahkan link pada judul (caption) tabel. 8. Desain Tabel HTML Zebra Dengan Warna Kuat Pada HeaderDesain kali ini mirip dengan desain sebelumnya (nomor 7), bedanya, kita buat element 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. Tabel 8Browser Usage Statistics, source: statcounter.com
9. Desain Tabel HTML ColorfulDesain 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. Tabel 9Browser Usage Statistics, source: statcounter.com
Karena menggunakan banyak warna, pastikan warna yang kita gunakan sesuai dengan warna tema website. 10. Desain Tabel HTML VerikalDesain 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) Tabel 10Tabel Kursus, source udemy.com
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. PenutupMendesain 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. Subscibe NowSuka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com |