Friday, May 05, 2017

Cara Membuat Tabel Responsive Di Blog Dengan CSS

author photo
Cara Membuat Tabel Responsive Di Blog Dengan CSS
Pekanan.com- Cara Membuat Tabel Responsive Di Blog Dengan CSS | Pada kesempatan kali ni saya akan berbagi tutorial cara membuat tabel responsive diblog dengan sebuah CSS untuk membuat tampilannya semakin menarik.

Tabel responsive ini sangat berguna disaat sobat akan memberikan keterangan dalam artikel yang berkenaan dengan harga suatu barang, tabel untuk keterangan template blog, dan masih banyak lagi kegunaan dari tabel responsive ini.

Dengan menggunakan tabel responsive, keterangan yang ada dalam tabel tersebut akan mengikuti ukuran layar monitor, ketika tabel dibuka di smartphone maka keteranganya akan tetap terlihat propesional dan tidak terhalang oleh apapun.

Lalu bagaimana cara memasang tabel keterangan responsive ini? silahkan sobat ikuti tutorialnya dibawah ini.

Cara Membuat Tabel Responsive Di Blog Dengan CSS

1. Silahkan masuk ke blog>theme.edit HTML.
2. kemudian taruh kode dibawah ini diatas kode </style> atau bisa juga diatas kode ]]></b:skin>


/* CSS Post Table */ 
.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) &amp;gt; td {background-color:#f9f9f9;} .post-body table tr:nth-child(even) &amp;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=&amp;quot;_blank&amp;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;}
3. setelah itu, setiap sobat akan membuat postingan dengan tabel cukup menggunakan kode HTML dibawah ini:

Contoh 1 :

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Detail:</th> <th>RevenueHits</th> </tr>
<tr> <td>Website URL</td> <td>url here</td> </tr>
<tr> <td>Tipe jaringan</td> <td>CPM, CPC, CPA</td> </tr>
<tr> <td>Tipe iklan</td> <td>Banner, Rich media, pop up/under, text</td> </tr>
<tr> <td>Metode pembayaran</td> <td>Paypal, Wire Transfer, Payoneer</td> </tr>
<tr> <td>Minimal Payout</td> <td>Paypal $20, Wire transfer $500, Payoneer $20</td> </tr>
<tr> <td>Fill rate</td> <td>100%</td> </tr>
<tr> <td>Frekuensi pembayaran</td> <td>NET 30</td> </tr>
<tr> <td>Rate eCPM tertinggi</td> <td>US, Europe traffic</td> </tr>
<tr> <td>Penerimaan traffic</td> <td>Seluruh negara</td> </tr>
<tr> <td>Ad Mobile</td> <td>Yes</td> </tr>
<tr> <td>Ad custom format</td> <td>Yes</td> </tr>
<tr> <td>Affiliasi</td> <td>Yes</td> </tr>
<tr> <td>Bebas virus dan malware</td> <td>Yes</td> </tr>
<tr> <td>Dukungan web Indonesia</td> <td>Yes</td> </tr>
<tr> <td>Kolaborasi dengan Adsense</td> <td>Hight risk</td> </tr>
</tbody> </table>

Hasilnya:
Detail: RevenueHits
Website URL url here
Tipe jaringan CPM, CPC, CPA
Tipe iklan Banner, Rich media, pop up/under, text
Metode pembayaran Paypal, Wire Transfer, Payoneer
Minimal Payout Paypal $20, Wire transfer $500, Payoneer $20
Fill rate 100%
Frekuensi pembayaran NET 30
Rate eCPM tertinggi US, Europe traffic
Penerimaan traffic Seluruh negara
Ad Mobile Yes
Ad custom format Yes
Affiliasi Yes
Bebas virus dan malware Yes
Dukungan web Indonesia Yes
Kolaborasi dengan Adsense Hight risk

Contoh 2 :

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>Table Header 1</th><th>Table Header 2</th>    <th>Table Header 3</th></tr>
<tr><td>Division 1</td><td>Division 2</td><td>Division 3</td></tr>
<tr><td>Division 1</td><td>Division 2</td><td>Division 3</td></tr>
<tr><td>Division 1</td><td>Division 2</td><td>Division 3</td></tr>
<tr><td>Division 1</td><td>Division 2</td><td>Division 3</td></tr>
<tr><td>Division 1</td><td>Division 2</td><td>Division 3</td></tr>
<tr><td>Division 1</td><td>Division 2</td><td>Division 3</td></tr>
<tr><td>Division 1</td><td>Division 2</td><td>Division 3</td></tr>
<tr><td>Division 1</td><td>Division 2</td><td>Division 3</td></tr>
<tr><td>Division 1</td><td>Division 2</td><td>Division 3</td></tr>
<tr><td>Division 1</td><td>Division 2</td><td>Division 3</td></tr>
<tr><td>Division 1</td><td>Division 2</td><td>Division 3</td></tr>
<tr><td>Division 1</td><td>Division 2</td><td>Division 3</td></tr>
</tbody> </table>
Hasilnya :

Table Header 1Table Header 2 Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

Demikian tutorial Cara Membuat Tabel Responsive Di Blog Dengan CSS, semoga bermnafaat.

Advertisement
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Selamat Datang di Blog Pekanan.com

Next article Next Post
Previous article Previous Post