Cara Membuat Tabel Responsive Di Blog

Bagi anda yang ingin menampilkan data dalam bentuk tabel di dalam posting artikel pasti membutuhkan sebuah tabel yang responsive sehingga bisa menyesuaikan tampilan sesuai dengan perangkat yang di gunakan. contoh seperti blog yang sering membahas review produk beserta spesifikasinya.

Berikut cara menambahkan tabel responsive di blog.

Pertama

Bukalah blogger sampai anda masuk di bagian dashboard dan di bagian menu sebelah kiri pilih menu Theme dan di bagian kanan pilihlah menu Edit HTML.

Kedua

klik sembarang di bagian HTML setelah itu tekan CTRL+F  pada keyboard dan kontak pencarian akan muncul ketikkan </b:skin> enter

Ketiga 

Copy kode css post table dan paste di atas kode </b:skin> setelah itu jangan lupa klik tombol Save Theme untuk menyimpan perubahan yang telah di lakukan.

/* 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}

Tahap berikutnya tinggal memasukkan kode table ke halaman post melalui mode HTML pesisnya seperti gambar di bawah ini.

/* Copy Kode Table dan letakkan di halaman post melalui mode html */
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Nama Blog</th>   <th>URL Blog</th> </tr>
<tr> <td>Langsung Ke Blog</td>   <td>https://langsungkeblog.blogspot.com/</td> </tr>
</tbody> </table>

Catatan :

Jika ingin menambahkan kolom judul anda tanggal menambahkan <th>judul baru</th> begitu juga dengan baris tinggal add atau insert <tr> dan <td>. contoh kode tabel di atas hanya menggunakan satu bari jika saya ingin menambahkan baris baru cukup menambahkan <tr><td>blog mu</td> <td>alamat blog mu</td></tr>.

Berikut contoh hasil dari tabel di atas dan bisa juga anda lihat di artikel tentang Gili

Notebook

Mobile Responsive

Kode-kode di atas saya dapatkan dari blog BUNGFRANGKI sebagai rujukan dan refrensi karena kebutulan  saya sedang membutuhkan sebuah tabel responsive agar bisa mobile walaupun di bukan dari perangkat seperti handphone, smartphone dan gadget lainnya.

kotak subscribe

Subscribe to receive free email updates: