Cara Mudah Membuat Tabel Full Responsive di Blogspot

Cara membuat tabel responsive di postingan blogspot sangat mudah sekali. Bagi Anda yang belum mengetahui bagaimana cara membuat tabel tersebut, silahkan Anda simak tutorial cara membuat tabel yang full responsive di postingan blogspot berikut ini.

Pada umumnya, kotak tabel di dalam postingan blog digunakan oleh Blogger untuk memperjelas atau merangkum sebuah artikel yang dibuat. Tujuannya satu, yaitu untuk mempermudah pengunjung dalam memahami artikel yang ditulisnya. Contohnya seperti artikel saya mengenai Daftar Kode Bank Seluruh Indonesia yang saya posting sebelumnya.

Membuat tabel di blog tentunya juga harus responsive. Artinya, tabel yang kita buat di postingan blog tersebut tampilannya dapat menyesuaikan ukuran layar di berbagai device pengunjung, terutama melalui Smartphone atau Tablet.

Cara Mudah Membuat Tabel Responsive di Postingan Blogspot

Oleh karena itu agar tabel yang kita buat di blog menjadi full responsive, kita harus menambahkan beberapa kode. Seperti kode CSS responsive yang berfungsi agar tabel dalam postingan blog dapat digeser baik itu ke kanan dan ke kiri, sehingga tampilan tabel pun tidak akan terpotong dan dapat terbaca meskipun dilihat di layar yang kecil.

Cara Membuat Kotak Tabel Responsive di Postingan Blog

Baiklah, tanpa banyak basa-basi lagi, silahkan Anda ikuti langkah-langkah cara mudah membuat tabel yang full responsive di postingan blogspot di bawah ini.

1. Login ke Dashboard Blogspot Anda.
2. Pilih Tema lalu klik Edit HTML.
3. Cari kode ]]></b:skin> atau </style> lalu copy paste kode CSS di bawah ini tepat di atas kode tersebut.

/* Post Table */
table{border-collapse:collapse;border-spacing:0;}
.post-body table td, .post-body table caption{border:1px solid #e6e6e6;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #009abf;padding:10px;text-align:left;vertical-align:top;}
.post-body table.tr-caption-container {border:1px solid #eee;}
.post-body th{font-weight:700;}
.post-body table caption{border:none;font-style:italic;}
.post-body table{}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #eee;}
.post-body td:hover{background:#fefefe;}
.post-body th{background:#00acd6;color:#fff;}
.post-body th:hover{background:#009fc6;}
.post-body td a{color:#444;}
.post-body td a:hover{color:#4db2ec;}
.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 li {list-style-type:square;}
.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%}
.widget ul {padding:0;}

4. Kemudian silahkan tambahkan kode Jquery di bawah ini di atas kode </body>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
$(document).ready(function() {
  $("table").wrap("<div class='table-responsive'></div>");
  $("table").addClass("table");
});
//]]>
</script>
</b:if>

5. Selanjutnya agar tabel yang dibuat responsive, Anda harus menambahkan kode CSS tabel responsive Bootstrap di bawah ini di atas kode </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.table-responsive {
  min-height: .01%;
  overflow-x: auto
}

@media screen and (max-width:767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd
  }
  .table-responsive>.table {
    margin-bottom: 0
  }
  .table-responsive>.table>tbody>tr>td,
  .table-responsive>.table>tbody>tr>th,
  .table-responsive>.table>tfoot>tr>td,
  .table-responsive>.table>tfoot>tr>th,
  .table-responsive>.table>thead>tr>td,
  .table-responsive>.table>thead>tr>th {
    white-space: nowrap
  }
  .table-responsive>.table-bordered {
    border: 0
  }
  .table-responsive>.table-bordered>tbody>tr>td:first-child,
  .table-responsive>.table-bordered>tbody>tr>th:first-child,
  .table-responsive>.table-bordered>tfoot>tr>td:first-child,
  .table-responsive>.table-bordered>tfoot>tr>th:first-child,
  .table-responsive>.table-bordered>thead>tr>td:first-child,
  .table-responsive>.table-bordered>thead>tr>th:first-child {
    border-left: 0
  }
  .table-responsive>.table-bordered>tbody>tr>td:last-child,
  .table-responsive>.table-bordered>tbody>tr>th:last-child,
  .table-responsive>.table-bordered>tfoot>tr>td:last-child,
  .table-responsive>.table-bordered>tfoot>tr>th:last-child,
  .table-responsive>.table-bordered>thead>tr>td:last-child,
  .table-responsive>.table-bordered>thead>tr>th:last-child {
    border-right: 0
  }
  .table-responsive>.table-bordered>tbody>tr:last-child>td,
  .table-responsive>.table-bordered>tbody>tr:last-child>th,
  .table-responsive>.table-bordered>tfoot>tr:last-child>td,
  .table-responsive>.table-bordered>tfoot>tr:last-child>th {
    border-bottom: 0
  }
}
</style>
</b:if>

6. Save Template.

Membuat Tabel di Postingan Blog

7. Langkah berikutnya, Anda hanya tinggal membuat tabel di postingan blog. Caranya yaitu cukup tempel kode di bawah ini di area postingan yang ingin Anda beri tabel pada mode HTML. Kode HTML di bawah ini telah disesuaikan dengan kode CSS di atas yang tadi telah Anda copy pastekan di edit HTML. Jadi setiap Anda mau membuat tabel maka kerangka di bawah inilah yang digunakan.

<table cellpadding="0" cellspacing="0" style="text-align: left;">
    <tbody>
        <tr>
            <th>Judul 1</th>
            <th>Judul 2</th>
            <th>Judul 3</th>
        </tr>
        <tr>
            <td>Isi 1a</td>
            <td>Isi 2a</td>
            <td>Isi 3a</td>
        </tr>
        <tr>
            <td>Isi 1b</td>
            <td>Isi 2b</td>
            <td>Isi 3b</td>
        </tr>
        <tr>
            <td>Isi 1c</td>
            <td>Isi 2c</td>
            <td>Isi 3c</td>
        </tr>
    </tbody>
</table>

8. Selesai. Contoh kerangka tabel HTML di atas hanya terdiri dari tiga kolom dan tiga baris saja. Jika Anda ingin membuat lebih, misalnya menjadi empat kolom dan empat baris, Anda cukup menambahkan kode <th>Judul 4</th>, <td>Isi 4a</td>, dan seterusnya.

Itulah tutorial mengenai cara mudah membuat tabel responsive di postingan blogspot. Sangat mudah sekali, bukan? Berminat mencobanya? Jika ada yang kurang mengerti dari tutorial di atas, silahkan Anda sampaikan di kotak komentar di bawah ini ya.
Buka Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel