Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget Atas Posting

Cara Membuat Tabel di Blogger (Responsive dan Berwarna)

cara membuat tabel di blog blogger

Banyak blogger pemula yang belum mengetahui bagaimana cara membuat tabel di blogger. Tidak heran sih, karena blogger sendiri tidak menyediakan fitur untuk membuat tabel pada halaman penulisan.

Padahal tabel sangan penting untuk memperlihat data. Semoga kedepannya developer blogger kepikiran menambahkan fitur atau tombol khusus untuk membuat tabel langsung dari blogger.

Karena sekarang belum ada fiturnya, di tutorial blogger kali ini saya akan membagikan cara membuat tabel di blogspot dengan cepat dan mudah.

Tidak percaya? Langsung saja simak tutorialnya di bawah ini.

Cara Membuat Tabel di Blogger

Ada 2 cara membuat tabel di blog yang akan saya bagikan disini, pertama menggunakan website bernama Tables Generator dan yang kedua adalah membuat dengan HTML secara manual.

Tanpa menunggu lama, mari kita langsung ke cara yang pertama. Berikut adalah cara membuat tabel responsive di blog menggunakan Tables Generator.

  1. Kunjungi halaman berikut https://www.tablesgenerator.com/.
  2. Untuk buat tabel di postingan blog silahkan pilih menu HTML.
  3. tablesgenerator.com
  4. Membuat tabel baru dengan cara klik menu FileNew table.
  5. membuat tabel baru untuk blog
  6. Akan muncul jendela pop up untuk menentukan jumlah baris (row) dan kolom (columns), silahkan isi angka sesuai dengan yang kamu butuhkan. Jika sudah klik tombol Create.
  7. jumlah baris dan kolom tabel
  8. Sampai tahap ini tabel sudah berhasil dibuat.
  9. tabel berhasil dibuat
  10. Selanjutnya isi semua kolom kosong dengan data yang ingin kamu masukan di postingan blog. Klik pada bagian kolom lalu ketik data nya.
  11. isi data pada tabel
  12. Sebelum dirilis silahkan klik tombol Preview terlebih dahulu untuk melihat tabel yang kamu buat.
  13. preview tabel blog
  14. Agar tampilan table nya responsive disemua perangkat. Klik tombol Make table responsive lalu centang pada bagian Make table responsive.
  15. membuat tabel responsive di blog
  16. Apabila ingin membuat tabel berwarna di blog silahkan klik tombol Theme lalu pilih tema tabel mana yang cocok dengan tampilan blog kamu.
  17. membuat tabel berwarna di blog
  18. Pengaturan table terakhir yaitu mengatur jarak spasi antara table dan tulisan yang ada didalam kolom. Klik menu TableCell spacing, silahkan atur jaraknya dengan cara menggeser tombol slider ke kiri dan ke kanan.
  19. atur jarak tabel
  20. Terakhir tabel klik tombol Generate lalu klik tombol Copy to clipboard untuk menyalin semua script tabel yang sudah kamu buat.
  21. salin kode html table
  22. Sekarang pergi ke Blogger dan buka postingan yang ingin diisi dengan tabel.
  23. Pindah mode tulisan ke mode HTML terlebih dahulu lalu paste semua script tabel yang tadi kamu salin dari tablesgenerator.com.
  24. Jika tidak ada error bisa pindah ke mode menulis, nanti tabel akan terlihat sesuai dengan yang dibuat di tablesgenerator.com
  25. buat tabel di postingan blog
  26. Selesai

Cara Membuat Tabel Responsive di Blog Menggunakan HTML

Cara yang kedua mungkin akan terlihat sulit bagi kalian yang tidak mengerti bahasa HTML. Karena untuk menentukan jumlah baris, kolom, jarak dan tampilan tabel kamu harus mengerti kode nya.

Kode dasar untuk membuat table adalah sebagai berikut:

<table>
<tr>
<td></td>
</tr>
</table>

Keterangan:

  • Table : Untuk membuat bagan tabel
  • Tr : Untuk membuat baris tabel
  • Td : Untuk membuat kolom tabel

Di bawah ini adalah contoh script tabel yang sudah jadi. Silahkan copy semua script dan paste ke postingan blog kamu dalam mode HTML.

<style>
table {background:#f6f6fe;width:100%}
th,td {height:10px;padding:5px;border:1px solid white}
th {background:#f87f14;color:white}
</style>
<br />
<table>
<tbody>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Pekerjaan</th>
</tr>
<tr>
    <td>Adik</td>
    <td>10 th</td>
    <td>Pelajar</td>
</tr>
<tr>
    <td>Kakak</td>
    <td>15 th</td>
    <td>Pelajar</td>
</tr>
<tr>
    <td>Teteh</td>
    <td>20 th</td>
    <td>Mahasiswa</td>
</tr>
<tr>
    <td>Bibi</td>
    <td>28 th</td>
    <td>Ibu Rumah Tangga</td>
</tr>
</tbody>
</table> 

Nanti tampilannya seperti tabel di bawah ini


Nama Umur Pekerjaan
Adik 10 th Pelajar
Kakak 15 th Pelajar
Teteh 20 th Mahasiswa
Bibi 28 th Ibu Rumah Tangga

Untuk mengubah jumlah baris dan kolom, silahkan edit pada bagian kode <tr> dan <td>. Dan jangan lupa ubah semua kata-kata yang ada didalaam <tr> dan <td>.

Keuntungan Membuat Tabel di Postingan Blog

Banyak manfaat dan keuntungan bagi pembaca jika kamu menambahkan tabel di postingan blog. Beberapa diantaranya, yaitu:

1. Artikel nyaman dibaca

Media pada postingan dapat melengkapi sebuah artikel, termasuk media tabel. Adanya tabel pada postingan blog akan membuat pengunjung lebih mudah membaca dan memahami isi dari artikel tersebut.

2. Disukai Google

Selain mempermudah pengunjung, google juga sangat suka denga postingan blog yang memiliki media lengkap seperti gambar, video, tabel dan media lainnya.

Alasan saya membuat table di tablesgenerator.com karena mudah dibaca oleh bot google.

Contohnya ada pada salah satu artikel di verhan.id yang berjudul Alamat Google Seluruh Dunia, Google memperlihatkan data tabel di bagian deskripsi penelusuran. Lihat gambar di bawah ini.

tabel terbaca oleh bot google

Akhir Kata

Itulah pembahasan mengenai cara membuat tabel di Blogger yang bisa kamu ikuti. Jika dilihat dari kedua cara di atas pasti kamu akan memilih menggunakan cara yang pertama, karena bisa menentukan jumlah baris dan kolom serta warna tabel dengan cepat dan mudah.

Oke sekarang kamu sudah tahu caranya ya! Sekian artikel tutorial blog kali ini, semoga bermanfaat.

6 komentar untuk "Cara Membuat Tabel di Blogger (Responsive dan Berwarna)"

  1. Gan, kalau kode supaya garisnya dimunculkan, apa kode garisnya?

    BalasHapus
    Balasan
    1. tambah kode < hr > untuk membuat garis (horizontal ruler).

      Hapus
  2. mas tanya, template blog mas nya pakai apa ?

    BalasHapus
  3. Thanks gan tutorial nya ini yang lagi gw cari

    BalasHapus