Cara Membuat Tabel Responsive di Dalam Artikel Blog - dalam kesempatan kali ini admin akan memberikan sebuah Tutorial Blogging untuk mempercantik hasil postingan kalian dengan cara menambahkan Tabel didalam artikel yang kalian buat.
 |
| Membuat Tabel Responsive Didalam Artikel |
Trik yang satu ini bisa kalian terapkan diblog kalian agar artikel yang kalian buat lebih terlihat professional dan pengunjung blog kalian akan mudah memahami artikel yang telah kalian buat.
Tabel yang akan saya berikan ini Responsive sob, meskipun kalian lihat dalam tampilan ponsel, tidak akan tabel melebihi batas dari halaman post. Jadi sangat disarankan untuk menggunakannya, meskipun mungkin di blog lain sudah banyak yang membagikannya dengan berbagai tampilan.
Tampilan tabel yang saya berikan ini default sob, jadi masih prawan belum ada redesign dari saya. Jika kalian ingin redesign silahkan atur sesuai keinginan kalian, ok langsung saja menuju ke tutorial cara pemasangannya ...
Cara Pemasangan
- Silahkan login terlebih dahulu ke akun Blogger kalian > Dasboard > Tema > Edit HTML (Intinya Mengedit Template Kalian).
- Tambahkan CSS dibawah ini, dan letakkan diatas ]]></b:skin> atau </style>
- Save Template
/* CSS Post Table Shared By BlogDroid9*/
table{border-collapse:collapse;border-spacing:0;}
.post-body table td {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body
table th {border:1px solid
#5a97ff;padding:10px;text-align:left;vertical-align:top;background:#4588f3
!important;color:#fff}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px}
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:50%}
table.columns-4 td.columns-cell{width:30%}
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 td img, .post-body th img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body
table.tr-caption-container img, .post-body table.tr-caption-container
img, .post-body img
{list-style:none;max-width:100%;height:auto;padding:0
!important;margin:0 !important}
.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}
.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}
.post-body img.video-thumbnail,.youtube-thumb{visibility:hidden !mportant;display:none !important;height:0}Cara Pemasangan ke Dalam Artikel
- Buatlah artikel kalian terlebih dahulu, jika kalian hanya ingin melihat hasilnya silahkan langsung saja ke tahap nomor 2
- Sisipkan kode HTML dibawah ini, pada artikel kalian (Tab HTML bukan Compose).
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Daftar</th> <th>Spesifikasi</th> </tr>
<tr> <td>Harga</td> <td>2.000.000</td> </tr>
<tr> <td><span style="background-color: white; color: #444444; font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; font-weight: bold;">Tahun</span></td> <td>2016</td> </tr>
<tr> <td><span style="background-color: white; color: #444444; font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; font-weight: bold;">Network</span></td> <td>Banner, Rich media, pop up/under, text</td> </tr>
<tr> <td><span style="background-color: white; color: #444444; font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; font-weight: bold;">Tipe</span></td> <td>Paypal, Wire Transfer, Payoneer</td> </tr>
<tr> <td><span style="background-color: white; color: #444444; font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; font-weight: bold;">Ukuran</span></td> <td>Paypal $20, Wire transfer $500, Payoneer $20</td> </tr>
<tr> <td><span style="background-color: white; color: #444444; font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; font-weight: bold;">Ukuran/Berat</span></td> <td>100%</td> </tr>
<tr> <td><span style="background-color: white; color: #444444; font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; font-weight: bold;">Fitur</span></td> <td>NET 30</td> </tr>
<tr> <td>Kamera</td> <td>US, Europe traffic</td> </tr>
<tr> <td>Batre</td> <td>Seluruh negara</td> </tr>
<tr> <td><span style="background-color: white; color: #444444; font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; font-weight: bold;">OS</span></td> <td>Yes</td> </tr>
<tr> <td><span style="background-color: white; color: #444444; font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; font-weight: bold;">CPU</span></td> <td>Yes</td> </tr>
<tr> <td>Affiliasi</td> <td>Yes</td> </tr>
<tr> <td><span style="background-color: white; color: #444444; font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; font-weight: bold;">GPS</span></td> <td>Yes</td> </tr>
<tr> <td>Bluethoot </td> <td>Yes</td> </tr>
<tr> <td>Fitur Tambahan</td> <td>Hight risk</td> </tr>
</tbody> </table>Mungkin sekian dulu artikel dari Cara Membuat Tabel Responsive di Dalam Artikel Blog, jika ada salah-salah penulisan yang membuat kalian sulit memahami artikel ini, silahkan tanyakan dikolom komentar dibawah artikel ini.
Terima Kasih