5 Cara Membuat Tabel HTML menjadi Lebih Menarik

Dalam pembuatan sebuah website, salah satu elemen yang selalu ada dan paling sering digunakan adalah tabel. Tabel biasanya digunakan untuk menampilkan data-data tertentu sesuai dengan kolom dan bidangnya masing-masing. Tabel yang baik harus memiliki tampilan yang enak dipandang mata karena biasanya tampilan data yang terdaftar dan menumpuk pada tabel membuat orang jenuh untuk membacanya.

Pada posting kali ini saya akan menunjukkan pada anda bagaimana cara mendesain sebuah tabel agar lebih menarik dan tidak membuat orang jenuh saat membaca datanya. Ada 5 macam tabel yang saya buat dengan desain yang berbeda. Setiap desain memiliki peruntukkannya masing-masing.

Namun, perlu anda ketahui bahwa ini lebih kepada sebuah konsep desain. Jadi, tabel yang anda terapkan pada website yang anda buat sebaiknya disesuaikan lagi dengan keseluruhan desain anda.

Oke kita langsung saja.

5 tabel yang saya buat ini saya namakan masing-masing : Zebra Table dengan nama class “zebra-table“, Rainbow Table dengan nama class “rainbow-table“, Highlighted Column dengan nama class “highlighted-column“, dan Fixed Table Header dengan class “fixed-th“. Ketiga tabel tersebut memiliki fungsi dan kelebihannya masing-masing, seperti yang disebutkan di bawah ini.

Zebra Table : Cocok untuk tabel yang memiliki banyak data, dan setiap data memiliki field-field yang cukup banyak. Table dengan desain belang-belang ini akan menghilangkan kesan monoton pada tabel.

Zebra Table

Rainbow Table : Tabel ini juga cocok untuk jenis tabel yang memiliki banyak data. Perbedaan warna pada tiap data akan membantu pengguna menemukan data yang dicari. Dari semua tabel yang ada disini, saya kira tabel ini yang paling menarik. Namun, perpaduan warna yang tidak pas justru bisa membuat tabel jadi terlihat norak. Sesuaikan warna dengan warna yang digunakan pada desain web anda.

Rainbow Table

Highlighted Row : Tabel ini adalah tabel yang menyorot data baris tertentu. Data yang di sorot adalah data yang lebih penting daripada data yang lain.

Highlighted Row

Highlighted Column : Kebalikan dari highlighted column. Tabel ini menyorot kolom yang dianggap lebih penting dari kolom lain. Tabel seperti ini biasanya digunakan pada pricing tabel, yang mana kolom yang disorot adalah kolom paket harga promo.

Highlighted Column

Fixed Table Header: Kepala atau judul setiap kolom pada tabel ini bersifat fixed, artinya akan tetap tampil saat tabel di scroll. Tabel ini sangat cocok untuk tabel yang mendaftarkan banyak data, dalam tinggi tabel yang terbatas.

Fixed table header

Markup HTML

Markup HTML yang digunakan saya samakan pada setiap tabel yang saya buat. Kode tersebut merupakan HTML standar dari pembuatan sebuah tabel. Yang berbeda dari setiap table adalah nama class-nya masing-masing yang saya tandai dengan warna merah. Anda bisa lihat kodenya dibawah.

<table class=”zebra-table“>
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Syakir Rahman</td>
<td>Telukpinang</td>
</tr>
<tr>
<td>2</td>
<td>Della Nadya Ayu Aprillia</td>
<td>Cigombong</td>
</tr>
<tr>
<td>3</td>
<td>Muhammad Andika</td>
<td>Sukasari</td>
</tr>
<tr>
<td>4</td>
<td>Galih Tandicha</td>
<td>Cisaat</td>
</tr>
<tr>
<td>5</td>
<td>Elma Septiana</td>
<td>Rancamaya</td>
</tr>
<tr>
<td>6</td>
<td>Lilis Sulistiawati</td>
<td>Bitung Sari</td>
</tr><tr>
<td>7</td>
<td>Muhammad Irzal</td>
<td>Cipinang Gading</td>
</tr>
<tr>
<td>8</td>
<td>Utami ningrum</td>
<td>Cipayung</td>
</tr>
<tr>
<td>9</td>
<td>Fachrurrozi</td>
<td>Ciawi</td>
</tr>
<tr>
<td>10</td>
<td>Issep Muhammad Nasrullah Hakim</td>
<td>Cibedug</td>
</tr>
</tbody>
</table>

Kode CSS

