Tabel merupakan salah satu elemen penting untuk menampilkan data. Data yang penting pun menjadi tidak menarik jika tabel yang ditampilkan tidak menarik, untuk itu kali ini kita akan membahas bagaimana cara mendesain tabel dengan css.
Desain tabel yang menarik itu bagaimana? desain yang menarik ya yang enak dilihat baik kerapiannya maupun kombinasi warnanya.
Warna baris pada tabel biasanya menggunakan warna yang soft, karena yang ditonjolkan adalah isi datanya. Kombinasi warna soft ini biasanya menggunakan jenis warna monochromatic yaitu kombinasi warna tertentu dengan warna lain yang lebih muda.
Pada contoh kali ini kita akan membuat tabel dengan hasil akhir seperti ini:
Jika sobat ingin tahu lebih jauh tentang elemen pada tabel, dapat membaca artikel: Cara Membuat Tabel Dengan HTML 5 dan CSS 3
Jika ingin mencari ide desain tabel, dapat mengunjungi halaman: 10 Ide Desain Tabel Menarik Dengan CSS 3 – Fresh Design
Kode HTML dan CSS nya adalah:
<html>
<head>
<style type="text/css">
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
}
/* Table */
.demo-table {
border-collapse: collapse;
font-size: 13px;
}
.demo-table th,
.demo-table td {
border: 1px solid #e1edff;
padding: 7px 17px;
}
.demo-table .title {
caption-side: bottom;
margin-top: 12px;
}
/* Table Header */
.demo-table thead th {
background-color: #508abb;
color: #FFFFFF;
border-color: #6ea1cc !important;
text-transform: uppercase;
}
/* Table Body */
.demo-table tbody td {
color: #353535;
}
.demo-table tbody td:first-child,
.demo-table tbody td:last-child,
.demo-table tbody td:nth-child(4) {
text-align: right;
}
.demo-table tbody tr:nth-child(odd) td {
background-color: #f4fbff;
}
.demo-table tbody tr:hover td {
background-color: #ffffa2;
border-color: #ffff0f;
transition: all .2s;
}
/* Table Footer */
.demo-table tfoot th {
background-color: #e5f5ff;
}
.demo-table tfoot th:first-child {
text-align: left;
}
.demo-table tbody td:empty
{
background-color: #ffcccc;
}
</style>
</head>
<body>
<table class="demo-table" >
<caption class="title">Tabel 1. Data Penjualan Divisi Elektronik</caption>
<thead>
<tr>
<th>No</th>
<th>Pembeli</th>
<th>Barang</th>
<th>Tanggal</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anton</td>
<td>Televisi</td>
<td>07 Juni 2016</td>
<td>2.500.000</td>
</tr>
<tr>
<td>2</td>
<td>Bryan</td>
<td>Mesin Cuci</td>
<td>10 Juli 2016</td>
<td>1.500.000</td>
</tr>
<tr>
<td>3</td>
<td>Cherly</td>
<td>Dispenser</td>
<td>11 Agustus 2016</td>
<td>950.000</td>
</tr>
<tr>
<td>4</td>
<td>Dean</td>
<td>Kulkas</td>
<td>15 September 2016</td>
<td>1.750.000</td>
</tr>
<tr>
<td>5</td>
<td>Esryl</td>
<td>Kipas Angin</td>
<td>11 Oktober 2016</td>
<td>450.000</td>
</tr>
<tr>
<td>6</td>
<td>Franky</td>
<td>Seterika</td>
<td>17 Oktober 2016</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>Gerry</td>
<td>AC</td>
<td>17 November 2016</td>
<td>3.250.000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">Total</th>
<th>7.150.000</th>
</tr>
</tfoot>
</table>
</body>
</html>Buat sebuah file HTML, misal tabel.html kemudian copy paste kode diatas, SELESAI.
Perlu penjelasan lebih lanjut? OK, mari kita lanjutkan
1 Penting: Property bawaan
Pertama tama, penting untuk diperhatikan bahwa browser secara defaut telah mendefinisikan secara spesifik beberapa property untuk tabel, karena spesifik, maka kita harus meng override/menimpa style tersebut secara spesifik juga.
Salah satunya adalah ukuran font font-size dimana kita tidak dapat mendefinisikannya secara global, misal pada body{}. Pada contoh diatas kita tidak bisa mendefinisikan ukuran font tabel pada body seperti ini:
body {
font-size: 12px;
}Sedangkan property font-family pada tabel tidak secara spesifik didefinisikan oleh browser, sehingga kita dapat mendefinisikannya pada elemen parent dari tabel tersebut, pada contoh diatas elemen body.
Contoh lain adalah property border-collapse, secara default browser memberi nilai separate sehingga terlihat ada jarak antar kolom, oleh karena itu pada contoh diatas kita definisikan property ini dengan value collapse
.demo-table {
border-collapse: collapse;
font-size: 14px;
}Adapun default property:value tabel yang didefinisikan oleh browser (Chrome) adalah:
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
table {
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-style: normal;
color: -internal-quirk-inherit;
text-align: start;
font-variant: normal normal;
}2 Mendesain Tabel Dengan CSS – Mengubah Align
Pada contoh diatas, secara default browser akan mendefinisikan text-align dengan nilai start yang artinya akan mendeteksi sesuai dengan jenis website, apakah LTR (left to right) atau RTL (right to left).
Pada jenis LTR (yang umum kita gunakan), align akan menjadi left, dengan demikian kita tidak perlu mendefinisikan ulang align dari teks.
Pada contoh diatas semua teks berada di posisi rata kiri, namun akan lebih rapi jika kolom nomor, tanggal dan harga dibuat rata-kanan, untuk itu kita buat align-right untuk kolom tersebut, adapun kode CSS nya:
.demo-table tbody td:first-child,
.demo-table tbody td:nth-child(4),
.demo-table tbody td:last-child {
text-align: right;
}Pada kode css diatas, kita banyak menggunakan pseudo-element untuk menseleksi elemen semu (tidak benar-benar ada), beberapa selector tersebut baru tersedia di CSS 3 (nth-child dan last-child) sehingga perlu diperhatikan terkait dukungan browser.
Sesuai namanya, :first-child akan menseleksi elemen children pertama (kolom No) dan :last-child akan menseleksi elemen children terakhir (kolom Harga), sedangkan :nth-child akan menseleksi kolom ke-n, pada contoh diatas kolom ke 4 ( :nth-child(4) ) yaitu kolom Tanggal.
Lebih jauh tentang ketiga pseudo elemen tersebut, sobat dapat membaca artikel: Memahami :first-child dan :last child, Selector Untuk Posisi Element dan Memahami :nth-child, selector untuk urutan element
3 Karakteristik Tabel Header (th)
Pada contoh diatas kita menggunakan <th> pada tag <thead> dan <tfoot>. Secara default, browser (Chrome) juga telah mendefinisikan style untuk elemen <th> ini, yaitu:
th {
font-weight: bold;
text-align: -internal-center;
}
td, th {
display: table-cell;
vertical-align: inherit;
}Nah karena sudah sesuai dengan yang kita inginkan yaitu font bold dan align center, maka kita tinggal mengubah warna background menjadi biru, warna huruf menjadi putih, dan bentuk huruf menjadi kapital.
CSS yang kita gunakan:
.demo-table thead th {
background-color: #508abb;
color: #FFFFFF;
border-color: #6ea1cc !important;
text-transform: uppercase;
}Kita menggunakan !important karena warna broser telah didefinisikan sebelumnya yaitu pada selector demo-table th, .demo-table td
Khusus untuk footer <tfoot>, kita hanya merubah align dan warna background menjadi biru agak gelap:
.demo-table tfoot th {
background-color: #e5f5ff;
}4 Membuat highlight pada row
Selanjutnya, pada tutorial mendesain tabel dengan CSS ini, kita akan membuat warna row berubah menjadi kuning ketika terjadi event hover (mouse berada diatas row).
Agar seolah-olah warna baris berubah menjadi kuning, kita ubah semua warna kolom pada baris tersebut:
.demo-table tbody tr:hover td {
background-color: #ffffa2;
border-color: #ffff0f;
transition: all .2s;
}Pada kode diatas, selector yang akan dijalankan ketika mouse berada diatas baris adalah .demo-table tbody tr:hover, selanjutnya kolom ( td ) yang ada pada baris tersebut kita ubah warna border dan backgroundnya menjadi kuning.
Pada kode diatas, property transition akan membuat perubahan warna menjadi halus/smooth.
5 Membuat Judul Tabel
Pada contoh diatas, kita menampilkan judul dari tabel menggunakan elemen <caption>.
Sama seperti elemen lain, browser secara default juga mendefinisikan style untuk elemen ini yaitu membuat teks berada di tengah/center, disamping itu, posisi caption secara default berada diatas.
caption {
display: table-caption;
text-align: -webkit-center;
}Pada contoh diatas, kita menempatkan caption di sebelah bawah tabel, untuk itu kita perlu mendefinisikan property caption-side dengan nilai bottom
.demo-table .title {
caption-side: bottom;
margin-top: 12px;
}6 Mendesain tabel dengan CSS – memberi warna tertentu pada kolom yang kosong
Untuk keperluan analisa data, terkadang kita perlu untuk mengetahui kolom mana saja yang kosong. Hal ini menjadi tidak mudah jika jumlah datanya banyak, ditambah warna kolom yang mirip
Untuk itu, kita perlu membuat warna kolom yang kosong tersebut berbeda dengan kolom yang lain. CSS telah menyediakan selector untuk menseleksi elemen yang kosong, yaitu menggunakan pseudo class :empty
.demo-table tbody td:empty
{
background-color: #ffcccc;
}Catatan: pseudo-class :empty mulai tersedia pada CSS 3. Pseudo class ini sudah didukung oleh browser modern sejak versi awal, namun khusus untuk Internet Explorer baru didukung pada versi 9.0.
Jika desain tabel ditujukan untuk IE versi lama, maka bisa mengganti pseudo-class tersebut dengan menambahkan class, misal .empty pada pada field yang kosong
Misal:
<tr>
<td>6</td>
<td>Franky</td>
<td>Setrika</td>
<td>17 Oktober 2016</td>
<td class="empty"></td>
</tr>CSS
.demo-table .empty
{
background-color: #ffcccc;
}Penutup
Banyak variasi yang dapat kita buat ketika mendesain tabel dengan css, pada prinsipnya sesuaikan desain tabel (baik warna, border, caption) sesuai dengan tema web kita, sehingga tetap menarik untuk dilihat.
Disamping itu, perhatikan dukungan browser pada class/pseudo-class yang kita gunakan, pastikan sudah sesuai dengan yang kita inginkan.
Jika sobat belum paham tentang elemen-elemen tabel yang digunakan pada contoh diatas, sobat dapat membaca artikel: Cara Membuat Tabel Dengan HTML 5 dan CSS 3
Jika ingin mendapatkan ide desain tabel dapat membaca artikel: 10 Ide Desain Tabel Menarik Dengan CSS 3 – Fresh Design
Demikian pembahasan mengenai cara mendesain tabel dengan css, 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
10 Feedback dari pembaca
Mas Agus,
Ijin download yah buat dicoba nih dipraktekkan..
Smg bermanfaat mas, sampean sudah bnyak membantu.hehehe
Aang Zaeni.
Iya mas, sama sama mas 🙂
mas caranya biar border di tabel itu semuanya berwarna biru
Pakai CSS property border mas, pada selector td:
Atau bisa pelajari demo nya atau download file nya
bang caranya membuat tabel biar di tengah kayak mana
Maksudnya bagaimana ya mas?
mas display:table;
fungsinya buat apa ya?
terima kasih
Agar seolah olah seperti tabel mas, sehingga berpengaruh ke childrennya, seperti display: table-row atau table-cell, coba googling dulu mas…
mas kalau untuk tabel waktu/jadwal yg bisa di “highlight” gitu gimana ya? (yg diblock seperti jadwal booking) saya tidak tahu namanya untuk dicari di internet.. mohon sekali bantuannya terima kasih
Di highlight maksudnya bagaimana ya mas? Apa kolom tabel dengan warna tertentu