Cara Membuat Tabel Responsive di Postingan Blog dengan HTML

Cara Membuat Tabel Responsive di Postingan Blogspot – Sebagai seorang blogger, kenyamanan pengunjung merupakan hal yang harus diperhatikan. Terutama dibagian postingan. Seringkali dipostingan blog terdapat data-data atau keterangan yang harus disediakan dalam bentuk tabel. Akan tetapi pihak blogger sendiri tidak menyediakan fasilitas untuk membuat tabel berikut. Sehingga membuat beberapa blogger tidak menyajikan data tersebut dalam bentuk tabel. Sehigga data tersebut menjadi sulit untuk dipahami oleh pengunjung.

Sebenanya kita bisa saja me-copy paste tabel dari ms. Word atau ms. Excell. Akan tetapi tabel tersebut tentunya tidaklah bagus dan tidak responsive. Artinya lebar kolomnya tidak bisa menyesuaikan ukuran layar. Sehingga membuat blog kurang dari segi SEO. Pada artikel saya kali ini saya akan membahas bagaimana cara membuat tabel yang responsive di postingan blogger.

Cara membuat tabel resposive di postingan blogger

Cara untuk membuat tabel responsive di postingan blogger adalah dengan menggunakan html dan css, cara ini memang agak sulit dan memakan banyak waktu, akan tetapi hasilnya akan sangat memuaskan. Oke langsung saja ke langkah-langkahnya :

1. Pertama, masuk terlebih dahulu ke dashboard blog anda
2. Selanjutnya masuk ke Tema, Kemudian klik Edit HTML
3. Kemudian cari kode ]]></b:skin> dengan cara menekan Ctrl + F, Jika kode ]]></b:skin> tidak ada, maka cari kode </style>, Setelah itu pastekan kode ini tepat diatas kode ]]></b:skin> atau </style>

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

4. Setelah itu klik simpan tema.

5. Sekarang kita coba dengan membuat postingan, Silahkan masuk ke Entri baru, lalu klik HTML, Pastekan kode ini di sana.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>Nama</th><th>Alamat</th></tr>
<tr><td>Aji</td><td>Jogja</td></tr>
<tr><td>Budi</td><td>Semarang</td></tr>
<tr><td>Cahya</td><td>Jakarta</td></tr>
<tr><td>Dimas</td><td>Bandung</td></tr>
<tr><td>Edwin</td><td>Bali</td></tr>
<tr><td>Fahry</td><td>Kalimantan Utara</td></tr>
<tr><td>Ganang</td><td>Sumatra Utara</td></tr>
<tr><td>Haris</td><td>Cilacap</td></tr>
<tr><td>Ika</td><td>Kebumen</td></tr>
</tbody></table>

6. Setelah itu klik publikasikan. Dan lihat hasilnya di blog anda.

Tampilan dekstop

 

Tampilan mobile

Bagaimana cara memodifikasi tabel diatas?

1. Untuk menambahkan heading atau judul pada tabel gunakan kode tag <th>…..</th>
2. Untuk menambahkan baris baru pada tabel gunakan kode tag <tr>…..</tr>
3. Untuk menambahkan kolom baru pada tabel gunakan kode tag <td>…..</td>
4. Untuk mengubah warna header tabel silahkan ganti kode #00CC00 (warna border) dan #009933 (warna header)

Untuk memudahkan dalam memahami bagaimana cara memodifikasi, silahkan buat postingan dengan menggunakan kode ini, kemudian bandingkan dengan kode diatas tadi.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Nama</th> <th>Alamat</th> <th>No. Handphone</th></tr>
<tr><td>Aji</td><td>Jogja</td><td>087485363274</td></tr>
<tr><td>Budi</td><td>Semarang</td><td>087485363475</td></tr>
<tr><td>Cahya</td><td>Jakarta</td><td>087485362097</td></tr>
<tr><td>Dimas</td><td>Bandung</td><td>087485364677</td></tr>
<tr><td>Edwin</td><td>Bali</td><td>087485361231</td></tr>
<tr><td>Fahry</td><td>Kalimantan Utara</td><td>087485368909</td></tr>
<tr><td>Ganang</td><td>Sumatra Utara</td><td>087485365598</td></tr>
<tr><td>Haris</td><td>Cilacap</td><td>087485363701</td></tr>
<tr><td>Ika</td><td>Kebumen</td><td>087485363910</td></tr>
</tbody></table>

Yak, kira-kira seperti itulah cara untuk membuat tabel responsive menggunakan HTML di Blogger. Dengan membuat sebuah tabel, data yang ada didalam blog anda akan lebih rapi dan mudah untuk dibaca. Hal tersebut akan memudahkan pengunjung blog anda dalam memahami data yang anda berikan.

Jika anda tertarik dengan artikel mengenai blogger lainnya, jangan lupa untuk membaca artikel saya yang berjudul cara memasang SEOquake untuk mengetahui kekuatan blog orang lain di hasil pencarian Google. Semoga artikel saya kali ini bermanfaat bagi anda. Terimakasih telah berkunjung di www.bloggerkoplo.com. Salam koplo.