Bagaimana Cara Membuat Zebra Striped Table

APPKALSEL.com | Developer Aplikasi Kalimantan Selatan | Assalamu’alaikum Wr.Wb.

Zebra Striped Table adalah tampilan tabel yang memiliki warna baris silih berganti. Tujuan dari konsep desain tabel dengan warna baris yang silih berganti ini adalah untuk memudahkan pengguna menyusuri data pada setiap baris hingga jauh ke sisi kanan tabel tanpa melenceng ke baris di atas atau di bawahnya.

<table>
	<thead>
		<tr>
			<td>Kolom 1</td>
			<td>Kolom 2</td>
			<td>Kolom 3</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1.</td>
			<td>Baris Pertama Kolom 2</td>
			<td>Baris Pertama Kolom 3</td>
		</tr>
		<tr>
			<td>2.</td>
			<td>Baris Kedua Kolom 2</td>
			<td>Baris Kedua Kolom 3</td>
		</tr>
		<tr>
			<td>3.</td>
			<td>Baris Ketiga Kolom 2</td>
			<td>Baris Ketiga Kolom 3</td>
		</tr>
	</tbody>
</table>
table zebra
Gambar 1. Tampilan HTML

Untuk membuat tampilan tabel dengan warna baris silih berganti (Zebra Striped Table), anda hanya tinggal menambahkan beberapa baris styling CSS.

/* CSS: Tabel Zebra Style */
table tbody tr:nth-child(even){
	background: #CCCCCC; /* = Kita mencoba menggunakan kode warna Abu-abu */
}

Implementasi

Penerapan Trik CSS Membuat Tabel Bermotif Zebra ini dapat dilihat di Link DEMO. Anda juga dapat mencoba sendiri Trik CSS Membuat Tabel Bermotif Zebra ini dengan mengunduh Source Code di Link DOWNLOAD

DEMO
DOWNLOAD

Untuk membuat Tampilan (User Interface) yang lebih menarik pada Trik CSS Membuat Tabel Bermotif Zebra (Zebra Striped Table) ini, anda dapat memainkan Trik CSS sesuai keinginan anda. Untuk referensi, kami juga membagikan beberapa Trik CSS yang mungkin menarik untuk anda.

Penjelasan

Maaf! Saya tidak menberikan penjelasan secara detail tentang Trik CSS Membuat Tabel Bermotif Zebra (Zebra Striped Table) ini. Kita dapat membahasnya sama-sama di Kolom Komentar.