Modifikasi Table Dengan CSS Warna Berselingan

Modifikasi Table Dengan CSS Warna Berselingan - Warna selang seling pada sebuah tabel hal ini dimaksudkan untuk memberi pemisah/pembatas warna, baik itu antar baris ataupun antar kolom untuk memudahkan pengunjung dalam membaca isi baris atau kolom tertentu, dalam modifikasi tabel mengunakan CSS ini ada sedikit efek :hover untuk tiap-tiap row dengan maksud lebih memudahkan lagi pembaca untuk menentukan bagian mana yang akan dilihat.

Banyak sekali gaya yang bisa kita buat untuk tampilan sebuah tabel menggunakan css ini, 2 contoh gaya css tabel dibawah ini merupakan gaya yang mungkin umum ditemui oleh kalian, warna selang seling untuk bagian baris dan warna selang seling pada bagian kolom, cukup sederhana namun bisa membantu pembaca tabel untuk mengurangai kelelahan mata dalam pembacaan.

Untuk sekarang ini banyak sekali kemudahan yang kita dapat untuk membuat sebuah tabel dengan beberapa kolom maupun beberapa baris, sekaligus memodifikasinya dengan tampilan-tampilan dengan gaya yang beragam menggunakan CSS, anggap saja Tool CSS Table Generator yang banyak tersedia didunia maya ini.

HTML table dibawah ini merupakan gaya sebuah table sederhana, untuk kesesuaian dengan maksud data yang akan ditampilkan, baik itu penggabungan kolom atau penggabungan baris dan Tag HTML Table lainnya, bisa melihat pada link ini.

Seperti apa tampilan table yang telah dimodifikasi dengan menggunakan CSS ini, bisa melihat pada halaman demo untuk melihatnya.

• Demo

HTML

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

Warna Berselingan Pada Baris

CSS

table {
  margin: 0 auto;
  width: 550px;
  border-collapse: collapse;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
tbody {
  color: #000;
}
table th, table td {
  padding: 5px 10px;
  border: 2px solid #EEF7FB;
}
table tr {
  font: normal 14px Tahoma, Geneva, sans-serif;
  background: #ECBE04;
}
table td {
  -webkit-transition: all 0.7s ease-in-out 0s;
  -moz-transition: all 0.7s ease-in-out 0s;
  -o-transition: all 0.7s ease-in-out 0s;
  transition: all 0.7s ease-in-out 0s;
}
table tr:nth-child(2n+0) {
  background: #FAEEBC;
}
table td:hover, table td:nth-child(2n+0):hover {
  background: #EEF7FB;
}
table th {
  background: #3EA4D0;
  color: #DAEEF6;
  text-shadow: 1px 1px 0 #1F627F;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 100px rgba(0, 0, 0, 0.15) inset;
  font: bold 16px Arial, Helvetica, sans-serif;
}

Warna Berselingan Pada Kolom

CSS

table {
  Margin:0 auto;
  width: 550px;
  border-collapse: collapse;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
tbody {
  color: #000;
}
table th, table td {
  padding: 5px 10px;
  border: 2px solid #EEF7FB;
}
table tr {
  font: normal 14px Tahoma, Geneva, sans-serif;
  background: #ECBE04;
}
table td {
  -webkit-transition: all 0.7s ease-in-out 0s;
  -moz-transition: all 0.7s ease-in-out 0s;
  -o-transition: all 0.7s ease-in-out 0s;
  transition: all 0.7s ease-in-out 0s;
}
table td:nth-child(2n+0) {
  background: #FAEEBC;
}
table td:hover, table td:nth-child(2n+0):hover {
  background: #EEF7FB;
}
table th {
  background: #3EA4D0;
  color: #DAEEF6;
  text-shadow: 1px 1px 0 #1F627F;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 100px rgba(0, 0, 0, 0.15) inset;
  font: bold 16px Arial, Helvetica, sans-serif;
}

CSS diatas hanya sebagian kecil dari contoh tampilan-tampilan tabel menggunakan css, kalian bisa menciptakan desain tampilan css table ini lebih baik daripada contoh tampilan tabel diatas, selamat berkreasi.