3 Cara Membuat Tabel Responsive Keren Di Blog
3 Cara membuat tabel responsive di blog - Bagi seorang blogger tentunya membuat konten yang rapi, enak dibaca serta selalu memperhatikan unsur SEO merupakan sebuah hal yang mutlak untuk diterapkan.
Memanjakan pengunjung blog dengan membuat konten yang berkualitas serta unsur kenyamanan tentu merupakan nilai lebih sebuah website dimata pengunjung sehingga pengunjung akan betah berlama - lama di blog kita untuk mendapatkan sesuatu yang mereka perlukan.
 |
| 3 Cara Membuat Tabel Responsive Keren Di Blog |
Selain menggunakan ejaan penulisan yang benar, konten blog juga terkadang akan lebih rapi ketika menggunakan tabel untuk kebutuhan konten tertentu seperti masalah spesifikasi, perbandingan, atau data lainnya sehingga akan lebih mudah dipahami oleh pengunjung.
Tabel adalah alat bantu visual yang berfungsi untuk menjelaskan suatu fakta atau informasi secara singkat, jelas, dan lebih menarik daripada hanya disajikan secara naratif atau menggunakan kata-kata. Sajian informasi yang menggunakan tabel lebih mudah dibaca, sehingga lebih mudah pula untuk disimpulkan.
Lalu bagaimana cara membuat tabel keren di blog? Tentu disini ada beberapa cara membuat tabel di postingan blogger, dimana disni akan saya sajikan dan nantinya bisa anda pilih sesuai dengan kemampuan anda.
Cara Membuat Tabel Di Potingan Blog Secara Manual
Cara yang pertama ini bisa anda gunakan untuk membuat kolom di postingan blog dengan menggunakan HTML, artinya anda bisa langsung membuat tabel di blog melalui menu tampilan HTML.
1. Pertama silahkan anda masuk ke akun Blogger anda, lalu buat Postingan seperti biasa
2. Untuk memasang tabel, silahkan anda beralih dari mode Tampilan Menulis ke Tampilan HTML
3. Berikutnya silahkan anda gunakan kode berikut ini.
<style>
table {background:#ffe599;width:100%;border:1px solid black}
th,td {height:10px;padding:5px;border:1px solid white}
th {background:black;color:white}
</style>
<br />
<table>
<tbody>
<tr>
<th>Judul kolom 1</th>
<th>Judul kolom 2</th>
<th>Judul kolom 3</th>
</tr>
<tr>
<td>daftar isi kolom</td>
<td>daftar isi kolom</td>
<td>daftar isi kolom</td>
</tr>
<tr>
<td>daftar isi kolom</td>
<td>daftar isi kolom</td>
<td>daftar isi kolom</td>
</tr>
<tr>
<td>daftar isi kolom</td>
<td>daftar isi kolom</td>
<td>daftar isi kolom</td>
</tr>
</tbody>
</table>
Contoh diatas merupakan cara membuat tabel 3 kolom di blogger, jika anda ingin menggunakannya sebagai cara membuat 2 tabel berdampingan di html maka anda tinggal sesuaikan antara judul dan daftar isi, silahkan anda hapus maupun tambahkan sesuai dengan keperluan.
Keterangan:
- Jika ingin mengganti warna background atau bingkai (border), anda bisa menggantinya dengan warna lain sesuka anda pada kode di dalam atribut style.
- Pada kolom judul (ditandai warna merah), silahkan isikan kolom dengan 3 judul anda.
- Pada kolom di bawahnya dan seterusnya (ditandai warna hijau), silahkan isi dan sesuaikan dengan daftar isi pada tabel anda.
- Jika ingin menambahkan kolom baru baik itu ke samping atau pun ke bawah, anda bisa sesuaikan dengan menambahkan deret lagi di bawahnya atau sesuaikan urutannya.
4. Jika sudah selesai silahkan anda preview terlebih dahulu, apabila dirasa sudah pas silahkan anda publikasikan.
5. Selesai
Itulah cara membuat tabel di html dengan mudah yang tentu sekarang bisa anda sesuaikan dengan keperluan anda.
Cara Membuat Kolom di Postingan Blog Dengan Microsoft Word
Cara kedua membuat tabel di blogger adalah dengan menggunakan Microsoft Word. Caranya juga terbilang cukup mudah dan simpel, serta mudah anda sesuaikan tampilannya sesuka hati.
1. Pertama silahkan anda buka Microsoft Word di PC anda
2. Berikutnya silahkan anda klik pada Insert lalu pilih Tabel
 |
| Cara Membuat Tabel Responsive Keren Di Blog Dengan Word |
3. Silahkan anda sesuaikan jumlah tabel sesuai dengan keperluan anda
4. Jika sudah, silahkan anda copy tabel tersebut ke postingan blog anda.
Selesai
Tutorial diatas juga bisa anda gunakan sebagai cara membuat tabel spesifikasi di blog, misal spesifikasi smartphone, atau review spek produk lainnya.
Perlu anda ketahui, dengan menggunakan metode diatas memang menghasilkan tabel yang keren, tetapi disini sifatnya kurang responsif dikarenakan semua scrip yang ada di microsoft word akan terbawa ke postingan blogger anda sehingga bisa menyebabkan loading menjadi lambat.
Untuk mengatasi hal tersebut silahkan anda baca: 3 Cara Copy Paste Artikel Dari Word Ke Postingan Blog Agar Rapi
Mudah bukan? Tentu dengan cara kedua ini anda bisa membuat tabel dengan model yang lebih variatif dengan mudah.
Cara Membuat Tabel Dengan Efek Scroll Kesamping
Namun demikian jika anda suka copas tabel orang lain dari web tertentu, misalnya saja blog tentang spek smartphone atau produk lainnya atau juga tentang compare/ perbandingan dengan tabel, ketika anda paste di blog maka bisa saja di tampilan dekstop masih maksimal tetapi di tampilan mobile terkadang kepotong.
Nah untuk mengatasi hal tersebut anda bisa mengakalinya dengan menambahkan efek scroll dibawah tabel tersebut, sehingga akan menjadi responsif di tampilan mobile.
Silahkan anda gunakan kode berikut ini:
<style>
.comparebox {
width: 100% ;
overflow-x: auto;
white-space: nowrap;
}
</style>
<div class="comparebox">
Tabel Disini
</div>
Nah sekarang tampilan tabel anda sudah menjadi responsip di semua perangkat baik itu PC maupun Mobile dan Tablet.
Penutup: Itulah 3 Cara Membuat Tabel Responsive Keren Di Blog yang bisa saya bagikan pada kesempatan kali ini, semoga bermanfaat. Jangan lupa terus Ikuti web ini agar selalu mendapatkan update seputar Blogging lainnya.
Post a Comment
Silahkan berkomentar yang sopan, sesuai topik, No Spam, Centang kotak pada Notify me !