Cara Terbaru Membuat Tabel Keren di Postingan Blogger

Cara Membuat Tabel Keren di Postingan Blogger - Sebelumnya saya sudah pernah menjelaskan beberapa cara mudah membuat tabel responsive di blog/blogspot. Namun kali ini saya membuatnya dengan tampilan yang jauh lebih menarik dengan efek saat di sentuh cursor mouse.

Tabel pada postingan blog ini saya buat agak lebih mirip dengan dengan tabel yang saya gunakan di dalam blog saya, namun dengan tambahan efek warna memanjang saat cursor pointer menyentuh tabel tersebut. Tabel ini sangat cocok di gunakan jika ingin membuat pengumuman online, seperti tabel pengumuman nilai atau pengumuman kelulusan, karena akan lebih mempermudah untuk melihat barisan label yang panjang pada tabel tersebut.

Cara Membuat Tabel Keren di Postingan Blogger

1. Login ke Blogger anda > pilih menu Tema > Selanjutnya pilih menu Edit HTML
2. Kemudian letakkan kode dibawah ini tepat berada diatas kode ]]></b:skin> atau </style>

   /* Tabel Blogger Responsive */
   table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
   table{border-collapse:collapse;border-spacing:0;}
   .post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:7px;text-align:left;vertical-align:top;}
   .post-body table tr th {border:1px solid #6f7785;color:#fff;padding:8px 10px;text-align:left;vertical-align:top;font-size:16px}
   .post-body table th {background:#747d8c;}
   .post-body table tr th:hover{background:#57606f}
   .post-body table.tr-caption-container {border:1px solid #f6f8f9;}
   .post-body table caption{border:none;font-style:italic;}
   .post-body td, .post-body th{color:#57606f;vertical-align:top;text-align:left;font-size:15px;padding:3px 5px;}
   .post-body table tr:nth-child(even) > td {background-color:#ecf0f1;}
   .post-body table tr:nth-child(odd) > td {background-color:#f6f8f9;}
   .post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px}
   .post-body td a:hover {color:#7f9bdf;border-color:#adbce0;}
   .post-body td a[target="_blank"]:after {margin-left:5px;}
   .post-body table.tr-caption-container td {border:none;padding:8px;}
   .post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
   .post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
   table {max-width:100%;width:100%;margin:1.5em auto;}
   table.section-columns td.first.columns-cell{border-left:none}
   table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
   table.columns-2 td.columns-cell{width:50%}
   table.columns-3 td.columns-cell{width:33.33%}
   table.columns-4 td.columns-cell{width:25%}
   table.section-columns td.columns-cell{vertical-align:top}
   table.tr-caption-container{padding:4px;margin-bottom:.5em}
   td.tr-caption{font-size:80%}
   .post-body table tr:hover td {background:#b0b1b4;color:#FFFFFF;border-top: 1px solid #22262e;}
   table tr:nth-child(odd):hover td {background:#b0b1b4;}

3. Untuk membuat tabel di postingan blog anda, pilih Entri Baru > kemudian letakkan kode ini pada mode HTML (bukan Compose)

   <table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
   <tr><th>Nama</th><th>Keterangan</th> </tr>
   <tr><td>Nama1</td><td>Nilai1</td> </tr>
   <tr><td>Nama2</td><td>Nilai2</td> </tr>
   <tr><td>Nama3</td><td>Nilai3</td> </tr>
   <tr><td>Nama4</td><td>Nilai4</td> </tr>
   </tbody> </table>

*Keterangan : Ubah yang ditandai Biru dengan data yang ingin anda masukkan

Untuk lebih Jelasnya bisa lihat gambar ini:

DEMO

Jika anda ingin menambahkan jumlah tabel lagi di bawahnya tambahkan kode <tr><td>Nama</td><td>Nilai</td> </tr> tepat berada diatas kode </tbody> </table> tadi.

Cukup sekian tutorial dari saya tentang Cara Membuat Tabel Keren dan Responsive di Postingan Blogger. Jika ada hal yang kurang dipahami seputar cara membuat tabel ini, jangan sungkan-sungkan untuk bertanya.

Bagikan Artikel ini