Cara Membuat Tabel Keren dan Responsive di Blog

Selamat malam semuanya bertemu kembali dengan saya admin enalblogger kali ini saya akan membahas seputar blog yaitu cara membuat tabel keren dan responsive di blog.

Kamu pasti ingin membuat tabel untuk menampilkan sebuah data atau untuk keperluan lainnya, Apakah kamu pernah kepikiran untuk membuat sebuah tabel yang keren dan menarik? Mungkin untuk yang sudah mahir dibidang blog sudah tidak perlu lagi lihat di google jika ingin membuat sebuah tabel, tabi berbeda dengan kita selaku pemula jika ingin membuat apa-apa pasti ujung-ujungnya liat di google.

Untuk membuat sebuah tabel yang keren dan responsive dan setiap garis warnanya dapat kamu tentukan sendiril lalu saat kursor mengarah ke salah satu sell maka akan ada hover warna lain yang muncul. Gimana pengen coba? Yuk langsung saja ikuti tutorial dari saya dibawah ini.

Cara Mudah Membuat Tabel Keren di Blogspot

1. Langkah pertama, masuk ke Blogger > Template > Edit HTML > Cari Kode /]]></b:skin> Setelah itu silakan kalian pastekan kode dibawah ini tepat diatasnya.

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

2. Jika sudah, silakan masuk ke postingan blog seperti biasa, pastikan kalian masuk ke mode HTML jangan mode compose, Lalu pastekan kode table-nya dibawah 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">Helmet</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>

Setelah sampai di tahapan ini kamu dipastikan sudah bisa membuat tabel keren dan responsive dan menarik untuk dilihat, Kamu bisa meng-custom sendiri css-nya sesuai selera kalian masing-masing entah itu ganti color ubah ukuran padding, jumlah kolom atau jumlah baris.

Akhir kata :
Nah sampai disini dulu ya tutorial dari saya, jika ada yang masih bingung soal pemasangan atau masalah pemasangan tabel diatas silakan tanyakan dikolom komentar, Terimakasih sampai jumpa di tutorial selanjutnya.