Setiap tabel dengan nama class-nya sendiri di desain dengan kode css-nya masing-masing. Ketiga tabel tersebut di desain dengan menggunakan metode pseudo class :nth-child(). Nah, untuk kode css-nya masing-masing, anda bisa lihat tab kode dibawah ini beserta keterangannya.

/* CSS for Zebra Table in index.html */
.zebra-table {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 3px 1px #ddd;
overflow: hidden;
border:10px solid #fff;
}
.zebra-table th,.zebra-table td{
vertical-align: top;
padding:10px 7px;
text-align: left;
margin:0;
}
.zebra-table tbody tr:nth-child(odd) { /* Make table like zebra */
background:#eee;
}/* End CSS for Zebra Table in index.html */
#eee adalah warna belang-belang-nya
/* CSS for Rainbow Table in index1.html */
.rainbow-table {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 3px 1px #ddd;
overflow: hidden;
border:10px solid #fff;
}
.rainbow-table th,.rainbow-table td{
vertical-align: top;
padding:10px 7px;
text-align: left;
margin:0;
}
.rainbow-table tbody {
color: #fff;
}
/* Make table like rainbow */
.rainbow-table tbody tr:nth-child(4n+1) { /* 4n is 4 colours */
background:#cc3333; /* red */
}
.rainbow-table tbody tr:nth-child(4n+2) {
background:#cccc33; /* yellow */
}
.rainbow-table tbody tr:nth-child(4n+3) {
background:#33cc33; /* green */
}
.rainbow-table tbody tr:nth-child(4n+4) {
background:#3333cc; /* blue */
}/* End CSS for Rainbow Table in index1.html */
/* CSS for Highlighted Row in index2.html */
.highlighted-row {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 3px 1px #ddd;
overflow: hidden;
border:10px solid #fff;
}
.highlighted-row th,.highlighted-row td{
vertical-align: top;
padding:10px 7px;
text-align: left;
margin:0;
}
/* Make row highlighted */
.highlighted-row tbody tr:nth-child(2) {
background:#cc3333; /* red */
color:#fff;
}/* End CSS for Highlighted Row in index2.html */
#cc3333 adalah warna untuk baris yang disorot.
/* CSS for Highlighted Column in index3.html */
.highlighted-column {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 3px 1px #ddd;
overflow: hidden;
border:10px solid #fff;
}
.highlighted-column th,.highlighted-column td{
vertical-align: top;
padding:10px 7px;
text-align: center;
margin:0;
}
.highlighted-column tr td:nth-child(2),.highlighted-column tr th:nth-child(2) { /* Make column highlighted */
background:#333333;
color: #fff;
}
/* End CSS for Highlighted Column in index3.html */
#333333 adalah warna untuk kolom yang disorot.
/* CSS for Fixed Table Header in index4.html */
.fixed-th {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 3px 1px #ddd;
table-layout: fixed;
border:10px solid #fff;
}
.fixed-th thead {
background-color: #333;
color:#fff;
display: block;
}
/* make it scrolled */
.fixed-th tbody {
display: block;
overflow-y: auto;
width: 100%;
max-height: 300px;
position: static;
}/* end make it scrolled */.fixed-th th,.fixed-th td{
vertical-align: top;
padding:10px 7px;
text-align: left;
}
.fixed-th th + th, .fixed-th td + td {
border-left:1px solid #ddd;
}
.fixed-th th:nth-child(1), .fixed-th td:nth-child(1) {
min-width:40px;
}
.fixed-th th:nth-child(2), .fixed-th td:nth-child(2) {
width:300px;
}
.fixed-th th:nth-child(3), .fixed-th td:nth-child(3) {
width:250px;
}/* End CSS for Fixed Table Header in index4.html */

Setiap keterangan-keterangan yang penting saya sertakan secara langsung dalam komentar CSS-nya. Jika anda memperhatikannya, anda akan mengetahui bahwa ternyata hanya ada beberapa baris kode saja untuk styling setiap tabel. Untuk menyesuaikannya dengan desain web anda, anda bisa mengganti warna-warnanya. Atau, anda juga mungkin bisa menambahkan style-style yang menurut anda bagus.

So, Bagaimana menurut anda? ada ide lain ? 🙂 Saya tunggu jawaban anda di komentar.

Sekian. Semoga bermanfaat.

~Muhammad Syakirurohman~

