Membuat Tabel Keren dan Responsive di Blogspot

Cara membuat tabel dengan bantuan CSS - Pasti kalian pernah membuat sebuah tabel untuk menampilkan sebuah data atau untuk keperluan apa saja. Sempat kepikiran tidak untuk membuat sebuah tampilan tabel yang keren dan menarik? Mungkin bagi yang sudah mahir dibidangnya sudah tidak perlu lihat google lagi jika ingin meng-custom sebuah tabel tapi bagi kita selaku pemula jika mau merubah apa-apa pasti ujung-ujungnya mbah google.

Membuat sebuah tabel yang responsif dan setiap pergantian garis warnanya bisa kita tentukan sendiri lalu ketika kursor mengarah ke salah satu sell maka akan ada hover warna lain yang muncul. Ko melongo begitu? Bingung ya apa yang saya omongin, kalau begitu kita simak saja langsung preview dari tabel yang akan kita buat nantinya.

Barang	Harga
Kaos	Rp. 35.000
Jaket	Rp. 65.000
Jeans	Rp. 85.000
Raglan	Rp. 56.000
Jilbab	Rp. 25.000

Baca Juga

Pertama, masuk Blogger > Template > Edit HTML > cari kode /]]></b:skin> pastekan css di bawah ini tepat di atas kode tersebut.

.table-fill {
  background: white;
  border-radius:3px;
  border-collapse: collapse;
  margin: auto;
  padding:5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
 
.table-fill th {
  color:#D5DDE5;;
  background:#1b1e24;
  border-bottom:4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size:16px;
  font-weight: 100;
  padding:10px;
  text-align:left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}
.table-fill th:first-child {
  border-top-left-radius:3px;
}
 
.table-fill th:last-child {
  border-top-right-radius:3px;
  border-right:none;
}
  
.table-fill tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color:#666B85;
  font-size:16px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
 
.table-fill tr:hover td {
  background:#4E5066;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
}
 
.table-fill tr:first-child {
  border-top:none;
}

.table-fill tr:last-child {
  border-bottom:none;
}
 
.table-fill tr:nth-child(odd) td {
  background:#EBEBEB;
}
 
.table-fill tr:nth-child(odd):hover td {
  background:#4E5066;
}

.table-fill tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
 
.table-fill tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
 
.table-fill td {
  background:#FFFFFF;
  padding:5px;
  text-align:left;
  vertical-align:middle;
  font-weight:300;
  font-size:14px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}

.table-fill td:last-child {
  border-right: 0px;
}

.table-fill th.text-left {
  text-align: left;
}

.table-fill th.text-center {
  text-align: center;
}

.table-fill th.text-right {
  text-align: right;
}

.table-fill td.text-left {
  text-align: left;
}

.table-fill td.text-center {
  text-align: center;
}

.table-fill td.text-right {
  text-align: right;
}

Sekarang masuk ke postingan baru atau halaman baru, pastikan berada di mode HTML jangan compose, lalu pastekan kode pemanggilan table-nya di bawah ini.

<table class="table-fill">
<thead>
<tr>
<th class="text-left">Barang</th>
<th class="text-left">Harga</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left">Kaos</td>
<td class="text-left">Rp. 35.000</td>
</tr>
<tr>
<td class="text-left">Jaket</td>
<td class="text-left">Rp. 65.000</td>
</tr>
<tr>
<td class="text-left">Jeans</td>
<td class="text-left">Rp. 85.000</td>
</tr>
<tr>
<td class="text-left">Raglan</td>
<td class="text-left">Rp. 56.000</td>
</tr>
<tr>
<td class="text-left">Jilbab</td>
<td class="text-left">Rp. 25.000</td>
</tr>
</tbody>
</table>

Nah, setelah tahapan ini kalian dipastikan sudah bisa membuat table responsive dan keren serta enak di lihat bukan. Kalian bisa kustom css-nya sesuai dengan keinginan kalian entah itu ganti warna ubah ukuran padding, jumlah kolom dan jumlah baris.

Jika kalian penyuka bootstrap pasti sudah tidak asing dengan banyaknya tampilan tabel yang simple tapi elegan kelihatannya. Yaa, sebagai blogger tujuan akhir untuk mempercantik blog kan intinya ada pada kenyamanan pengunjung, sebagus apapun kalau isi konten tidak menarik apa mau dikata. hehe

Jika ada yang bingung perihal pemasangan tabel di atas bisa kita diskusikan di kolom komentar, sampai jumpa di postingan berikutnya.

Tweet