Fungsi Tabel keterangan ini biasanya memudahkan pengunjung blog anda agar bisa melihat fitur-fitur apa saja yang terdapat pada postingan kita, ada beberapa contoh yang digunakan orang dalam membuat sebuat tabel keterangan ini : Cara Membuat Responsive Table di Blogger dan keterangannya dan banyak lagi lainnya.

Cara Membuat Responsive Table di Blogger

Oke Langsung Saja Ke Cara Pemasangannya Di Blogger Atau Blogspot Anda, Berikut Caranya Untuk Pemasangnya.

Jika di blog Anda sudah memiliki CSS table di templatenya, disarankan untuk menghapus semua CSS table agar tampilan table sesuai dengan yang saya bagikan

Pertama buka Blogger > Tema > Edit HTML
Kemudian Anda Cari Kode CSS Yaitu : ]]></b:skin> Atau </style>, kemudian Kamu Copy Kode Yang Di Bawah Ini dan Pastekan sebelum ]]></b:skin> Atau </style>

table{background-color:transparent;width:100%;max-width:100%;margin-bottom:20px}
table img{width:100%;height:auto}
table.tr-caption-container{padding:0;border:none}
table td.tr-caption{font-size:12px;font-style:italic}
table{border-spacing:0;border-collapse:collapse}
td,th{padding:0}
th{text-align:left}
.table{width:100%;max-width:100%;margin-bottom:20px}
.table a{text-decoration:none!important}
.table > thead > tr > th,.table > tbody > tr > th,.table > tfoot > tr > th,.table > thead > tr > td,.table > tbody > tr > td,.table > tfoot > tr > td{padding:8px;line-height:1.42857143;vertical-align:top}
.table > thead > tr > th{background-color:#3498DB;color:#fff;vertical-align:bottom}
.table > thead > tr > th a{color:#fff!important}
.table > caption + thead > tr:first-child > th,.table > colgroup + thead > tr:first-child > th,.table > thead:first-child > tr:first-child > th,.table > caption + thead > tr:first-child > td,.table > colgroup + thead > tr:first-child > td,.table > thead:first-child > tr:first-child > td{border-top:0}
.table > tbody > tr:nth-of-type(odd){background-color:#f9f9f9}
table col[class*="col-"]{position:static;display:table-column;float:none}
table td[class*="col-"],table th[class*="col-"]{position:static;display:table-cell;float:none}
.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}.table-responsive > .table{margin-bottom:0}.table-responsive > .table > thead > tr > th,.table-responsive > .table > tbody > tr > th,.table-responsive > .table > tfoot > tr > th,.table-responsive > .table > thead > tr > td,.table-responsive > .table > tbody > tr > td,.table-responsive > .table > tfoot > tr > td{white-space:nowrap}.table-responsive > .table-bordered{border:0}}

Berikut ini contoh penulisan HTML table di postingan

<div class="table-responsive">
<table class="table">
<thead>
  <tr>
    <th>Nama</th>
    <th>Keterangan</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Namina</td>
    <td>Namina</td>
  </tr>
  <tr>
    <td>Namina</td>
    <td>Namina</td>
  </tr>
  <tr>
    <td>Namina</td>
    <td>Namina</td>
  </tr>
</tbody>
</table>
</div>