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 kesudahannya kurang bagus.
Untuk menciptakan tabel responsive di postingan blog kita perlu menambahkan arahan css semoga 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 arahan cssnya harus diubahsuaikan dengan arahan tabel dari excel.
Tapi hening saja, disini saya akan menunjukkan 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.
1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Copy arahan css di bawah ini, kemudian Paste sebelum kode ]]></b:skin> atau </style>
5. Silahkan buka postingan blog Anda
6. Setelah berada di halaman posting, klik bab HTML bukanCompose
7. Lalu copy arahan tabel di bawah ini
Catatan:
1. Untuk menambahkan heading atau judul gunakan arahan tag
2. Untuk menambahkan baris gunakan arahan tag
3. Untuk menambahkan kolom gunakan arahan tag
Silahkan Anda pahami kode-kode di atas alasannya ialah berdasarkan saya arahan 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 https://www.caramanual.com/
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 kesudahannya kurang bagus.
Untuk menciptakan tabel responsive di postingan blog kita perlu menambahkan arahan css semoga 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 arahan cssnya harus diubahsuaikan dengan arahan tabel dari excel.
Tapi hening saja, disini saya akan menunjukkan 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
1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Copy arahan 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}5. Silahkan buka postingan blog Anda
6. Setelah berada di halaman posting, klik bab HTML bukan
7. Lalu copy arahan 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>Catatan:
1. Untuk menambahkan heading atau judul gunakan arahan tag
<th>.....</th>2. Untuk menambahkan baris gunakan arahan tag
<tr>.....</tr>3. Untuk menambahkan kolom gunakan arahan tag
<td>.....</td>Silahkan Anda pahami kode-kode di atas alasannya ialah berdasarkan saya arahan 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 https://www.caramanual.com/