Membuat efek Table Zebra dengan CSS

Efek zebra pada tabel sangatlah dibutuhkan terutama untuk tabel yang berukuran besar. Efek zebra ini sangat bermanfaat untuk menghindari kesalahan dalam pembacaan (baris loncat). Untuk membuat efek zebra, logikanya cukup sederhana yaitu memberi warna yang berbeda antara baris (<tr>) genap dan ganjil.

Lalu bagaimana cara mengidentifikasi mana baris ganjil dan mana baris genap? Jawabannya dengan mengunakan selector nth-child(odd) untuk baris ganjil dan nth-child(even)untuk baris genap. Sekarang kita lihat table dibawah ini:

<table> 
<tbody> 
<tr> 
	<th>Baris 1</th>
	<th>Kolom 1</th> 
	<th>Kolom 2</th> 
	<th>Kolom 3</th> 
	<th>Kolom 4</th> 
	<th>Kolom 5</th> 
	<th>Kolom 6</th>
</tr> 
<tr> 
	<th>Baris 2</th> 
	<td>isi</td> 
	<td>isi</td> 
	<td>isi</td> 
	<td>isi</td> 
	<td>isi</td> 
	<td>isi</td>
</tr> 
<tr> 
	<th>Baris 3</th> 
	<td>isi</td> 
	<td>isi</td> 
	<td>isi</td>
	<td>isi</td> 
	<td>isi</td> 
	<td>isi</td> 
</tr>
<tr> 
	<th>Baris 4</th> 
	<td>isi</td> 
	<td>isi</td> 
	<td>isi</td>
	<td>isi</td> 
	<td>isi</td> 
	<td>isi</td> 
</tr>
<tr> 
	<th>Baris 5</th> 
	<td>isi</td> 
	<td>isi</td> 
	<td>isi</td>
	<td>isi</td> 
	<td>isi</td> 
	<td>isi</td> 
</tr>
</tbody> 
</table>

Kemudian CS untuk Tabel Zebra adalh sebagai berikut:

body{
    font-family:arial,verdana;
    font-size:12px;
}
 
table, th, td {
    border-collapse: collapse;
}

th,td{
    padding:5px 10px;
    text-align:center;
}
 
/* Warna Border */
table {border:1px solid #29578A;}
td{border:1px solid #ddd;}
th{border:1px solid #479;}

/* Warna Header */
th{ background:#29578A; color:#fff; }
 
/* Efek Zebra */
table tr:nth-child(odd){
    background:#ccc; /* Baris ganjil Dihitung dari Header*/
}
 
table tr:nth-child(even){
    background:#eee; /* Baris Genap */
}

Source Code HTML-CSS lengkap untuk Table zebra:

<html>
<head>
<title>Table Zebra Demo by Tutorials ID</title>
<style>
body{
    font-family:arial,verdana;
    font-size:12px;
}
 
table, th, td {
    border-collapse: collapse;
}

th,td{
    padding:5px 10px;
    text-align:center;
}
 
/* Warna Border */
table {border:1px solid #29578A;}
td{border:1px solid #ddd;}
th{border:1px solid #479;}

/* Warna Header */
th{ background:#29578A; color:#fff; }
 
/* Efek Zebra */
table tr:nth-child(odd){
    background:#ccc; /* Baris ganjil Dihitung dari Header*/
}
 
table tr:nth-child(even){
    background:#eee; /* Baris Genap */
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
    <th>Baris 1</th>
    <th>Kolom 1</th>
    <th>Kolom 2</th>
    <th>Kolom 3</th>
    <th>Kolom 4</th>
    <th>Kolom 5</th>
    <th>Kolom 6</th>
</tr>
<tr>
    <th>Baris 2</th>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
</tr>
<tr>
    <th>Baris 3</th>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
</tr>
<tr>
    <th>Baris 4</th>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
</tr>
<tr>
    <th>Baris 5</th>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
</tr>
</tbody>
</table>
</body>
</html>

[button title=”DEMO” icon=”icon-download” icon_position=”left” link=”https://webdesign.tutorials.id/demo/table-zebra.html” target=”_blank” color=”” font_color=”” large=”0″ class=”” download=””]

(Visited 109 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *