Cara Menciptakan Tabel Keterangan Responsive Di Blog Dengan Css
Cara Membuat Tabel Keterangan Responsive di Blog dengan CSS | Pada kesempatan kali ini aku akan membuatkan tutorial cara menciptakan tabel responsive diblog dengan sebuah CSS untuk menciptakan tampilannya semakin menarik.
Tabel responsive ini sangat berkhasiat disaat sahabat akan menunjukkan keterangan dalam artikel yang berkenaan dengan harga suatu barang, tabel untuk keterangan template blog, dan masih banyak lagi kegunaan dari tabel responsive ini.
Tabel Responsive ini tentunya tidak besar lengan berkuasa terhadap kecepatan loading blog sobat, alasannya ialah kodenya hanya memakai CSS tanpa javascript atau isyarat lainnya yang menciptakan berat.
Dengan memakai 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 sahabat ikuti tutorialnya dibawah ini.
Langkah Cara Membuat Tabel Responsive di Blog dengan CSS
1. Silahkan masuk ke blog>theme.edit HTML.2. lalu taruh isyarat dibawah ini diatas isyarat </style> atau sanggup juga diatas isyarat ]]></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. sesudah itu, setiap sahabat akan menciptakan postingan dengan tabel cukup memakai isyarat 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 |
Jangan lupa untuk share dan komen yang sob,
jangan sungkan untuk meminta tutorial lainnya yang serupa semoga nanti aku buatkan untuk sahabat semuanya.
Jika menuurt sahabat artikel ini bermanfaat dan sanggup membantu jangan lupa untuk share ke temen-temennya semoga mereka juga tahu Cara Membuat Tabel Keterangan Responsive di Blog dengan CSS dengan proteksi artikel ini.
Terakhir, aku ucapkan terimakasih yang sudah berkunjung di blog kata mastah.
Salam Luar Biasa!
Sumber https://www.katamastah.com/
