Membuat Warna Selang Seling Baris / Row Tabel dengan CSS

joesep 2018-11-23 76

membuat warna row table dengan php

Membuat Warna Selang Seling Baris / Row Tabel dengan CSS - Untuk menyajikan data berbentuk tabulasi kita bisa membuat tampilan yang bertolak belakang antara baris yang satu dengan yang lain. Untuk mengimplementasikannya kita bisa membuat tampilan yang bertolak belakang antara baris ganjil dan baris genap. Kita dapat menciptakan perbedaan itu dengan menyerahkan latar belakang warna yang berbeda.

Dalam penyajian dengan browser, kita menggunakan tr:nth-child(even) atau tr:nth-child(odd). Pada misal kali ini anda akan memakai tr:nth-child(even) dengan contoh berikut ini:

Cara membuat tabel warna warni dengan css

Silahkan anda copy/paste kode dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>Variasi baris ganjil genap</title>

<style type="text/css">
table
{
    border: 1px solid #000;
}
thead
{
    background-color:#c0bc03;
}

tbody tr:nth-child(even) 
{
    background-color:#ddd;
}
</style>

</head>

<body>

<table>
<thead>
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
<td>Kolom 3</td>
<td>Kolom 4</td>
</tr>
</thead>
<tbody
<tr>
<td>Baris 1</td>
<td>ini</td>
<td>juga</td>
<td>ya</td>
</tr>
<tr>
<td>Baris 2</td>
<td>ini</td>
<td>juga</td>
<td>ya</td>
</tr>
<tr>
<td>Baris 3</td>
<td>ini</td>
<td>juga</td>
<td>ya</td>
</tr>
<tr>
<td>Baris 4</td>
<td>ini</td>
<td>juga</td>
<td>ya</td>
</tr>
<tr>
<td>Baris 5</td>
<td>ini</td>
<td>juga</td>
<td>ya</td>
</tr>

</tbody>
</body>

</html>

 

Sekian tutorial tentang Membuat Warna Selang Seling Baris / Row Tabel dengan CSS, semoga bermanfaat.

Terbaru dari PHP


close