Cara Membuat Tabel Responsive Menggunakan CSS di Blogger

RudiEtnovian.Com - Sebenarnya untuk membuat atau menambahkan fungsi tabel pada sebuah blog tidak harus dengan menggunakan css, bisa saja dengan langsung copy dan paste menggunakan Microsoft Word, Excel atau website Table Generator.

Hanya saja jika menggunakan cara copy paste tadi, tampilan tabelnya tidak responsive seperti membuat tabel menggunakan css.

Dengan adanya fitur tabel pada sebuah blog, kita bisa memberikan informasi kepada para pengunjung dengan tampilan yang lebih menarik dan terperinci.

Hal seperti ini biasa digunakan pada blog yang mereview spesifikasi Handphone, Komputer dan sebagainya.

Berikut cara menambahkan fitur tabel menggunakan css tersebut.

1. Login ke akun blogger.
2. Buka menu "Tema"
3. Pilih "Edit HTML"
4. Tambahkan kode css di bawah ini tepat sebelum kode "]]></b:skin>"
5. Klik "Simpan Tema"

Ini kode CSS yang di tambahkan sebelum kode ]]></b:skin> tersebut.

/* Tabel Blogger Responsive */
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:7px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #6f7785;color:#fff;padding:8px 10px;text-align:left;vertical-align:top;font-size:16px}
.post-body table th {background:#747d8c;}
.post-body table tr th:hover{background:#57606f}
.post-body table.tr-caption-container {border:1px solid #f6f8f9;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{color:#57606f;vertical-align:top;text-align:left;font-size:15px;padding:3px 5px;}
.post-body table tr:nth-child(even) > td {background-color:#ecf0f1;}
.post-body table tr:nth-child(odd) > td {background-color:#f6f8f9;}
.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%}
.post-body table tr:hover td {background:#b0b1b4;color:#FFFFFF;border-top: 1px solid #22262e;}
table tr:nth-child(odd):hover td {background:#b0b1b4;}

Sampai pada tahap ini, penambahan fitur tabel responsive menggunakan css sudah selesai.

Langkah selanjutnya anda tinggal menambahkan kode css "pemanggil" setiap kali membuat postingan yang ingin menampilkan fitur tabel tersebut.

Ini kode css "pemanggil" yang harus ditambahkan pada setiap kali membuat postingan.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>Nama</th><th>Keterangan</th> </tr>
<tr><td>Nama1</td><td>Nilai1</td> </tr>
<tr><td>Nama2</td><td>Nilai2</td> </tr>
<tr><td>Nama3</td><td>Nilai3</td> </tr>
<tr><td>Nama4</td><td>Nilai4</td> </tr>
</tbody> </table>

Cara menambahkan kode css "pemanggil" tersebut yaitu buat postingan baru lalu masuk ke mode "HTML" jangan mode "Compose".

Untuk penyesuaian silahkan ganti tulisan yang berwarna merah di atas.

Demikianlah Cara Membuat Tabel Responsive Menggunakan CSS di Blogger tersebut. Semoga bisa bermanfaat.