Cara Menciptakan Tabel Responsive Di Dalam Postingan Blog

Selamat malam shabat blogger kali ini admin akan mengembangkan tutorial nih cara menciptakan tabel di blog dan tentu responsive

Mungkin agan pernah menciptakan posting atau melihat di blog orang ada tabel menyerupai misal di blog Review semartphone misalnya ada kotak tabel atau juga agan suka mengembangkan template dan ingin  menciptakan tabel untuk fitur-fitur supaya terlihat rapih dan lezat di baca
Hmm admin akan pribadi ke tutorial bagi agan yang ingin mencoba/ memasang tabel ini silahkan simak baik baik dibawah ini ya

Langkah:
1. Masuk ke Blogger (wajib)
2. Klik Tema > Edit HTML
3.  Silahkan copy isyarat css di bawah ini, kemudian paste sempurna diatas  isyarat ]]></b:skin> atau sempurna diatas</style>

 /* CSS Table Responsive */ table{border-collapse:collapse;border-spacing:0;} .post-body table td {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;} .post-body table th {border:1px solid #5a97ff;padding:10px;text-align:left;vertical-align:top;background:#4588f3 !important;color:#fff} .post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;} .post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px} 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:50%} table.columns-4 td.columns-cell{width:30%} table.section-columns td.columns-cell{vertical-align:top} table.tr-caption-container{padding:4px;margin-bottom:.5em} td.tr-caption{font-size:80%} .post-body td img, .post-body th img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important} .post-body table.tr-caption-container img, .post-body table.tr-caption-container img, .post-body img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important} .post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important} .post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important} .post-body img.video-thumbnail,.youtube-thumb{visibility:hidden !mportant;display:none !important;height:0} 

4. Setelah itu klik simpan tema
5. Disini anda coba menciptakan postingan baru/ artikel baru

6. Pilih entri baru, kemudian pilih di bab HTML bukan Compose (ingat)
7. Lalu copy isyarat html dibawah ini 

 <table cellpadding="0" cellspacing="0" style="text-align: left;">   <tbody>     <tr>       <th>Specification :</th>       <th></th>     </tr>     <tr>       <td>Color</td>       <td>Black / Silver</td>     </tr>     <tr>       <td>Internal storage</td>       <td>eMCP 32GB / 64GB</td>     </tr>     <tr>       <td>MicroSD card</td>       <td>Supports up to 2TB</td>     </tr>     <tr>       <td>Google Drive</td>       <td>100GB free space (1 year)</td>     </tr>     <tr>       <td>Weight</td>       <td>180 grams</td>     </tr>     <tr>       <td>Dimension (W x D x H)</td>       <td>159mm x 8.45mm x 76mm</td>     </tr>     <tr>       <td>Display</td>       <td>6-inch Full HD<br/>       Front 2.5D curved<br/>       1500:1 contrast ratio</td>     </tr>     <tr>       <td>Processor</td>       <td><b>CPU:</b> Qualcomm® Snapdragon™ 636<br/>         <b>GPU:</b> Qualcomm® Adreno™ 509</td>     </tr>     <tr>       <td>Memory</td>       <td>LPDDR4X 3GB / 4GB / 6GB</td>     </tr>     <tr>       <td>Main Rear Camera</td>       <td>13MP / 16MP<br/> Up to F2.0 aperture</td>     </tr>     <tr>       <td>Second Rear Camera</td>       <td>5MP<br/> Portrait mode for depth sensing</td>     </tr>     <tr>       <td>Front Camera</td>       <td>8MP / 16MP</td>     </tr>     <tr>       <td>Video Recording</td>       <td>4K UHD (3840 by 2160 pixels)</td>     </tr>   </tbody> </table> 

8.Setelah itu silahkan edit teks sesuai artikel agan mau

Keterangan:
1. Untuk menambahkan heading atau judul gunakan isyarat tag <th>.....</th>
2. Untuk menambahkan baris gunakan isyarat tag <tr>.....</tr>
3. Untuk menambahkan kolom gunakan isyarat tag <td>.....</td>

Nah itu saja Tutorial Cara Membuat Tabel Responsive Di Dalam Postingan Blog dari admin semoga bermanfaat.
Sumber https://www.merpatih.com/

Share this post