Membuat Tabel Responsive Di Blog – Mungkin kalian pernah menggunakan tabel untuk blog kalian terutama jika kalian mempunyai blog review, biasanya banyak yang menggunakan tabel di blog nya. Tapi saat di buka melalui mobile / desktop tampilannya berubah menjadi acak acakan.
Nah lalu gimana agar tidak acak”an atau responsive? Buat kamu yang ingin membuat tabel responsive di blog kamu bisa menggunakan tutorial di bawah ini. Tutorial nya sangat mudah di pahami dan tidak susah kok.
Buat kamu yang penasaran cara membuat tabel responsive di blog kamu bisa ikuti langkah langkah di bawah ini ;
Membuat Tabel Responsive Di Blog
Untuk membuat tabel responsive ini kalian harus memasang kode CSS terlebih dahulu di blog agar tampilan tabel ini bisa lebih keren lagi.
Memasang Kode CSS
Untuk memasang kode CSS kalian bisa masuk ke Blogger, lalu kalian masuk ke template lalu kalian klik Edit HTML. Jika sudah kamu bisa car kode </style> atau ]]></b:skin> untuk memudahkan pencarian dalam template kamu bisa tekan CTRL + F lalu cari kode tersebut.
Jika sudah ada kalian bisa salin kode CSS di bawah ini dan kalian paste kan di atas kode </style> atau ]]></b:skin>
1 | .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;} |
Jika sudah kalian Save Template. Nah langkah selanjutnya adalah memasang tabel di blog nya.
Memasang Tabel Di Blog
Untuk memasang tabel ini sangat mudah, kalian buka postingan kalian yang ingin di pasang tabel lalu kalian pastekan kode di bawah ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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> |
Kalian gunakan menu HTML jangan gunakan menu Compose, lalu kalian edit sesuai keinginan kalian masing”. Dan jika sudah maka kalian bisa lihat hasilnya sendiri.
Nah demikianlah artikel yang dapat saya berikan kepada kamu tentang cara membuat tabel responsive di blog semoga artikel ini bermanfaat buat kita semua.
