Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Tabel Di Postingan Blogger/Blogspot


Cara Membuat Tabel di Postingan Blogger/Blogspot  - Membuat tabel dalam postingan blog kadang diperlukan dengan maksud untuk memperjelas materi tulisan/artikel atau untuk mempersingkat penjelasan. Pada panel posting blogger tidak tersedia fasilitas untuk membuat tabel sehingga kita perlu membuat tabel secara manual dengan menggunakan tag HTML tertentu. Dasar yang harus kita pahami dulu disini adalah bagaimana cara atau kode penulisan sebuah tabel didalam postingan. Pada tips blogging kali ini saya akan share bagaimana cara membuat tabel serta tag HTML kode penulisannya.

Perintah dasar tag HTML untuk membuat tabel :
Kode HTMLKeterangan
<table>...</table>Perintah untuk membuat tabel
<tr>...</tr>Perintah untuk membuat baris
<td>...</td>Perintah untuk membuat kolom
border, width, align, bgcolorKode tambahan untuk pengaturan tebal garis
border, lebar tabel, perataan teks dan warna background

Nah sekarang kita coba membuat tabel 1x3 ( 1 baris 3 kolom ), maka penulisannya seperti ini :

<table border="1">
<tr>
<td>Konten 1</td>
<td>Konten 2</td>
<td>Konten 3</td>
</tr>
</table>

Maka hasil tampilannya menjadi seperti ini :

Konten 1Konten 2Konten 3

Selanjutnya kita coba merubah kode dasar diatas tadi untuk mempercantik tampilan dengan perataan teks dan ukuran lebar tabel kita tentukan misalnya 450px, maka penulisannya menjadi seperti ini :

<table border="1" width="450">
<tr bgcolor="#F2F2F2">
<td align="center"><b>Konten 1</b></td><td align="center"><i>Konten 2</i></td><td align="center">Konten 3</td>
</tr>
</table>

Maka hasil tampilannya menjadi seperti ini :

Konten 1Konten 2Konten 3

Kemudian kita coba lagi membuat tabel yang lebih banyak misalnya 2x3 (2 baris 3 kolom ) dengan format penulisan seperti ini :

<table border="1" width="450">
<tr bgcolor="#F2F2F2">
<td align="center"><b>Konten 1</b></td><td align="center"><i>Konten 2</i></td><td align="center">Konten 3</td>
</tr>
<tr>
<td align="left">Tuliskan teks disini</td>
<td align="left">Masukkan script gambar dengan format seperti ini &lt;img border=&#039;0&#039; src=&#039; http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif&#039;/&gt;</td>
<td align="center"> Maka hasilnya akan seperti ini
<img border='0' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif'/></td>
</tr>
</table>

Maka hasil tampilannya menjadi seperti ini :

Konten 1Konten 2Konten 3
Tuliskan teks disini Masukkan script gambar dengan format seperti ini <img border='0' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif'/> Maka hasilnya akan seperti ini

Nah dari 2 contoh sederhana tadi silahkan sobat terapkan untuk membuat tabel dalam postingan anda dengan menggunakan perintah-perintah dasar pembuatan tabel serta kode tambahan yang diperlukan sehingga hasil akhir tabel yang dibuat jadi lebih bagus dan menarik. Materi posting ini tidak cukup jika dihafalkan saja namun akan lebih baik kalau kita langsung mencoba praktek membuatnya. Tentukan dulu jenis atau bentuk tabel yang ingin sobat buat, kemudian coba tuliskan scriptnya di notepad, buka panel posting blogger sobat kemudian paste kode script tabel yang dibuat tadi disana serta lihatlah previewnya. Saya yakin dengan cara seperti ini akan mempercepat pemahaman kita mengenai cara pembuatan tabel ini. Semoga tips ini bisa bermanfaat, happy nice blogging !

