Cara Membuat Tabel dalam Blog

Tabel merupakan salah satu assesoris yang mungkin dapat menjadikan blog kamu tampil lebih menawan. Tapi karena caranya yang agak sedikit sulit, tidak jarang hal ini diabaikan. Tabel dalam optimasi suatu blog berfungsi untuk menguraian kata-kata atau kalimat dalam bentuk kotak-kotak agar lebih mudah dimengerti dan dipahami. Coba ambil contoh dalam postingan area link exchange dan menampilkan kode HTML dalam postingan. Sekarang mari kita telaah secara seksama sebuah illustrasi di bawah ini.

Aku mempunyai 4 (empat) teman dari kelas yang berbeda beda. Si A dan B di kelas 6 kegemarannya makan bakso. Si C berada di kelas 4 sukanya sepak bola. Sedangkan si D di kelas 5, hobbynya tidur melulu.

Dari kalimat di atas seandainya kita buat ke dalam tabel mungkin bentuknya seperti ini.

Nama TemankuKelasHobby
A6Makan bakso
B6Makan bakso
C4Sepak bola
D5Tidur

Nah, selanjutnya bagaimana trik blogger membuat tabel seperti di atas ke dalam blog kamu. Singkat kata berikut kode untuk membuat tabel dalam blog.
<table border="1" width="300">
<tr bgcolor="#E0F8E0"><td align="center"><b>Nama Temanku</b></td><td align="center"><b>Kelas</b></td><td align="center"><b>Hobby</b></td></tr>
<tr><td align="center">A</td><td align="center">6</td><td align="left">Makan bakso</td></tr>
<tr><td align="center">B</td><td align="center">6</td><td align="left">Makan bakso</td></tr>
<tr><td align="center">C</td><td align="center">4</td><td align="left">Sepak bola</td></tr>
<tr><td align="center">D</td><td align="center">5</td><td align="left">Tidur</td></tr>
</table>

Catatan :
  1. Kode dasar dalam tabel adalah <table> ... </table>.
  2. Kode untuk membuat baris tabel <tr> ... </tr>.
  3. Kode untuk membuat kolom tabel <td> ... </td>, ingat satu baris bisa terdiri dari beberapa kolom.
  4. Kode umum yang menyertai dalam kode tabel adalah width (...px), border (...px), align (center, left, right) dan bgcolor (kode warna/#......).

Selamat membuat tabel dalam blog...

35 komentar untuk “Cara Membuat Tabel dalam Blog”

  1. biar lebih mudahnya mendingan pake macromedia dreamweaver coi.... ato pake front page.

    BalasHapus
  2. mmm.. sangant bermanfaat sobat, thanks..

    BalasHapus
  3. Mas OB thanks ya dah sering mampir ke blog awang.
    Mas, Tabel Link exchangenya awang contek ya konsepnya. . bingung soalnya mau taruh link di side bar tapi side bar blog saya terbatas bgt mas. .

    Matur thank u mas OB. .
    Salam persahabatan. .

    BalasHapus
  4. :)]Bang OB pembaca setia mo nanya lagi nich....bisa ngga posisi tabelnya diatur? Soalnya setelah trik dari bang OB aku coba tabel punyaku posisinya terlalu kebawah, padahal waktu posting, jarak antara tabel dan teks diatasnya udah aku rapatkan. Mohon bantuannya bang!!! Mksh.

    BalasHapus
  5. to onding: Klo Tabel terlalu ke bawah, berarti onding harus pakai trik yang cukup sederhana. Yaitu kodenya dijadikan satu kalimat tanpa ada baris baru (enter). Ex:
    <table border="1" width="300"><tr><td>satu</td><td>dua</td><td>tiga</td></tr><tr><td>satusatu</td><td>duadua</td><td>tigatiga</td></tr></table>

    BalasHapus
  6. Mantab.....mksh atas pencerahannya bang. jadi tambah satu dech ilmuku.;;)

    BalasHapus
  7. Trim's atas triknya, saya praktekkan di blog ...

    BalasHapus
  8. tq sobat . . .
    artikelnya sangat bermanfaat bagi saya . ..
    tapi kapan2 pada main ke www.mythu23ttas.co.cc yah . . .
    Hhe . . .

    BalasHapus
  9. sep dah . . .
    informasi yang bagus nih buat w . . .
    tq yah atas artikelnya . . .

    BalasHapus
  10. bagus friend, tapi kenapa hasilnya kok melorot alias turun jauh kebawah, help me

    BalasHapus
  11. x( wah setelah tak praktekin eee..... tabelnya melorot jadi ga enak di liat klu celana jupe yg melorot c bikin tahan nafas klu ini nafas melulu thx infonya yaaaaaaaa....

    BalasHapus
  12. mmm boleh neh.
    dreamweaver tak coba dulu ah..pengen buat tabel nggak bisa2. :D

    BalasHapus
  13. mekasih sob tutorialnya :) udah d bookmark bahagian ini..thanks

    BalasHapus
  14. terima kasih banget infonya: saya mau coba buat tabel di blog saya.

    BalasHapus
  15. Thank's maz atas infonya. tp stlh tak coba, kok jarak antara teks yang diatas tabel dengan tabelnya kok jauh bgt ya? maklum anak baru. :D

    BalasHapus
  16. makacih
    by http://ari-febriant.blogspot.com/

    BalasHapus
  17. mantab dan bagus banget nich blognya, kunjungan balik ya bro di download ebook gratis =p

    BalasHapus
  18. nuwun ilmunya... aku jadi bisa buat tabel di blogku tapi kok tidak sesuai hasilnya...???

    BalasHapus
  19. @north ngelo rabbit : Jika hasil dari copas kode membuat tabel di atas sedikit berbeda ketika tampil dalam blog, yang perlu diatur adalah kodenya agar disambung semua. Jangan ada "enter" (baris baru), mudah-mudahan bermanfaat.

    BalasHapus
  20. nice inpoh gan.. visit juga more info di http://www.moderninfotechnology.com

    BalasHapus
  21. thanks bro, lumayan nambah ilmu blogging :)

    BalasHapus
  22. kalo ini yang bener bener saya cari mas. soalnya di blogspot ga ada toolnya sih .. harus coding sendiri ye

    BalasHapus
  23. Thank's mas oke banget trik nya,,,,,,

    BalasHapus