Cara Praktis Membuat Tabel Responsive di Blogger - Membuat postingan yang responsive merupakan salah satu cara untuk meningkatkan pengunjung di blog. Apalagi dalam menciptakan tabel di dalam postingan blog tentunya harus responsive baik pada tampilan desktop atau pada tampilan mobile.
Oleh sebab itu pada kesempatan kali ini aku akan membagikan cara menciptakan tabel keterangan pada postingan blog. Tabel ini juga aku gunakan dan aku terapkan sendiri di dalam blog saya, sebab selain tampilannya yang keren, responsive juga cocok untuk tampilan smartphone (mobile).
Tentunya hal yang baik jikalau kita menerapkan tabel pada postingan blog, sebab blog kita tidak terlihat menyerupai koran, lebih menarik, sanggup menarik minat pengunjung untuk berlama-lama dalam blog kita, juga memudahkan para pembaca dalam memahami isi postingan kita.
Sebenarnya beberapa ahad yang kemudian aku pernah membagikan cara menciptakan tabel keterangan. Namun sebab ada beberapa alasan, maka aku menciptakan tabel responsive terbaru ini, sebab berdasarkan aku terlihat lebih baik dan tentunya cocok untuk banyak sekali macam template pada blog.
Cara Membuat Tabel Responsive di Blogger
1. Petama masuk ke Blog anda > Pilih Tema > kemudian pilih Edit HTML
2. Kemudian letakkan arahan ini sempurna berada di atas arahan ]]></b:skin> atau </style>
/* Table Post 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:10px;text-align:left;vertical-align:top;} .post-body table tr th {border:1px solid #6f7785;color:#fff;padding:14px 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 table tr:nth-child(even) > td:hover {background-color:#ecf0f1;} .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%}Contonya sanggup dilihat menyerupai gambar di bawah ini:
3. Untuk menerapkannya di dalam postingan kita, pilih sajian Postingan > Entri Baru > Pilih sajian HTML
4. kemudian letakkan arahan ini di dalamnya
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody> <tr><th>Nama</th><th>Keterangan</th> </tr> <tr><td>Analis</td><td>Analisyuki</td> </tr> <tr><td>Analis</td><td>Analisyuki</td> </tr> <tr><td>Analis</td><td>Analisyuki</td> </tr> <tr><td>Analis</td><td>Analisyuki</td> </tr> </tbody> </table>Contoh penerapannya sanggup di lihat menyerupai ini:
5. Kemudian edit kata-katanya sesuai harapan anda, kemudian Publikasikan
Sampai disini cukup sekian saja dari saya, biar dengan tutorial cara memasang tabel pada postingan blog ini sanggup bermanfaat bagi kita semua, jikalau ada sesuatu yang tidak dipahami sanggup pribadi menuju kolom komentar, Terimakasih.Sumber http://www.analisyuki.com/
