Cara Membuat Tabel Responsive di Postingan blog

Cara Membuat Tabel Responsive di Postingan blog | Table responsive di blog berguna untuk memberikan keterangan di suatu artikel, baik keterangan harga, dan keterangan pada umumnya yang menggunakan tabel.

Dengan Menggunakan tabel responsive, ukuran tabel pun akan mengikuti ukuran layar monitor sehingga mudah dibaca dan mudah dipahami. ketika dibuka melalui smartphone, maka keterangan tabel akan mengikuti ukuran layar smartphone.

Berikut ini adalah contoh Tabel Responsive

MENU 1	MENU 2
Invision 1	Your Description 1
Invision 2	Your Description 2
Invision 3	Your Description 3
Invision 4	Your Description 4
Invision 5	Your Description 5
Invision 6	Your Description 6
Invision 7	Your Description 7
Invision 8	Your Description 8
Invision 9	Your Description 9
Invision 10	Your Description 10
Invision 11	Your Description 11
Invision 12	Your Description 12
Invision 13	Your Description 13
Invision 14	Your Description 14
Invision 15	Your Description 15

Penasaran Cara membuatnya ??
Yukk mari lihat berikut ini :

Cara Membuat Tabel Responsive di Blog

1. Silahkan login ke Blogger

2. Lihat tab Tema > Edit HTML

3. Masukkan CSS dibawah ini, Tepat diatas kode ]]></b:skin> atau </style>

 /* CSS Post Table by Enterblogger.com*/
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:5px 10px;text-align:left;vertical-align:top;} .post-body table th {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;} .post-body table.tr-caption-container {border:1px solid #e9e9e9;} .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;} .post-body table tr:nth-child(even) > td {background-color:#f9f9f9;} .post-body table tr:nth-child(even) > td:hover {background-color:#fbfbfb;} .post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px} .post-body th:hover{background:#fdfdfd;} .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 {font-size:80%;padding:0px 8px 8px !important;} .post-body li {list-style-type:square;} img {max-width:100%;height:auto;border:none;} 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;} 

Setelah itu, ketika sobat ingin Meletakkan tabel di postingan blog, masukkan kode HTML dibawah ini pada tiap postingan yang ingin dipasangi Tabel :

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>MENU 1</th> <th>MENU 2</th> </tr>
<tr> <td>Invision 1</td> <td>Your Description 1</td> </tr>
<tr> <td>Invision 2</td> <td>Your Description 2</td> </tr>
<tr> <td>Invision 3</td> <td>Your Description 3</td> </tr>
<tr> <td>Invision 4</td> <td>Your Description 4</td> </tr>
<tr> <td>Invision 5</td> <td>Your Description 5</td> </tr>
<tr> <td>Invision 6</td> <td>Your Description 6</td> </tr>
<tr> <td>Invision 7</td> <td>Your Description 7</td> </tr>
<tr> <td>Invision 8</td> <td>Your Description 8</td> </tr>
<tr> <td>Invision 9</td> <td>Your Description 9</td> </tr>
<tr> <td>Invision 10</td> <td>Your Description 10</td> </tr>
<tr> <td>Invision 11</td> <td>Your Description 11</td> </tr>
<tr> <td>Invision 12</td> <td>Your Description 12</td> </tr>
<tr> <td>Invision 13</td> <td>Your Description 13</td> </tr>
<tr> <td>Invision 14</td> <td>Your Description 14</td> </tr>
<tr> <td>Invision 15</td> <td>Your Description 15</td> </tr>
</tbody> </table>

Oke sobat, mungkin sekian artikel dari Enterblogger, semoga bisa bermanfaat, dan bisa diterapkan.
Salam internet+_=

Share this post