Cara Membuat Tabel Responsive Dalam Postingan Blog

Cara Membuat Tabel Responsive Dalam Postingan Blog - Tabel dalam postingan kadang diperlukan untuk memuat artikel yang memiliki daftar, misalnya daftar harga, hasil pertandingan sepak bola, mapun yang lainnya. Pada kesempatan terdahulu saya pernah posting cara membuat tabel dalam postingan blog dengan memanfaatkan MS Word. Namun pada cara tersebut tabel tidak bisa responsive ketika dibuka dengan tampilan perangkat yang lebih kecil.

Tabel dalam postingan blog yang tidak responsive, tentu akan membuat tampilan menjadi berantakan dan tidak sedap dipandang. Pada kesempatan ini saya akan berbagi cara membuat tabel responsive dalam postingan blog dengan menggunakan kode CSS dan HTML. Dengan kode ini kita bisa membuat tampilan tabel jadi responsive.

Adapun penampakan tabel yang responsive bisa dilihat pada contoh tabel dibawah ini :
Tabel 1 Tabel 2
Isi Tabel Isi Tabel
Isi Tabel Isi Tabel
Isi Tabel Isi Tabel
Isi Tabel Isi Tabel
Isi Tabel Isi Tabel
Isi Tabel Isi Tabel
Isi Tabel Isi Tabel

Untuk membuat tabel seperti diatas caranya sebagai berikut :

1. Silahkan masuk ke edit template, lalu letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>. Untuk memudahkan pencarian silahkan tekan Ctrl+F kemudian masukkan kode ]]></b:skin> atau </style> lalu copy kode CSS dibawah ini tepat diatasnya kemudian save template.

/* 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 #cccccc;padding:10px;text-align:left;vertical-align:top;background:#339966 !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}

2. Copy paste kode dibawah ini kemudian simpan di notepad. Kode berikut ini adalah yang nantinya digunakan setiap kali akan membuat tabel responsive didalam postingan blog.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Tabel 1</th> <th>Tabel 2</th> </tr>
<tr> <td>Isi Tabel</td> <td>Isi Tabel</td> </tr>
<tr> <td>Isi Tabel</td> <td>Isi Tabel</td> </tr>
<tr> <td>Isi Tabel</td> <td>Isi Tabel</td> </tr>
<tr> <td>Isi Tabel</td> <td>Isi Tabel</td> </tr>
<tr> <td>Isi Tabel</td> <td>Isi Tabel</td> </tr>
<tr> <td>Isi Tabel</td> <td>Isi Tabel</td> </tr>
<tr> <td>Isi Tabel</td> <td>Isi Tabel</td> </tr>
</tbody> </table>

3. Adapun cara memasang di dalam postingan adalah buat entri baru kemudian pilih mode HTML bukan Compose, lalu copy kode diatas yang telah Anda simpan di notepad kemudian paste kan pada mode HTML.

4. Cara costumisasi kode tabel responsive.
  • Silahkan ganti kode warna merah, untuk mengecilkan tinggi rendahnya kolom, Ganti angka 10px dengan ukuran yang Anda inginkan.
  • Silahkan ganti kode warna berikut ini #339966  dengan kode warna background pilihan Anda yang bisa menyesuaikan dengan warna template Anda.
  • Kode table diatas hanya untuk 2 kolom dan 7 row saja. 
  • Untuk menambahkan kolom silahkan copy kode <th>Tabel 2</th> dan pastekan sebelum kode penutup </tr>
  • Untuk menambahkan row silahkan copy kode <tr> <td>Isi Tabel</td> <td>Isi Tabel</td> </tr> dan pastekan sebelum kode </tbody> </table>.
  • Ulangi 2 langkah terakhir menurut kebutuhan tabel Anda.
  • Adapun cara mengisi datanya, Anda cukum mengganti tulisan Tabel 1, Tabel 2, dan Isi Tabel.
Demikian cara membuat tabel responsive dalam postingan blog. Tabel ini akan menyesuaikan jika halaman dibuka dengan perangkat apapun. Semoga bermanfaat.
Ada pertanyaan? Diskusikan dengan penulis atau pengguna lain
Tautan disalin ke papan klip!