Cara Membuat Tabel Keterangan Responsive di Blog

Tabel keterangan responsive - untuk apa itu? Nah sahabat pembaca sekalian pasti sudah terbiasa dengan Microsoft Office kan. Aplikasi satu ini sangat banyak manfaatnya dalam dunia kerja, terlebih office word, excel dan powerpoint. Ketiganya sangat dibutuhkan oleh setiap orang yang bekerja dengan komputer.

Di dalam ketiga aplikasi ini, sahabat pembaca pasti sudah tau bahwa bisa juga untuk membuat tabel untuk keperluan tertentu. Sahabat pembaca semua sudah pasti menggunakan ketiga aplikasi tersebut dan sudah membuat tabel di dalamnya. Hal ini juga bisa diaplikasikan di artikel blog.

Bagi anda pengguna template hasil desain Arlina Fitriani tabel seperti ini tidak perlu lagi dibuat, karena rata-rata semua templatenya sudah memiliki tabel seperti ini. Nah kali ini saya akan membagikan tutorial cara membuat tabel seperti yang ada di blog Arlina Design.

Membuat tabel di blog mempunyai beragam fungsi, bagi anda yang mempunyai blog khusus untuk membuat keterangan tentang suatu produk bisa memanfaatkan tabel ini untuk keperluan bisnis online, atau bisa juga buat yang mempunyai blog tempelate bisa memanfaatkan tabel ini untuk membuat features blog. Banyak deh kegunaannya tergantung kebutuhan anda saja.

Langkah-langkah Membuat Tabel Keterangan

Berikut ini langkah-langkah membuat tabel keterangan di dalam postingan blog.

# Langkah pertama adalah masuk di dasbord blogger kemudian pilih Tab Template lalu klik Edit HTML.

# Cari kode </style> atau </b:skin> lalu copy dan pastekan kode di bawah ini tepat di atas salah satu kode tersebut, kemudian simpan template.

/* Table Post */
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 #457fdf;font-weight:bold;color:#fff;padding:15px 10px;text-align:left;vertical-align:top;font-size:14px}
.post-body table th {background:#4285f4;}
.post-body table.tr-caption-container {border:1px solid #f1f1f1;}
.post-body table caption{border:none;font-style:italic;}
.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 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%}

Setelah anda menyimppan template maka, tahap pertama sudah selesai. Tahap selanjutnya adalah jika anda membutuhkan tabel dalam postingan maka, copy dan paste-kan kode di bawah ini di dalam postingan (perhatikan pada bagian atas postingan klik HTML lalu masukkan kode tersebut). Anda juga bisa mengeditnya terlebih dahulu di notepade sesuai dengan keterangan apa yang anda inginkan.

<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>

Dalam blog ini saya juga menerapkan tabel semacam ini, agar mempermudah dalam menulis artikel yang membutuhkan tabel.

Demo

FEATURES	AVAILABILITY
Responsive	Oke
Multi-Author Template	Good
Free Blogger Templates	Oke
Featured Slider	True

Sesuaikan keterangan dengan kebutuhan postingan anda, hapus yang tidak perlu pada kode di atas dan semoga bermanfaat postingan tentang cara membuat tabel keterangan responsive di blog ini bermanfaat.