Cara Membuat Tabel Keren di Blogger

Cara Membuat Tabel Keren di Blogger – Pada kesempatan ini admin felmika akan membagikan tutorial cara membuat tabel keren yang responsive di blogger.

Sebenarnya sudah banyak tutorial di internet cara membuat tabel dengan tampilan dan modifikasi yang keren dan menarik.

Bagi kalian pengguna template premium, sebenarnya sudah disediakan kode dan tampilan tabel keren bawaan tema itu sendiri. Tapi tidak salahnya kan mencoba tabel keren yang saya posting ini.

Cara Membuat Tabel Keren di Blogger

1. Buka Blogger Kalian
2. Pilih Tema
3. Pada SESUAIKAN, pilih Edit HTML
4. Kemudian masukkan kode ini tepat berada diatas kode ]]></b:skin> atau </style>

   /* Table Responsive By Felmika */
   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;}

5. Kemudian pilih Simpan Tema
6. Untuk menerapkannya di blogger, buat postingan seperti biasa, masuk ke Tampilan HTML
7. Kemudian letakkan kode ini di dalamnya

   <div class="post-body">
   <table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
   <tr><th>Nama</th><th>Keterangan</th> </tr>
   <tr><td>ISI-TABEL</td><td>ISI-TABEL</td></tr>
   <tr><td>ISI-TABEL</td><td>ISI-TABEL</td></tr>
   <tr><td>ISI-TABEL</td><td>ISI-TABEL</td></tr>
   <tr><td>ISI-TABEL</td><td>ISI-TABEL</td></tr>
   </tbody></table>

Tabel ini admin buat sedemikian rupa agas pas pada postingan blogger, tidak terpotong danelastis jika dimasukkan data yang banyak. Admin sendiri juga menggunakan tabel ini di blogger dan wordpress.