Berikut ini kita akan membuat table dengan kolom dan baris dengan warna selang-seling.

Copy dan paste script table di bawah ini ke tempat yang diinginkan :

<table>
<tbody>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 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>

Script table diatas masih belum diatur warnanya. Untuk bisa menjadi kolom dan baris dengan background warna harus ditambahkan dengan CSS.

Script CSS untuk kolom selang-seling warna :

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;
}

Hasilnya klik disini

Script CSS untuk baris selang-seling warna :

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;
}

Hasilnya klik disini

Semoga bermanfaat…