68 Comments

  1. Waw fixed head-nya mantap gan. Thx tutorialnya 😀

  2. Nice tutor…

  3. Jujur.. sebagai newbie… saya mendapatkan ilmu baru mengenai pembuatan table pada blog..rupanya begini caranya…
    terima kasih banyak mas…. salam sukses selalu..

  4. Semakin lama,semakin bertambah ilmu aku disini :3
    keep posting selalu mas syakir 😀

  5. Keren MAS Postingannya, terima kasih untuk ilmunya mas.
    Semoga mas semakin berjaya dan postingan saya semakin menarik berkat postingan yang mannnntap ini !!!
    Jangan lupa untuk mengunjungi situs saya ya di http://www.agendriver.com/

  6. bang ente orang mana? bogor kah?

  7. Widih keren2 bro. Izin belajar yya!

  8. Terima kasih infonya..

    Ditungu kunjungan balik ya:
    http://ukafahrurosid.com
    http://bahzam.com

    Thanks

  9. keren kang… kang kalo mau bikin yang Responsive gimana yaaa…?

  10. Artikel yang bagus gan, semoga setelah membaca artikel ini blogg saya semakin maju…haha
    Jika Anda membutuhkan Drivers Printer silahkan kunjungi situs saya di http://www.agendriver.com/

  11. itu bisaa buat blogger ya?

  12. trims tabelnya, ane bookmark dulu karena sering nyari 🙂 thanks ya

  13. makasih banyak gan,langsung praktekkan dulu,oya kok punya saya belum responsive ya mas dengan 5 kolom, gimana agar responsive dalam membuat tabel

  14. Terimakasih atas ilmunya, salam kenal..

  15. infonya baik sekali gan akhirnnya saya dapat membuat table dengan cara agan

  16. gan gimana cara buat code css supaya bisa frame kayak kotak yg ada nama 5 code itu,

  17. memang bagus.

    Ka gimana caranya buat Tab view seperti di postingan??
    Makasih sblumnya…

  18. Wah sangat bermanfaat sekali infonya..

    Bagi agan yang berminat belajar membuat website bisa dilihat di situs berikut ini Belajar Membuat Website di Bali

  19. Thank’s and matur nuwun tutorial’y, sob……

  20. ijin berguru kang.

  21. Keren… tapi kira2 pa tabel diatas bisa diterapkan pada semua jenis template?

  22. gan mau nanya kalau dalam table diberi titik dua (:),jadi tiap nginputkan 2 angka ditandai tanda titik dua. kira -kira apa ya gan untuk listing php nya?

  23. bro, mau tanya kalo bikin tabel yang paling bawah banget gimana ya? tertarik nih saya..

  24. makasih infonya…

  25. Saya lebih suka highlighted table

  26. all right gan …
    mau dicoba dulu bikin tabelnya … biar lebih mudah ngatur posisi text dan gak berantakan ^_^

  27. zebra tabel lebih simpel menurut saya..

  28. gan klo fungsi tabelnya buat iklan baris gmna ya caranya ?
    biar per baris ada 5 kolom ke bawahnya 5 kolom, tapi ukuran kolomnya sama semua

  29. Trima kasih gan untuk tutor tabel responsifnya.. tapi jujur ya sy aga pusing liat kode2nya 😀 .. Maaf gan kalo bisa info mengenai plugin untuk membuat tabel responsif di wordpress dungs.. Salam

  30. artikel yang bagus..thanks gan..

  31. aku ingin membuat tabel paling atas 2 kolom terus bawahnya 1 kolom bawahnya lagi ada 2 kolom, scriptnya gimana ya min

  32. melihat ada kode yang harus diselipkan pada css template, apa ini tidak bentrok dengan isi kode lainnya?
    karena saya sudah menggunakan template premium dan gak bisa setting sendiri

  33. kalau mau di pake di blog gimana? saya masih pemula

  34. Wah manteb nih tutorial membuat tablenya, nambah lagi nihh ilmu ane, kunjungi juga min http://www.fikiefendi.net/

  35. thanks pak

  36. saya akan cuba buat di blog saya,terima kasih dgn infonya

  37. Gan cara letakin kode css nya dimana? maklum masih newbie main blog hehe 😀

  38. wow, mantap,
    ini yang saya cari.
    thank min

  39. Gan kode cssnya di selipin di sebelah mana di edit template?

  40. sangat membantu sekali terimakasih sanggat bermanfaat.

  41. Dari sekian banyak situs yang mengulas html dengan tampilan menarik, ini yang menurut saya paling bagus dan mudah

  42. Mas boleh izin share ???

  43. Terimakasih gan

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *