Begini Cara Buat Tabel Mudah, Tampil Responsive di Blogger dan Wordpress

0

Bagi yang masih awam dalam desain blog/web, tentu jika ingin membuat tabel mengalami kesulitan. Nah, disini kami sampaikan Cara Membuat Tabel Responsive, yakni tabel yang tampilannya mengikuti ukuran layar pengunjung. Bagaimana caranya? Penulis pernah lakukan dengan Copy Paste data dari Microsoft Excel, namun hasilnya belum memuaskan. Akhirnya Penulis menemukan cara membuat tabel responsive tersebut melalui situs Tablegenerator.com yang dapat digunakan pada Blogger ataupun Wordpress, dan ernyata lebih mudah, simpel dan hasilnya memuaskan.

Tablegenerator.com adalah layanan online yang bisa dipakai untuk membuat tabel tanpa harus mengerti Coding HTML ataupun CSS dahulu. Cara pemakaiannyapun cukup mudah dan tidak jauh berbeda dengan software seperti halnya Microsoft Excel. Jika ingin membuat data langsung di web, hanya perlu menentukan jumlah kolom dan baris lalu memasukan data input pada setiap sel.selain itu juga dapat melakukan Impor data tabel dengan beberapa tipe.
Berikut langkah-langkah membuat tabel responsive melalui Table Generator.com


1. Masuk ke situs Tablegenerator.com
2. Lakukan Input Data dengan beberapa pilihan di menu File
  • New Table, Pilih menu pilihan ini untuk membuat tabel baru. Pada pilihan ini diminta untuk memasukan jumlah baris dan kolom yang dibutuhkan terlebih dahulu.
  • Import CSV file (untuk mengimport data tabel berformat CSV (Comma-Separated Values ) dari Microsoft Excel ). Jika kesulitan membuat format CSV ini dapat dilakukan cara berikut :
    • Copy  data tabel Microsoft Excel, Paste di  Spreadsheets Google Docs, lakukan editing sesuai kebutuhan.
    • Setelah itu, download data dari menu File > Download > Nilai yang dipisahkan koma (csv, sheet saat ini) > lakukan penyimpanan.
    • Setelah data tabel format CSV tersedia, kembali ke Tablegenerator.com, klik File > Import CSV file, tampil kotak dialog Import data from CSV file, 

    • kemudian Klik Tombol Pilih File > pilih data table CSV > Klik Tombol Import. Data tabel akan tampil dan lakukan editing (jika diperlukan).
  • Paste table data (Reccomended) untuk menyalin langsung data dari Microsoft Excel, Pilih menu pilihan  ini, (Sebelumnya telah meng Copy data yang akan dibuat), Tampil kotak dialog Paste table data,
  • Kemudian Paste di lokasi data > Klik Tombol Load. Data tabel akan tampil dan lakukan editing (jika diperlukan).
3. Lakukan Generate (berada di bawah data tabel)
  • Sebelum menekan tombol GENERATE, lakuka penentuan :
  • Klik Kotak Kecil Do Not Generate CSS untuk menyalin kode HTML saja, kode tanpa CSS.
  • Klik Kotak Kecil  Compact mode untuk mengkompress kode dengan menghilangkan elemen yang tidak penting seperti spasi  dll, agar kode lebih ramping dan ringan.
  • Kemudian Klik Generate, akan tampil halaman kode HTML / CSS
  • Klik Preview untuk melihat hasil
  • Klik Copy to clipboard untuk mengcopy kode
  • Kemudian Paste pada post / widget Blogger atau Wordpress
 Semoga Bermanfaat (Gambar-gambar hasil olah : LKP. Wahana Prestasi)

Tags

Post a Comment

0Comments

Terima Telah Berkunjung

Post a Comment (0)