62 komentar untuk "Cara Membuat Tabel Di Postingan Blogger/Blogspot"

  1. Thanks infonya mas,, bermanfaat :D ;)

    BalasHapus
  2. @Uzumaki Lovers
    Thanks juga sobat..;)

    BalasHapus
  3. dulu juga materi ini pernah di bahas dalam pelajaran mulok,,tapi agak gak ngerti,saya pelajari dulu gan Cara Membuat Tabel Di Postingan Blogger/Blogspot nya,,mudah-mudahan yang ini bisa lebih ngerti,dan hapal kodenya

    BalasHapus
  4. kode HTML buat bikin table nya saya copy ya mas,,
    mas kalo kode buat warnain tablenya gimana?ada gak mas?

    BalasHapus
  5. ajib nambah ilmu berguna buat newbie kayak ane
    tq y om

    BalasHapus
  6. @Agen xamthone padang
    Untuk kode warna coba baca di sini ya, tinggal pilih warna dan copy aja kodenya.

    @iman
    Thanks juga ya.. ;)

    BalasHapus
  7. bro bagaimana cara membuat RSS Feed Facebook Twitter Google yang di atas itu?

    BalasHapus
  8. makasih gaan,,,kunjungan balik ea?

    BalasHapus
  9. follow juga gan....di tunggu,saya sudah follow blog kamu,makasih buat ilmunya...

    BalasHapus
  10. terimakasih gan.pelajaran baru nih buat newbie

    BalasHapus
  11. ini yang ane cari buat newbie kayaq ane..hehe..

    BalasHapus
  12. Thanks gan infonya :),nice to be here ;;)

    BalasHapus
  13. Trims infonya, cucok banget dgn yang dicari.

    BalasHapus
  14. makasih gan infonya...
    tapi gimana caranya biar lebar kolomnya ga berubah meskipun isinya banyak? soalnya dari contoh yang terakhir, isi kolom 2 mempengaruhi besarnya kolom 1 & kolom 3. makasih sebelumnya

    BalasHapus
  15. thanks saya memang lagi nyari ini..siap dicoba..

    BalasHapus
  16. makasi sob.. sangat bermanfaat.... :D

    BalasHapus
  17. mantap banget mas tutorialnya sangat cocok buat blogger newbie seperti saya salam kenal

    BalasHapus
  18. terima kasih tipsnya, masih bingung cara menghilangkan garis tabelnya, meskipun di tabel border sudah saya set ke 0

    BalasHapus
  19. Thanks buat infonya... langsung dicoba nih..

    BalasHapus
  20. Thanks bangt gan atas Infonya, sangat-sangat membantu...

    Sempatin Mampir gan ke Blog Saya : keranmedia.blogspot.com

    terimakasih

    BalasHapus
  21. mantap bro

    mampir juga ke blog ane http://peluang-usaha-kuliner.blogspot.com

    BalasHapus
  22. postingan ini begitu membantu saya dalam membuat tabel,..nice info

    BalasHapus
  23. Ini yg sedang ku cari membuat table pada blog. makasih infonya mas.

    BalasHapus
  24. cari info cara membuat table nemu disini, makasih ya sob udah berbagi ilmunya :)

    BalasHapus
  25. trima kasih mas buat ilmunya....klo buat tabelnya banyak gitu gmn mas?

    BalasHapus
  26. makasih gan tutornya..mantapssss..hoho
    salam blogging indonesia.. :D

    BalasHapus
  27. Thank gan, Sangat membantu bagi Blog Baru saya.
    Visit Back jangan lupa juga Budayakan Komentar di blog saya. Keep Blogging

    BalasHapus
  28. Mulai sedikit mengerti, makasih sudah berbagi gan..

    BalasHapus
  29. Makasih ilmunya gan, langsung mau nyoba

    BalasHapus
  30. ak masih bingun gan... maklum newbie..
    blum terlalu paham html..
    ntar ak pelajari ulang..
    thanx infonya gan...

    BalasHapus
  31. WAH BERMANFAAT BANGET...makasih ya mas info nya

    BalasHapus
  32. iya, bermanfaat...bisa nambah ilmu nih makasih mas

    BalasHapus
  33. akirnya nemu juga cara membuat beberapa kolom tambahan buat blog aku. thanks

    BalasHapus
  34. kalo ingin buat merge cell, gmna gan caranya?

    BalasHapus
  35. Info yang sangat bermanfaat... Terimakasih... salam ^^

    BalasHapus
  36. Terimakasih utk informasinya, sangat bermanfaat. Sukses selalu untuk anda

    BalasHapus
  37. Trims infonya ,sangat membantu skali ... mampir suhu, ini hasil postingan ane , hasil belajar dari blog ini, terima kasih suhu >>>

    http://klithikanyogyakarta.blogspot.com/2012/08/indahnya-berbagi.html

    BalasHapus
  38. Thanks atas share ilmunya.... Bermanfaat sekali...

    BalasHapus
  39. Makasih tutorialnya, ttg membuat tabel di posting blog. Krn hal ini memang tdk ada di widget blog.

    BalasHapus
  40. langsung ta coba ah, thanks sharing ilmunya ,,, sangat bermanfaat

    Salam

    BalasHapus
  41. Di Google "cara membuat tabel di blog" halaman satu no 4 tapi sobat Rayhan yg paling lengkap infonya. Izin sedot ya. Thks

    BalasHapus
  42. nice tutor sob
    thanks for sharing
    cek yang ini juga sob http://problogiz.blogspot.com/2012/11/10-tabel-style-keren-di-blogger-pure-css.html

    BalasHapus
  43. Masukan buat nambah ilmu,tanks Bro

    BalasHapus
  44. wah HTML ya ini..

    makasih banyak mas atas infor nya..

    BalasHapus