√ Cara Menciptakan Tabel Responsive Di Postingan Blog

Sebagian blogger mungkin membutuhkan tabel untuk menciptakan sebuah perbandingan, keterangan, atau dapat juga dipakai untuk menulis spesifikasi produk.

Membuat tabel di postingan blog memang sangat mudah, Anda dapat mengnyalin (copy) tabel yang sudah dibentuk memakai excel kemudian menempelkannya (paste) pada ketika menulis artikel.

Tapi kalau ini dilakukan yang terjadi tabel tersebut tidak akan mempunyai warna maupun garis, dan hanya akan terlihat menyerupai goresan pena polos namun sudah dibagi menjadi beberapa kolom dan baris.

Artinya kalau kau copy paste tabel eksklusif dari excel maka jadinya kurang bagus.

Untuk menciptakan tabel responsive di postingan blog kita perlu menambahkan isyarat css biar tampilan tabel menjadi lebih menarik, keren, dan cantik.

Untuk menciptakan tabel di dalam postingan atau artikel blog, kita harus membuatnya secara manual dengan memakai beberapa kode tag html.

Menurut saya sih, memang agak ribet kalau mau bikin tabel di blogger.

Karena harus dibentuk manual, apalagi kalau tabel tersebut punya banyak baris dan kolom.

Sebenarnya dapat juga dibentuk memakai excel kemudian di copy paste di blog, dan supaya tampilannya bagus maka isyarat cssnya harus diadaptasi dengan isyarat tabel dari excel.

Tapi damai saja, disini saya akan memperlihatkan klarifikasi menciptakan tabel di postingan blog dan cara menambahkan baris dan kolom pada tabel.

Jika Anda tertarik untuk menciptakan tabel responsive di postingan blogger, silahkan ikuti langkah-langkahnya di bawah ini.

Cara Membuat Tabel Responsive di Blogger

DEMO

1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Copy isyarat css di bawah ini, kemudian Paste sebelum kode ]]></b:skin> atau </style>

/* CSS Post Table */ 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. Kemudian klik Simpan tema
5. Silahkan buka postingan blog Anda
6. Setelah berada di halaman posting, klik cuilan HTML bukan Compose
7. Lalu copy isyarat tabel di bawah 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. Silahkan edit sesuai dengan kebutuhan Anda

Catatan:
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>

Silahkan Anda pahami kode-kode di atas sebab berdasarkan saya isyarat ini cukup gampang untuk dipahami, tapi kalau kalian masih galau silahkan berkomentar di artikel ini atau dapat menghubungi kami melalui halaman kontak.

Itulah artikel mengenai cara menciptakan tabel responsive di postingan blog, semoga bermanfaat.
Sumber http://www.caramanual.com