2 Cara Menciptakan Tabel Responsive Di Artikel Blog/Web
Cara menciptakan tabel responsive di dalam artikel – Sebuah data akan lebih baik yummy di baca dan gampang di pahami apabila tersedia dalam bentuk tabel, terus jikalau kalian seorang blogger yang membahas perihal gadget ibarat smartphone atau laptop niscaya menampilkan data spesifikasi smartphone dan laptop dalam bentuk tabel.
Untuk itula semoga pembaca tertarik dengan isi artikel kalian buatlah tabel yang keren dan responsive yang artinya tabel kalian harus lebih berwarna namun tidak berlebihan serta responsive ialah tabel sanggup tampil secara utuh di segala device yang di pakai pembaca kalian baik itu pc/laptop dan smartphone.
Membuat tabel responsive dan keren di bawah ini sanggup di gunakan oleh segala jenis CMS baik itu wordpress maupun blogspot, Langsung saja mari kita buat tampilan tabel di artikel kita menjadi lebih keren dan responvie,
2 Cara Membuat Tabel Responsive di Artikel blog/web
#1. Membuat Tabel Responvie Online Tanpa Memakai CSS
✔ Buatlah telebih dahulu data tabel nya di ms.excel dan copy,
✔ Kunjungi http://www.tablesgenerator.com/html_tables, Lalu pilih File > Paste Tabel Data > Pastekan semua isi tabel yang di excel > kemudian load.
✔ Sesuaikan warna tabel, kolom tabel, baris tabel, pengabungan kolom dll sama ibarat kita menggunakan ms.excel pada umumnya.
✔ Jika telah sesuai dengan yang diinginkan, scroll kebawah klik generate lalu copy to clipboard.
Keterangan:✔ Pastekan hasil generate tadi ke dalam notepad kemudian ganti instruksi html dibawah ini,
- pilih Do not generate CSS untuk menghilangkan instruksi css
- pilih Compact mode untuk menggunakan mode compact
<table class="tg">Dengan kode html ini,
<table class="tg" style="table-layout: fixed; width: 100%;"><tbody>✔ Terakhi masuk ke sajian editor artikel kalian pilih mode HTML lalu pastekan hasil generate yang telah kalian rubah kode html nya sesuai dengan langkah diatas dan save.
Silahkan publish artikel kalian dan buka melalui pc/laptop dan smartphone kalian maka tabel akan tampil secara utuh tanpa ada bab yang terpotong. Cara ini cocok untuk kalian yang tidak mau ribet mengedit kembali template kalian dan memasangkan CSS kedalamnya.
#2. Membuat Tabel Responsive Dengan CSS
✔ Masuk ke blogspot.com kemudian pilih tema > edit html.
✔ Pada sajian editor tekan ctrl+f pada keyboard kemudian cari instruksi ini </style> atau </b:skin> kemudian letakan instruksi dibawah ini sempurna diatasnya.
/* 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} 
✔ Lalu Simpan tema,
✔ Masuk ke sajian editor artikel kalian, kemudian pilih mode HTML
✔ Pastekan contoh tabel 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> ✔ Jangan dulu di posting sesuaikan isi data tabel dengan yang akan kau bagikan di artikelmu.
Keterangan:Akhir Kata
- Menambah heading atau judul gunakan instruksi tag <th>....</th>
- Menambahkan jumlah kolom gunakan instruksi tag <td>....</td>
- Menambahkan jumlah baris gunakan instruksi tag <tr>....</tr>
Terima kasih telah berkunjung jangan lupa untuk share karna mengembangkan itu indah semoga sanggup saling membantu bagi teman yang membutuhkan artikel ini, follow juga blog melalui email untuk terus mendapat update terbaru dari laman saya.
