Membuat Tabel Motif Zebra Dengan CSS

Update Terakhir pada

 

Assalamualaikum Wr. Wb

Sahabat Webhozz dimanapun berada, apa kabarnya??? Mudah-mudahan sehat selalu dan selalu bahagia ya, amin.

Pada kesempatan kali ini kita akan belajar tentang table zebra. Kenapa disebut Zebra???

Hal ini dikarenakan warna backround tiap baris pada tabel memiliki corak warna selang seling. Maka dari itu disebut dengan Tabel Zebra.

Oke, langsung aja ya kita mulai.

1. Buat file HTML dulu, ketikkan Script HTML seperti biasa.

//===============================
<!DOCTYPE html>
<html>
<head>
	<title>Tabel Zebra</title>
</head>
<body>

</body>
</html>
//===============================

2. Masukkan Script pembuatan tabel HTML pada tag.

//================================
<h2>Data Produk</h2>

	<table>
		<tr>
			<th>No.</th>
			<th>Kode Barang</th>
			<th>Nama Barang</th>
			<th>Stok</th>
		</tr>

		<tr>
			<td align="center">1</td>
			<td align="center">BG001</td>
			<td>Gula Pasir 1 Kg</td>
			<td align="center">12</td>
		</tr>

		<tr>
			<td align="center">2</td>
			<td align="center">BG002</td>
			<td>Bumbu Rendang</td>
			<td align="center">5</td>
		</tr>

		<tr>
			<td align="center">3</td>
			<td align="center">BG003</td>
			<td>Garam 100gr</td>
			<td align="center">10</td>
		</tr>

		<tr>
			<td align="center">4</td>
			<td align="center">BG004</td>
			<td>Mentega 100gr</td>
			<td align="center">2</td>
		</tr>

		<tr>
			<td align="center">5</td>
			<td align="center">BG005</td>
			<td>Sabun Colek</td>
			<td align="center">0</td>
		</tr>
	</table>
//================================

3. Buat file CSSnya, lalu ketikkan script css seperti berikut ini.

//================================
body
{
	font-family:sans-serif;
}

table
{
	border-collapse: collapse;
	width: 35%;
}

table, th, td
{
	border: 1px solid gainsboro;
	padding: 10px;
}

th
{
	background-color: dodgerblue;
	color: white;
}

tr:nth-child(odd)
{
	background-color: Lavender;
}
//================================

4. Panggil file cssnya pada file HTMLnya, tepatnya pada tag.

//================================
<link rel="stylesheet" type="text/css" href="namafile.css">
//================================

5. Dan seperti inilah hasil akhirnya.

Seperti yang kita lihat, pada tabel css tersebut kita ada menambahkan pseudo class selector :nth-child(odd). Pseudo class selector :nth-child itu sendiri adalah selector yang memungkinkan kita untuk menseleksi elemen html.

Seperti contoh tadi, kita berikan pada tag

, karena yang akan kita buat selang seling tadi adalah baris dari tabel.

Di dalam :nth-child itu ada valuenya, yaitu (odd). Yang mana, value tersebut akan merujuk ke baris tiap tabel yang urutan genap. Jadi, tabel urutan genap tersebut punya warna tersendiri.

Demikianlah postingan artikel pada kali ini. Semoga bermanfaat ya…dan selamat mencoba. Semoga sukses selalu, amin.