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>
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/
<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/
Related Posts
- Cara Menciptakan Table Of Contents (Menu Daftar Isi) Di Postingan Blogger - Menu Daftar Isi Atau yang biasa disebuat dengan Table Of Contents (TOS) yaitu daftar yang terdiri dari poin atau bab dari subjek yang terkandung d ...
- Cara Menciptakan Turn On / Off Lights Video Di BlogSering kita jumpai di beberapa blog atau website yang membahas perihal video menyerupai anime, film barat, drama korea, video streaming dan sejenisny ...
- Cara Mematikan Klik Kanan Pada Gambar Di BlogBagi kalian yang bekerja sebagai Graphic Designer kemudian sering mengupload atau mengunggah gambarnya ke website atau blog, maka Anda perlu menonakt ...
- Cara Memasang Lib Dan Host Ke System Pubg Anti Banned Root Only All Device Tutorial pasang file lib mod - Hallo sahabat berjumpa lagi dengan aku admin infoandrocodax yang akan membagikan tutorial, tips, trik dan juga ...
- Cara Menciptakan Pengaruh Animasi Hujan Salju Pure Css Dan Javascript Di BlogMenambahkan imbas hujan salju pada blog sanggup mempercantik tampilan blog Anda, apalagi bulan desember ini selalu identik dengan animo salju di nega ...
- Cara Penulisan Abjad Besar Atau Kecil Pada Judul Artikel Yang Benar Dalam penulisan sebuah judul kita harus memperhatikan penulisan aksara besar (kapital) dan aksara kecil, jangan hingga Anda salah menentukan apala ...
