Modifikasi Kolom Tabel Warna-Warni Dengan CSS Pada Table

Modifikasi Kolom Tabel Warna-Warni Dengan CSS Pada Table - Seperti diketahui membuat tabel (table) dengan menggunakan tag table akan menghasilkan sebuah tabel yang sederhana (standar), berbeda jika menambahkan style berupa css pada tag-tag html pendukung tabel, mungkin hasilnya akan lebih baik, penambahan style css untuk memodifikasi tampilan pada sebuah tabel tidaklah begitu sulit, kita hanya menambahkan properti-properti yang dibutuhkan dalam memodifikasi tabel.

Pada contoh tabel yang akan saya share ini, sebuah tabel dengan tambahan tag col untuk menghasilkan kolom tabel yang warna-warni dengan sedikit tambahan style css untuk memodifikasi dari segi tampilannya.

CSS

table {
  border-collapse:collapse;
  width:100%;
  box-shadow: 0px 20px 25px -20px black;
  margin:0 auto 25px auto;
}
table, th, td {
  border: 1px solid white;
  padding:5px 10px;
}
tr {
  color:black;
  font:normal 14px Arial, Helvetica, sans-serif;
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  transition:All 1s ease;
}
tr:nth-child(even) {
  color:blue;
}
tr:hover, tr:nth-child(even):hover {
  color:white;
  text-shadow: 0px 0px 15px #FFFFFF;
}
th {
  background-image: linear-gradient(bottom, #5789AB 13%, #96C4D9 67%);
  background-image: -o-linear-gradient(bottom, #5789AB 13%, #96C4D9 67%);
  background-image: -moz-linear-gradient(bottom, #5789AB 13%, #96C4D9 67%);
  background-image: -webkit-linear-gradient(bottom, #5789AB 13%, #96C4D9 67%);
  background-image: -ms-linear-gradient(bottom, #5789AB 13%, #96C4D9 67%);
  color:white;
  font:normal 16px Impact, Charcoal, sans-serif;
  text-shadow: 1px 1px 0px #151F26;
}
.col1 {background:#E6B16C;}
.col2 {background:#B3B3B3;}
.col3 {background:#4AFF4A;}
.col4 {background:#AFDBE6;}
.col5 {background:#FF0000;}
.col6 {background:#FFF947;}
.col7 {background:#F99EFF;}

HTML

<table>
<col class="col1">
<col class="col2">
<col class="col3">
<col class="col4">
<col class="col5">
<col class="col6">
<col class="col7">
<tr>
<th>Header-1</th>
<th>Header-2</th>
<th>Header-3</th>
<th>Header-4</th>
<th>Header-5</th>
<th>Header-6</th>
<th>Header-7</th>
</tr>
<tr>
<td>Keterangan1</td>
<td>Keterangan2</td>
<td>Keterangan3</td>
<td>Keterangan4</td>
<td>Keterangan5</td>
<td>Keterangan6</td>
<td>Keterangan7</td>
</tr>
<tr>
<td>Keterangan1</td>
<td>Keterangan2</td>
<td>Keterangan3</td>
<td>Keterangan4</td>
<td>Keterangan5</td>
<td>Keterangan6</td>
<td>Keterangan7</td>
</tr>
<tr>
<td>Keterangan1</td>
<td>Keterangan2</td>
<td>Keterangan3</td>
<td>Keterangan4</td>
<td>Keterangan5</td>
<td>Keterangan6</td>
<td>Keterangan7</td>
</tr>
</table>

• Demo

Dari tampilannya memang sedikit norak, dengan warna-warna yang gonjreng, untuk itu kalian bisa merubah/memodifikasi ulang style css yang diatas dengan style css yang menurut kalian sesuai dengan background template yang dipergunakan.

Banyak sekali generator-generator online untuk membuat dan memodifikasi tabel dengan css, jika tidak cocok dengan script tabel diatas, kalian bisa mempergunakan online generator tabel untuk membuatnya.