December 14, 2016

Cara Membuat Tabel Responsive di Blog Guru Tanpa Harus Memikirkan Kode-kode

Menindak lanjuti tentang Pembuatan blog untuk guru sebagai media pembelajaran online yang pernah di bahas, kali ini akan mempersembahkan bagaimana cara membuat tabel responsive dengan mudah berdasarkan pengalaman sendiri.

Dari beberapa yang pernah diterapkan sepertinya cara ini adalah yang paling mudah karena tanpa harus capek-capek membuat / mencari kode CSS, HTML, dan tag-tag tabelnya. (bagi yang sudah master dengan bahasa pemrograman sih gak ada masalah buat kode-kodenya)

Tabel responsive maksudnya adalah ketika blog kita yang berisi tabel itu di buka di mobile atau gadget yang lainnya bisa menyesuaikan ukurannya sehingga blog kita akan kelihatan rapi dan pengunjungpun akan betah tidak cepat-cepat lari karena merasa nyaman.

tabel responsive

Kenapa onklikbaca membahas tabel pada blog guru? Tentunya sudah menjadi kebutuhan dikala ingin menampilkan data lebih simpel dan efektif. Seperti dalam pembuatan Jadwal Ulangan UAS untuk siswa. Karena pembelajarannya berbasis online jadi para guru juga bisa memanfaatkan blognya untuk memberi info penting kepada siswa secara online.

Apalagi jika sekolahnya sudah juga mempunyai blog sekolah jadi bisa di optimalkan. Para siswa yang sudah mampu tentunya akan dapat mengaksesnya lewat internet.

Baca Juga : Media pembelajaran dengan slide master

Baiklah Bapak/Ibu guru yang memang ingin membuat tampilan tabel tanpa membuat kode CSS bisa diikuti seperti cara dibawah:

1. Buatlah tabel terlebih dahulu di microsoft office word atau di excel ( buat tabel sesuai selera )

2. Baik di word maupun di excel caranya sama. Yang onklikbaca akan paparkan adalah melalui word. Setelah buat tabelnya di word silahkan Save As ====>Word Template pada Save As Type ====> scrol ke bawah pilih Web Page, Filtered =====> Save ====> Yes.

3. Buka file yang di simpan tadi dengan Open With  ====> Notepad. Cari kode <table class= . Copy kode dari <table class= sampai dengan </table>

4. Buka blog gurunya silahkan buka post atau laman yang akan diisikan tabel. Copy disana pada mode HTML lalu lihat hasil pada mode Compose.

5. Kembali lagi pada mode HTML cari kode seperti di bawah tambahkan dengan width: 100% .
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none;">
Sehingga menjadi :
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; width: 100%;">
6. Ternyata kode width: 100% inilah yang menjadikan tabel itu responsive

7. Selamat tabel Bapak / Ibu tampilannya sudah responsive dan efektif

Jika ada yang kurang pas atau solusi lain untuk membuat tabel agar lebih mudah mohon saran dengan membuat coment di bawah.

Kami hanya berbagi informasi, jika ada yang salah atau kurang pas dan ada yang didiskusikan silahkan berkomentar dengan sopan.
EmoticonEmoticon