ffCCBot/2.0 (http://commoncrawl.org/faq/)
NEW!! Buku Query MySQL Lihat Detail » x

Mendesain Tabel Dengan CSS 3 – Panduan Lengkap

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:

Cara Mendesain Tabel Dengan CSS - Hasil Akhir

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

Recomended Post

8 Feedback dari pembaca

Silakan tinggalkan komentar

*

Newsletter

Jadilah yang pertama tahu berita terbaru dari Jagowebdev.com

Like Us

  1. Memahami Tipe Data Pada PHP

  2. Query MySQL di Dalam PHP Loop – Bad Practice !!!

  3. Software Kompres dan Optimasi Gambar / Foto (JPG dan PNG) – Tested

  4. 40+ Theme WordPress Gratis Untuk Blog – Modern & Responsive

  5. Eksklusif Cheat Sheet PHP Bahasa Indonesia – Pendamping Belajar PHP

  6. PHP FORM III: Menampilkan Data MySQL Dengan PHP dan Form HTML

  7. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP

  8. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP

  9. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL

  10. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP