Masukkan Email anda untuk berlangganan Devaradise. Gratis!

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~

75 thoughts on “5 Cara Membuat Tabel HTML menjadi Lebih Menarik

Tinggalkan Balasan