Cara Membuat Tabel Responsive di Postingan blog

CaraBmembuatBtabelBresponsiveBdiBblog 1 - Cara Membuat Tabel Responsive di Postingan blog

Cara Membuat Tabel Responsive di Postingan blog | Table responsive di blog berguna utk memberikan keterangan di suatu artikel, baik keterangan harga, dan keterangan pd umumnya yg 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) &gt; td {background-color:#f9f9f9;} .post-body table tr:nth-child(even) &gt; 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=&quot;_blank&quot;]: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 pd tiap postingan yg 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 dr Enterblogger, semoga bisa bermanfaat, dan bisa diterapkan.
Salam internet+_=


Loading...

Tags: #Blog #Cara #Membuat #Postingan #Responsive #Tabel

author
Author: 
    Kabur Dari Ibu Tiri yg Kejam, Gadis 14 Thn Ini Malah Diperkosa 6 Pria Selama 2 Hari!
    slidegossip.com – Seorang gadis remaja malang menjadi korban pemerkosaan yg dilakukan oleh 6
    Bangkrut Gara-Gara Corona, Pengusaha Muda Ini Sewa Pembunuh Bayaran Demi Uang Asuransi!
    slidegossip.com – Seorang pengusaha muda nekat melakukan tindakan tak terduga. Berawal dr kondisi
    Aktor Tampan Ini Dituntut Karena Memperkosa 3 Wanita! Pengacara: Kami Yakin Dia Akan Dibebaskan!
    slidegossip.com – Aktor tampan asal Amerika, Danny Masterson dituntut atas tuduhan pemerkosaan yg
    ABG Ngaku Diperkosa Pria Tak Dikenal Saat Mabuk! Baru Lapor Polisi Setelah Hamil 6 Bulan!
    slidegossip.com – Alangkah baiknya utk selalu bersikap hati-hati terhadap orang tak dikenal. Jangan

    Leave a reply "Cara Membuat Tabel Responsive di Postingan blog"