Cara Membuat Tabel Responsive di Blog
Untuk menampilkan beberapa spesifikasi notebook tersebut tentu kita akan meggunakan tabel. Tujuan penggunaan tabel ini adalah untuk memisahkan antara speksifikasinya, kemudian juga untuk lebih memperjelas spesifikasi notebook tersebut. Karena biasanya teknologi yang digunakan oleh sebuah notebook terkadang mengandung bahasa teknologi yang baru sehingga bagi orang yang membacanya akan tauh kekurangan dan kelebihan dari notebook tersebut.
Penggunaan tabel ini juga dapat memberitauh pembaca bahwa ada bagian - bagian tertentu yang dianggap penting yang memang harus pembaca mengetahui itu. Kemudian juga dapat membuat pembaca mengerti apa isi dari tabel tersebut karena poin - poin penting sudah dijelaskan ditabel tersebut.
Nah, untuk membuat tabel kalian tinggal simak langkah - langkah berikut ini yah.
1. Login Ke Blogger >> Tema >> Edit Html >> Cari Kode </style> atau </b:skin>, Tempelkan kode berikut diatasnya
/* CSS Post Table */
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}Jangan lupa simpan template
2. Jika kalian akan membuat tabel maka kalian edit kode berikut ini di notepad terlebih dahulu, baru kemudian kalian tempelkan di Html postingan (Jangan di Compose)
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>FEATURES</th> <th>AVAILABILITY</th> </tr>
<tr> <td>Responsive</td> <td>Oke</td> </tr>
<tr> <td>Multi Author Template</td> <td>Good</td> </tr>
<tr> <td>Free Blogger Templates</td> <td>Oke</td> </tr>
<tr> <td>Featured Slider</td> <td>True</td> </tr>
<tr> <td>Recent Posts Widget</td> <td>Yes</td> </tr>
<tr> <td>Unlimited Sidebar widgets</td> <td>True</td> </tr>
<tr> <td>Ads Ready</td> <td>True</td> </tr>
<tr> <td>Customizable Color and Fonts Options </td> <td>True</td> </tr>
<tr> <td>Social Icons Widget</td> <td>True</td> </tr>
<tr> <td>Author Widget</td> <td>True</td> </tr>
<tr> <td>Featured Post Style</td> <td>True</td> </tr>
<tr> <td>Clean Elegant Design</td> <td>True</td> </tr>
<tr> <td>SEO Optimized</td> <td>True</td> </tr>
<tr> <td>Fully responsive</td> <td>True</td> </tr>
<tr> <td>404 custom page</td> <td>True</td> </tr>
<tr> <td>Social Media Icons in Footer</td> <td>True</td> </tr>
<tr> <td>Responsive Navigation</td> <td>True</td> </tr>
<tr> <td>Responsive Sidebar</td> <td>True</td> </tr>
<tr> <td>Social Share functionality</td> <td>True</td> </tr>
<tr> <td>Smooth Scroll</td> <td>True</td> </tr>
</tbody> </table>Sehingga hasilnya seperti ini
| FEATURES | AVAILABILITY |
|---|---|
| Responsive | Oke |
| Multi Author Template | Good |
| Free Blogger Templates | Oke |
| Featured Slider | True |
| Recent Posts Widget | Yes |
| Unlimited Sidebar widgets | True |
| Ads Ready | True |
| Customizable Color and Fonts Options | True |
3. Kalian bisa juga membuat tabel yang terdiri dari beberapa kolom
<table border="5" cellpadding="20" cellspacing="5" style="text-align: center;"><tbody>
<tr align="center"> <th style="text-align: center;">No.</th> <th style="text-align: center;">A</th> <th style="text-align: center;">B</th> <th style="text-align: center;">C</th> <th style="text-align: center;">D</th> <th style="text-align: center;">E</th> </tr>
<tr align="center"><td style="text-align: center;"><b>1</b></td> <th style="text-align: center;">A</th><th style="text-align: center;">B</th><th style="text-align: center;">C</th><th style="text-align: center;">D</th><th style="text-align: center;">E</th></tr>
<tr align="center"><td style="text-align: center;"><b>2</b></td> <th style="text-align: center;">A</th><th style="text-align: center;">B</th><th style="text-align: center;">C</th><th style="text-align: center;">D</th><th style="text-align: center;">E</th></tr>
<tr align="center"><td style="text-align: center;"><b>3</b></td> <th style="text-align: center;">A</th><th style="text-align: center;">B</th><th style="text-align: center;">C</th><th style="text-align: center;">D</th><th style="text-align: center;">E</th></tr>
<tr align="center"><td style="text-align: center;"><b>4</b></td> <th style="text-align: center;">A</th><th style="text-align: center;">B</th><th style="text-align: center;">C</th><th style="text-align: center;">D</th><th style="text-align: center;">E</th></tr>
</tbody></table>Sehingga hasilnya seperti dibawah :
| NOMOR | 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|---|
| 1 | A | B | C | D | E |
| 2 | A | B | C | D | E |
| 3 | A | B | C | D | E |
| 4 | A | B | C | D | E |
| 5 | A | B | C | D | E |
Penutup
Demikian sedikit postingan tentang "Cara Membuat Tabel Responsive di Blog" Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Semoga postingan ini dapat bermanfaat.