Cara membuat tabel responsive di dalam artikel – Sebuah data akan lebih baik enak di baca dan mudah di pahami apabila tersedia dalam bentuk tabel, terus jika kalian seorang blogger yang membahas tentang gadget seperti smartphone atau laptop pasti menampilkan data spesifikasi smartphone dan laptop dalam bentuk tabel.
Baca juga : Cara Membuat Daftar Isi di Dalam Artikel Blogger Yang SEO Friendly
Untuk itula agar pembaca tertarik dengan isi artikel kalian buatlah tabel yang keren dan responsive yang artinya tabel kalian harus lebih berwarna namun tidak berlebihan serta responsive yaitu tabel bisa tampil secara utuh di segala device yang di pakai pembaca kalian baik itu pc/laptop dan smartphone.
Membuat tabel responsive dan keren di bawah ini dapat di gunakan oleh segala jenis CMS baik itu wordpress maupun blogspot, Langsung saja mari kita buat tampilan tabel di artikel kita menjadi lebih keren dan responvie,
2 Cara Membuat Tabel Responsive di Artikel blog/web
#1. Membuat Tabel Responvie Online Tanpa Memakai CSS
✔ Buatlah telebih dahulu data tabel nya di ms.excel dan copy,
✔ Kunjungi http://www.tablesgenerator.com/html_tables, Lalu pilih File > Paste Tabel Data > Pastekan semua isi tabel yang di excel > lalu load.
✔ Sesuaikan warna tabel, kolom tabel, baris tabel, pengabungan kolom dll sama seperti kita menggunakan ms.excel pada umumnya.
✔ Jika telah sesuai dengan yang diinginkan, scroll kebawah klik generate lalu copy to clipboard.
Keterangan:
– pilih Do not generate CSS untuk menghilangkan kode css
– pilih Compact mode untuk memakai mode compact
✔ Pastekan hasil generate tadi ke dalam notepad lalu ganti kode html dibawah ini,
<table class=”tg”>
Dengan kode html ini,
<table class=”tg” style=”table-layout: fixed; width: 100%;”><tbody>
✔ Terakhi masuk ke menu editor artikel kalian pilih mode HTML lalu pastekan hasil generate yang telah kalian rubah kode html nya sesuai dengan langkah diatas dan save.
Silahkan publish artikel kalian dan buka melalui pc/laptop dan smartphone kalian maka tabel akan tampil secara utuh tanpa ada bagian yang terpotong. Cara ini cocok untuk kalian yang tidak mau ribet mengedit kembali template kalian dan memasangkan CSS kedalamnya.
#2. Membuat Tabel Responsive Dengan CSS
✔ Masuk ke blogspot.com lalu pilih tema > edit html.
✔ Pada menu editor tekan ctrl+f pada keyboard lalu cari kode ini </style> atau </b:skin> kemudian letakan kode dibawah ini tepat 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}
✔ Lalu Simpan tema,
✔ Masuk ke menu editor artikel kalian, lalu pilih mode HTML
✔ Pastekan contoh tabel dibawah ini,
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr>
<th>Specification :</th>
<th></th>
</tr>
<tr>
<td>Color</td>
<td>Black / Silver</td>
</tr>
<tr>
<td>Internal storage</td>
<td>eMCP 32GB / 64GB</td>
</tr>
<tr>
<td>MicroSD card</td>
<td>Supports up to 2TB</td>
</tr>
<tr>
<td>Google Drive</td>
<td>100GB free space (1 year)</td>
</tr>
<tr>
<td>Weight</td>
<td>180 grams</td>
</tr>
<tr>
<td>Dimension (W x D x H)</td>
<td>159mm x 8.45mm x 76mm</td>
</tr>
<tr>
<td>Display</td>
<td>6-inch Full HD<br/>
Front 2.5D curved<br/>
1500:1 contrast ratio</td>
</tr>
<tr>
<td>Processor</td>
<td><b>CPU:</b> Qualcomm® Snapdragon™ 636<br/>
<b>GPU:</b> Qualcomm® Adreno™ 509</td>
</tr>
<tr>
<td>Memory</td>
<td>LPDDR4X 3GB / 4GB / 6GB</td>
</tr>
<tr>
<td>Main Rear Camera</td>
<td>13MP / 16MP<br/>
Up to F2.0 aperture</td>
</tr>
<tr>
<td>Second Rear Camera</td>
<td>5MP<br/>
Portrait mode for depth sensing</td>
</tr>
<tr>
<td>Front Camera</td>
<td>8MP / 16MP</td>
</tr>
<tr>
<td>Video Recording</td>
<td>4K UHD (3840 by 2160 pixels)</td>
</tr>
</tbody>
</table>
✔ Jangan dulu di posting sesuaikan isi data tabel dengan yang akan kamu bagikan di artikelmu.
Keterangan:
– Menambah heading atau judul gunakan kode tag <th>….</th>
– Menambahkan jumlah kolom gunakan kode tag <td>….</td>
– Menambahkan jumlah baris gunakan kode tag <tr>….</tr>
Akhir Kata
Terima kasih telah berkunjung jangan lupa untuk share karna berbagi itu indah agar bisa saling membantu bagi teman yang membutuhkan artikel ini, follow juga blog melalui email untuk terus mendapatkan update terbaru dari laman saya.