Cara Gampang Menciptakan Tabel Responsive Di Blogger
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 alasannya yaitu 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, alasannya yaitu selain tampilannya yang keren, responsive juga cocok untuk tampilan smartphone (mobile).
Tentunya hal yang baik bila kita menerapkan tabel pada postingan blog, alasannya yaitu 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 alasannya yaitu ada beberapa alasan, maka aku menciptakan tabel responsive terbaru ini, alasannya yaitu berdasarkan aku terlihat lebih baik dan tentunya cocok untuk aneka macam macam template pada blog.
2. Kemudian letakkan instruksi ini sempurna berada di atas instruksi ]]></b:skin> atau </style>
Contonya sanggup dilihat menyerupai gambar di bawah ini:
3. Untuk menerapkannya di dalam postingan kita, pilih hidangan Postingan > Entri Baru > Pilih hidangan HTML
4. kemudian letakkan instruksi ini di dalamnya
Contoh penerapannya sanggup di lihat menyerupai ini:
5. Kemudian edit kata-katanya sesuai cita-cita 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, bila ada sesuatu yang tidak dipahami sanggup pribadi menuju kolom komentar, Terimakasih. Sumber https://www.analisyuki.com/
Oleh alasannya yaitu 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, alasannya yaitu selain tampilannya yang keren, responsive juga cocok untuk tampilan smartphone (mobile).
Tentunya hal yang baik bila kita menerapkan tabel pada postingan blog, alasannya yaitu 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 alasannya yaitu ada beberapa alasan, maka aku menciptakan tabel responsive terbaru ini, alasannya yaitu berdasarkan aku terlihat lebih baik dan tentunya cocok untuk aneka macam macam template pada blog.
Cara Membuat Tabel Responsive di Blogger
1. Petama masuk ke Blog anda > Pilih Tema > kemudian pilih Edit HTML2. Kemudian letakkan instruksi ini sempurna berada di atas instruksi ]]></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 hidangan Postingan > Entri Baru > Pilih hidangan HTML
4. kemudian letakkan instruksi 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 cita-cita 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, bila ada sesuatu yang tidak dipahami sanggup pribadi menuju kolom komentar, Terimakasih. Sumber https://www.analisyuki.com/