#CSS - Cara Membuat Tabel Zebra (Warna Selang-Seling)

Tabel dengan warna selang-seling disebut juga dengan istilah tabel zebra dan tabel dengan pita warna, menggunakan kode css, tabel html juga bisa dibuat warna selang-seling dengan cara membuat warna background yang berbeda pada baris (row/cell) ganjil dan baris genap.

Desain tabel html dengan warna selang-seling dibuat untuk tujuan agar data atau informasi pada baris dan kolom tabel lebih mudah dipindai, yuk langsung saja kita cara membuat tabel dengan warna selang-seling menggunakan css (cascading style sheets).

CSS Selector:

// selektor css untuk baris ganjil (1,3,5 dst.) pada tabel html
table tbody tr:nth-child(odd)

// selektor css untuk baris genap (2,4,6 dst.) pada tabel html
table tbody tr:nth-child(even)

Contoh:

Pada cuplikan kode di bawah ini adalah contoh pengaturan css untuk membuat warna selang-seling pada baris (row) dan kolom (column) tabel html. [ads id="ads1"]

table tbody tr:nth-child(odd) {
   background-color: #d3fbd8;  //  adalah warna background (hijau muda) untuk baris ganjil
   color: #636363;  //  adalah warna font (grey) pada baris ganjil
}
table tbody tr:nth-child(even) {
   background-color: #fbf9d2; //  adalah warna background (kuning muda) untuk baris genap
   color: #636363;  //  adalah warna font (grey) pada baris genap
}

HTML Table

<table class="tzebra">
  <thead>
    <tr><th>No.</th><th>Column</th><th>Column</th><th>Column</th></tr>
  </thead>
 <tbody>
   <tr><td>1</td><td></td><td></td><td></td></tr>
   <tr><td>2</td><td></td><td></td><td></td></tr>
   <tr><td>3</td><td></td><td></td><td></td></tr>
   <tr><td>4</td><td></td><td></td><td></td></tr>
   <tr><td>5</td><td></td><td></td><td></td></tr>
   <tr><td>6</td><td></td><td></td><td></td></tr>
   <tr><td>7</td><td></td><td></td><td></td></tr>
 </tbody>
</table>

Table Preview

No.	Column	Column	Column
1
2
3
4
5
6
7

Tips: Dalam membuat tabel dengan warna selang-seling sebaiknya pilih warna background yang kontras dengan warna font pada table, warna border table juga sebaiknya jangan terlalu strong.

Kemudian warna background pada baris (row) ganjil dan baris genap harusnya diserasikan misalnya; grey dan putih atau warna lainnya yang menurut kamu serasi dan tidak mencolok.

Saya sendiri memilih desain warna pada tabel zebra seperti ini misalnya; Warna kolom header = blue, warna baris ganjil = blue 25% dan warna baris genap = blue 10%, saya pikir ini adalah pemilihan warna yang tepat untuk desain tabel zebra.

Demikian dari saya, jika kamu membutuhkan tabel html dengan desain warna selang-seling silahkan lihat koleksi tabel html cordialblogger.com, saya telah menyediakan beberapa tabel html lengkap dengan kode css-nya (tinggal pakai) dan tentu saja desain-nya responsive (fleksibilitas tabel sangat baik).