Cara Membuat Tabel Di Blog

Hai sobat Cr mungkin banyak di antara kita pengen banget membuat table di posting blog yang keren,,
dankali ini saya ingin berbagi tutorialnya. .
tenang aja jangan takut jelek soalnya tabel yang saya posting pertama kali ini sesuai dengan gambar dia atas,
yuk langsung Mangkat

Berikut ini ada beberapa langkah untuk membuat table Responsive di Posting blogger

Silahkan anda masukkan <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> setelah kode <head>

Selanjutnya taruh kode berikut 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;}
}

Cara penggunaannya tinggal tambah di posting anda

<div class="table-responsive">
<table class="table"> 
<thead>
 <tr>
 <th>Nama Pertama</th> 
 <th>Nama Terakhir</th> 
 </tr>
</thead> 
<tbody>
 <tr> 
 <td>CORETAN</td> 
 <td>RONI</td> 
 </tr>
 <tr> 
 <td>BARENG</td> 
 <td>KAMU</td> 
 </tr>
 <tr> 
 <td>DI</td> 
 <td>SINI</td> 
 </tr>
</tbody> 
</table>
</div>

Tips : untuk mengganti warna tablenya bbackground-color:#3498DB;
sudah selesai mudahkan