Selamat malam gan. Pada kesempatan kali ini admin ingin menyebarkan panduan Cara Membuat Tabel Responsive di blog yang mempunyai tampilan minimalis dan elegan.
Keberadaan tabel dalam sebuah artikel blog terkadang sangat kita butuhkan, Tabel biasanya sangat sering dipakai pada website/blog yang mempunyai topik review atau spesifikasi. misalnya blog yang mempunyai topik spesifikasi smartphone dan lain sebagainya.
Seperti yang kita ketahui bersama blogger tidak menyediakan fitur yang dapat menampilkan tabel dalam sebuah artikel. Sedangkan kita sebagai pemilik blog biasanya harus menciptakan tabel dengan tujuan biar pembaca lebih gampang untuk memahami apa yang kita masudkan. Oleh alasannya ialah itulah saya akan membagikan script/code yang dapat kau gunakan untuk menampilkan tabel didalam blog.
Tabel yang akan kita buat ini sudah mempunyai fitur responsive, yang mana tabel tersebut akan menyesuaikan dengan perangkat yang dipakai oleh pengunjung. Kaprikornus tampilan website kau akan tetap anggun dikala dikunjungi memakai perangkat apapun.
Kamu penasaran? Sama donk! Langsung saja simak panduan Cara Membuat Tabel Responsive di blog.
Cara Membuat Tabel Responsive di Blog
Panduan 1: Langkah pertama yang harus kau lakukan ialah masuk kehalaman dasboard blogger kalian.
Panduan 2: Kemudian pilih hidangan Tema/Template » dan lanjut klik tombol Edit HTML
Panduan 3: Silahkan cari kode]]></b:skin> atau </style> Gunakan kombinasi tombol CTRL+F Untuk mempermudah menemukan instruksi tersebut.
Panduan 4: Jika kau sudah menemukan instruksi tersebut. Copy instruksi CSS dibawah ini dan letakan sempurna diatas kode]]></b:skin> atau </style>Jika sudah jangan Simpan Template.
/* CSS Post Table by Mastahweb.com*/
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:5px 10px;text-align:left;vertical-align:top;} .post-body table th {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;} .post-body table.tr-caption-container {border:1px solid #e9e9e9;} .post-body table caption{border:none;font-style:italic;} .post-body table{} .post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;} .post-body table tr:nth-child(even) > td {background-color:#f9f9f9;} .post-body table tr:nth-child(even) > td:hover {background-color:#fbfbfb;} .post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px} .post-body th:hover{background:#fdfdfd;} .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 {font-size:80%;padding:0px 8px 8px !important;} .post-body li {list-style-type:square;} img {max-width:100%;height:auto;border:none;} 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%} .widget ul {padding:0;}
Panduan 5: Setelah itu kau tinggal memasang instruksi HTML dibawah ini disetiap artikel yang kau ingin menampilkan tabel. (Saat memasang instruksi ini. pastikan kau menulis dalam mode HTML bukan Compose)
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>MENU 1</th> <th>MENU 2</th> </tr>
<tr> <td>Invision 1</td> <td>Your Description 1</td> </tr>
<tr> <td>Invision 2</td> <td>Your Description 2</td> </tr>
<tr> <td>Invision 3</td> <td>Your Description 3</td> </tr>
<tr> <td>Invision 4</td> <td>Your Description 4</td> </tr>
<tr> <td>Invision 5</td> <td>Your Description 5</td> </tr>
<tr> <td>Invision 6</td> <td>Your Description 6</td> </tr>
<tr> <td>Invision 7</td> <td>Your Description 7</td> </tr>
<tr> <td>Invision 8</td> <td>Your Description 8</td> </tr>
<tr> <td>Invision 9</td> <td>Your Description 9</td> </tr>
<tr> <td>Invision 10</td> <td>Your Description 10</td> </tr>
<tr> <td>Invision 11</td> <td>Your Description 11</td> </tr>
<tr> <td>Invision 12</td> <td>Your Description 12</td> </tr>
<tr> <td>Invision 13</td> <td>Your Description 13</td> </tr>
<tr> <td>Invision 14</td> <td>Your Description 14</td> </tr>
<tr> <td>Invision 15</td> <td>Your Description 15</td> </tr>
</tbody> </table>
Live Demo [wpsm_comparison_table id=”17″ class=””]
Nah itulah panduan Cara Membuat Tabel Responsive di Blog Keren, Jika kau ingin menciptakan tabel dengan tampilan yang lebih sederhana admin juga mempunyai artikelnya. silahkan kau simak pada artikel Cara Membuat Tabel di Dalam Artikel Blog Sederhana. Sekian isu kali ini. kalau kau ingin mendapat panduan blogging lainya dari lapaklama, silahkan lihat pada halaman Panduan Ngeblog.
Sumber aciknadzirah.blogspot.com