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) > 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;}

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 1	Table Header 2	Table Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3

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

Subscribe to receive free email updates: