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:
- Gunakan padding yang cukup sehingga teks tabel mempunyai jarak yang cukup dengan tepi tabel.
- Perhatikan ukuran huruf, sesuaikan dengan padding dan ukuran huruf global pada website tersebut.
- Pastikan data tetap jelas terbaca yaitu dengan membuat warna background kontras dengan warna teks.
- Identifikasi tabel apakah sifatnya horizontal (data dibaca secara horizontal), vertikal, atau keduanya, kemudian tentukan pola warna yang sesuai dengan sifat tabel tersebut.
- Jika kita menampilkan banyak data numerik, maka pertimbangkan untuk menggunakan jenis huruf yang dapat menampilkan angka dengan baik, seperti verdana.
- Sesuaikan warna tabel dengan warna tema website, sehingga tetap tampak serasi ketika ditampilkan di tengah-tengah teks/artikel.
- Gunakan caption (judul tabel) jika diperlukan.
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 1
No | Pembeli | Barang | Tanggal | Harga |
---|---|---|---|---|
1 | Anton | Televisi | 07 Juni 2016 | 2.500.000 |
2 | Bryan | Mesin Cuci | 10 Juli 2016 | 1.500.000 |
3 | Cherly | Dispenser | 11 Agustus 2016 | 950.000 |
4 | Dean | Kulkas | 15 September 2016 | 1.750.000 |
5 | Esryl | Wall Fan | 11 Oktober 2016 | 450.000 |
Total | 7.150.000 |
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
Tabel 2
No | Pembeli | Barang | Tanggal | Harga |
---|---|---|---|---|
1 | Anton | Televisi | 07 Juni 2016 | 2.500.000 |
2 | Bryan | Mesin Cuci | 10 Juli 2016 | 1.500.000 |
3 | Cherly | Dispenser | 11 Agustus 2016 | 950.000 |
4 | Dean | Kulkas | 15 September 2016 | 1.750.000 |
5 | Esryl | Wall Fan | 11 Oktober 2016 | 450.000 |
Total | 7.150.000 |
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.
Tabel 3
No | Pembeli | Barang | Tanggal | Harga |
---|---|---|---|---|
1 | Anton | Televisi | 07 Juni 2016 | 2.500.000 |
2 | Bryan | Mesin Cuci | 10 Juli 2016 | 1.500.000 |
3 | Cherly | Dispenser | 11 Agustus 2016 | 950.000 |
4 | Dean | Kulkas | 15 September 2016 | 1.750.000 |
5 | Esryl | Wall Fan | 11 Oktober 2016 | 450.000 |
Total | 7.150.000 |
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.
Tabel 4
No | Pembeli | Barang | Tanggal | Harga |
---|---|---|---|---|
1 | Anton | Televisi | 07 Juni 2016 | 2.500.000 |
2 | Bryan | Mesin Cuci | 10 Juli 2016 | 1.500.000 |
3 | Cherly | Dispenser | 11 Agustus 2016 | 950.000 |
4 | Dean | Kulkas | 15 September 2016 | 1.750.000 |
5 | Esryl | Wall Fan | 11 Oktober 2016 | 450.000 |
Total | 7.150.000 |
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.
Tabel 5
No | Pembeli | Barang | Tanggal | Harga |
---|---|---|---|---|
1 | Anton | Televisi | 07 Juni 2016 | 2.500.000 |
2 | Bryan | Mesin Cuci | 10 Juli 2016 | 1.500.000 |
3 | Cherly | Dispenser | 11 Agustus 2016 | 950.000 |
4 | Dean | Kulkas | 15 September 2016 | 1.750.000 |
5 | Esryl | Wall Fan | 11 Oktober 2016 | 450.000 |
Total | 7.150.000 |
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.
Tabel 6
No | Pembeli | Barang | Tanggal | Harga |
---|---|---|---|---|
1 | Anton | Televisi | 07 Juni 2016 | 2.500.000 |
2 | Bryan | Mesin Cuci | 10 Juli 2016 | 1.500.000 |
3 | Cherly | Dispenser | 11 Agustus 2016 | 950.000 |
4 | Dean | Kulkas | 15 September 2016 | 1.750.000 |
5 | Esryl | Wall Fan | 11 Oktober 2016 | 450.000 |
Total | 7.150.000 |
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.
Tabel 7
Agu 2016 | Jul 2016 | Jun 2016 | Mei 2016 | Apr 2016 | Mar 2016 | Feb 2016 | |
---|---|---|---|---|---|---|---|
Chrome | 58.37 % | 58.26 % | 57.89 % | 56.94 % | 56.75 % | 56.4 % | 55.33 % |
Firefox | 13.92 % | 13.97 % | 14.16 % | 14.52 % | 14.24 % | 14.31 % | 14.67 % |
IE | 9.8 % | 9.77 % | 10.71 % | 11.38 % | 12.14 % | 12.52 % | 13.38 % |
Safari | 9.61 % | 9.74 % | 9.64 % | 9.69 % | 9.47 % | 9.47 % | 9.46 % |
Opera | 1.78 % | 1.77 % | 1.72 % | 1.83 % | 1.87 % | 1.91 % | 2 % |
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.
Tabel 8
Browser | Agu 2016 | Jul 2016 | Jun 2016 | Mei 2016 | Apr 2016 | Mar 2016 | Feb 2016 |
---|---|---|---|---|---|---|---|
Chrome | 58.37 % | 58.26 % | 57.89 % | 56.94 % | 56.75 % | 56.4 % | 55.33 % |
Firefox | 13.92 % | 13.97 % | 14.16 % | 14.52 % | 14.24 % | 14.31 % | 14.67 % |
IE | 9.8 % | 9.77 % | 10.71 % | 11.38 % | 12.14 % | 12.52 % | 13.38 % |
Safari | 9.61 % | 9.74 % | 9.64 % | 9.69 % | 9.47 % | 9.47 % | 9.46 % |
Opera | 1.78 % | 1.77 % | 1.72 % | 1.83 % | 1.87 % | 1.91 % | 2 % |
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.
Tabel 9
Bulan | Crome | Firefox | IE | Safari | Opera |
---|---|---|---|---|---|
Agustus 2016 | 58.37 % | 13.92 % | 9.8 % | 9.61 % | 1.78 |
Agustus 2015 | 52.82 % | 15.62 % | 15.99 % | 9.31 % | 1.81 |
Agustus 2014 | 46.26 % | 17.5 % | 20.31 % | 10.81 % | 1.47 |
Agustus 2013 | 42.78 % | 19.25 % | 25.55 % | 8.57 % | 1.16 % |
Agustus 2012 | 33.59 % | 22.85 % | 32.85 % | 7.39 % | 1.63 % |
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)
Tabel 10
Development | IT & Software | Marketing | ||
---|---|---|---|---|
Web Development | IT Certification | Branding | ||
Mobile Apps | Network & Security | Digital Marketing | ||
Databases | Hardware | Advertising | ||
Development Tools | Operating System | Public Relation | ||
E-Commerce | Other | Affiliate Marketing |
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.
Subscibe Now
Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com
7 Feedback dari pembaca
Mas agus, mantepss nih CSS nya.
saya ijin copy mau dipraktekkan..
Mas share artikelnya tentang javascript donk.
Terimakasih.
Iya mas, silakan mas…. 🙂
Sudah ada rencana kesana, cuman belum sempat…
keren mas tabelnya, bisa di contoh utk hovernya…
kalo buat tabel css seperti ini bagaimana mas ?
http://i.imgur.com/fRco8gk.png
Itu tidak menggunakan tabel mas, hanya menggunakan blok blok HTML kemudian di set lebar sama floatingnya, jika menggunakan tabel akan tidak efektif dan tidak responsive.
Wow keren mas, jadi keliatan lebih menarik dan rapi. Saya coba praktekan di blog. terima kasih tutorialnya.
Sama sama mas…