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.

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.

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 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.

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.

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 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 ?