Movies Aggregator http://mizwar.com

Membuat & Menyisipkan Tabel HTML di Postingan Blogger

By , Thursday, March 20, 2008 (klik +1 diatas jika artikel ini bermanfaat)

Bagi Anda pengguna Ms Office; baik itu excel ataupun MS Word maka untuk membuat table sudah sangat dimudahkan *anak kecil saja bisa, masa kalah sama anak kecil* Mirip salah satu acara di stasiun televisi yang saya rasa bagus untuk acara-acara edukasi. Nah bagaimana cara membuat table di blog? Berikut ini kita coba belajar membuat table sederhana di postingan dan element blog…!
Kita coba buat table sederhana sebagai contoh penggunaan table dalam postingan blog. Untuk membuat dan menggunakan table di dalam postingan blog ataupun element html sidebar blog, kita memerlukan kode-kode html untuk table.

BAGIAN I – TABLE DASAR

Kode html “sederhana” untuk pembuatan table adalah seperti dibawah ini, (menggunakan table 2 column dan 1 row)

<table border=”1″>

<tr>

<td></td> <td></td>

</tr>

</table>

Kita coba buat contoh dengan kode table html diatas,

<table border=”1″>

<tr>

<td>Column 1 – Row 1</td> <td>Column 2 – Row 1</td>

</tr>

</table>

Maka hasilnya seperti dibawah ini,

Column 1 – Row 1 Column 2 – Row 1

Lantas kita coba gabungkan antara gambar dengan dengan teks, kode htmlnya seperti ini,

<table border=”1″>

<tr>

<td><img border=”0″ src=”http://i43.servimg.com/u/f43/11/83/04/92/sailin10.gif”/></td> <td><b>MUNGKINKAH…?</b><br/>Kalo kita sekarang sepakat bilang bahwa “Nenek moyang” kita adalah pelaut…! Bisa jadi cucu-cucu kita kelak bakal sepakat bilang bahwa “Nenek Moyang” kita adalah BLOGGER :) Mungkinkah…?</td>

</tr>

Maka hasilnya seperti di bawah ini,

MUNGKINKAH…?
Kalo kita sekarang sepakat bilang bahwa “Nenek moyang” kita adalah pelaut…! Bisa jadi cucu-cucu kita kelak bakal sepakat bilang bahwa “Nenek Moyang” kita adalah BLOGGER :) Mungkinkah…?

BAGIAN I – TABLE DASAR 2

Kode html “sederhana” untuk pembuatan table adalah seperti dibawah ini, (menggunakan table 2 column dan 2 row kemudian kita hilangkan penggunaan border seperti pada bagian pertama – table dasar di atas sehingga untuk contoh di bawah ini tidak menggunakan border)

<table>

<tr>

<td></td> <td></td>

</tr>

<tr>

<td></td> <td></td>

</tr>

</table>

Kita coba buat contoh dengan kode table html diatas,

<table>

<tr>

<td>Column 1 – Row 1</td> <td>Column 2</td>

</tr>

<tr>

<td>Row 2</td> <td>Column 2</td>

</tr>

</table>

Maka hasilnya seperti dibawah ini,

Column 1 – Row 1 Column 2
Row 2 Column 2

Hasilnya kurang meyakinkan…? Oke, kita coba contoh lain dengan menyandingkan antara gambar dan teks, border tetap dihilangkan, kita masukan gambar posisi tengah (center) dan teks secara silang dalam kode di atas menjadi kode seperti di bawah ini,

<table>

<tr>

<td>Tidak sedikit adik-adik kita mempunyai cita-cita tinggi dan mulia; menjadi dokter, insinyur, arsitek, ilmuan, webmaster, bahkan seorang pilot. Dengan Blogging dan Berbagi mari kita dukung cita-cita mulia mereka :) </td>
<td><center><img border=”0″ src=”http://i43.servimg.com/u/f43/11/83/04/92/pesawa10.gif”/></center>
</td>

</tr>

<tr>

<td><center><img border=”0″ src=”http://i43.servimg.com/u/f43/11/83/04/92/100blo10.gif”/></center>
</td>
<td>Namun… mungkinkah kelak cita-cita itu tidak lagi menjadi impian mereka…? Dan lebih memilih cita-cita yang lebih mulia…? Ya cita-cita mulia dengan menjadi… 100% Blogger… :) </td>

</tr>

</table>

Maka hasilnya akan menjadi seperti ini,

Tidak sedikit adik-adik kita mempunyai cita-cita tinggi dan mulia; menjadi dokter, insinyur, arsitek, ilmuan, webmaster, bahkan seorang pilot. Dengan Blogging dan Berbagi mari kita dukung cita-cita mulia mereka :)
Namun… mungkinkah kelak cita-cita itu tidak lagi menjadi impian mereka…? Dan lebih memilih cita-cita yang lebih mulia…? Ya cita-cita mulia dengan menjadi… 100% Blogger… :)

Oke kita cukupkan dahulu bagian “dasar” posting dengan penggunaan table ini… Insya Allah kita sambung di lain waktu dan kesempatan dengan table-table lainnya… dengan bahan dasar yang sama tentu saja :) namun di sarankan untuk bereksplorasi sendiri, mencoba-coba biar lebih maknyos :)

CMIIW :)

Popularity: 12% [?]

40 Responses to “Membuat & Menyisipkan Tabel HTML di Postingan Blogger”

  1. andi says:

    senyum-senyum gaya peserta pelatihan… ooo gitu ya kang… kang kalo di dalem tabel mo disisipin poto sayah gimana yah?

    trus kalo poto akang yg di masukin dalem tabel bakalan ancur ga tuh blog nya? wakakakaka…..

    *absence mode is on*
    Engkim : “andi CiHuY….?”
    Gw : “Hadiiiiir……..”

    _out_

  2. Hakimtea says:

    kue cucur anget-anget.. muke loe ancur banget… plis Ndi, jangan pernah masukin photo loe ke table… kode html ga pernah mau terima, ntar browser error 404040404… xixixi.

    Okeh Ndi…! Absensi dah gw catet… lo emang murid teladan :)

  3. Sofwan says:

    fungsinya sederhana aja tp hasilnya postingan jadi kelihatan lebih hidup & menarik. kreatif mas hakim :)

  4. Hakimtea says:

    mas Sofwan bisa saja… makasih atas suportnya :) Saya banyak belajar dari mas Sofwan juga ^_^

  5. grandy says:

    makasih share ilmunya :)

  6. Arham | blogpreneur says:

    artikel bagyus nih mas, bisa buat adsense triknya … :-)

  7. Hakimtea says:

    sama2grandy… iya mas arham kayaknya cocok untuk trik itu, asal nggak melanggar UU yg berlaku… ^_^

  8. Kristina DIAN Safitry says:

    dian coba coba dulu ah….pasti bisa deh, kalo ndak bisa gimana yach? ngapain khawatir, khan ada hakimtea. iyo ndak,bro?

  9. Hakimtea says:

    yoi dian… ga usah khawatir… masih banyak blogger lain selain hakimtea yg lebih otreh malah…

    Btw, malming…? Ayok ^_^

  10. parlin says:

    wah…satu ilmu baru neh bos… :smile: makasih atas infonya……..
    moga-moga aja nanti warga/rakyat indonesia menjadi seorang blogger smuanya… :grin:

  11. putra says:

    sory mas aku curi gambar buat latihan,,,jangn marah ya…

  12. Sniper says:

    pasti bisa dah orang saya aja bisa belajar disini.. ..privat malem he . .he

  13. zickyn says:

    mas kalau biar tabelnya gak terlalu ke bawah gimana caranya makasih…

  14. zep says:

    mas table kok ke terlalu kebawa terus?..kira2 knp nyak?…

  15. Ana says:

    Makasiiih…. tipsnya udah aku praktekin kok…

  16. udin says:

    Hatur nuhun kang … ditampi pisan elmuna ..!!! di cobiannya…!!!

  17. sudarto says:

    salam akang,

    hehe saya mau nanya, gimana ya caranya postingan table itu biar g renggang, karena saya coba di blog saya setiap buat table itu hasilnya renggang banget antara tulisan di atas table sama tablenya.. kalo renggangnya dikit atau beberapa mili sih g masalah, lah ini renggangnya sak arat arat e kank..

    please help…

    by orang belajar…

  18. makasih atas infonya kang!
    kumaha damang???

  19. ujang says:

    gitu yha om…
    praktekin ah….

  20. dwi says:

    kalo ga salah belum ada penentuan lebar tabelnya ya.. apa aku yang belum cermat ya..

  21. wardiz says:

    tau cara bikin post comment kya gini gak ??
    untuk web pribadi !
    tolong bales ya ke e-mail!!

  22. ryo says:

    thanks for all

  23. wahhh akhir nya aku dapetin info nya buat bikin tabeldi blog

  24. pake front page?biasanya bisa ya….trus tinggal copas ke postingan. tapi infonya bagus ini…

  25. angger says:

    makasih buat tipsnya,akhirnya ketemu juga,,

  26. elin says:

    Siip..tar d coba deh..

  27. dadan says:

    makasih banyak ilmunya gan… sangat bermanfaat buat newbie kayak kita…

    x lagi makasih…

  28. dadan says:

    dah di coppas trus dicoba….
    tutorialnya emang jeeetttuuuuuuu gan… thx banget…

  29. chris says:

    kang hakim yg cakep pisan….coba kang hakim koreksi lagi atu skrip yg akang serat
    http://i43.servimg.com/u/f43/11/83/04/92/sailin10.gif”/&gt; apa tidak lebih tapat kalau tidak d akiri dengan (/)?misal’a
    http://i43.servimg.com/u/f43/11/83/04/92/sailin10.gif”&gt;
    kemudia d akhir skript apa tidak lebih baik d akiri dengan ” kemudian

    hehe…hapunten nya!kalau abdi salah.abdi cm bloger pemula yg jauh dari sebutan bloger sebener’a!

    wassalamu’alaikum akang…..

    di perbanyak lagi ya kang,bagi2 ilmu bagi kita2!

  30. sepele tapi sangat berfungsi, bisa sebagai pemanis biar blog kita tambah ciamik… nice post…

  31. blackersz says:

    terima kasih infonya…sangat membantu saya……

  32. Denria says:

    makasih infonya, udah saya coba berhasil tanpa kendala

  33. titopratama says:

    thx bor..kunjungi balik web kamu brow……

  34. I'm batman says:

    … wah tadinya cuma mau copy kodenya aja,
    tapi di sini lengkap diberikan dengan ilmunya pula.
    thanks bro, sangat bermanfaat sekali !!

  35. terima kasih atas infonya agan..
    kunjungan balik dirunggu..
    salam kenal..

  36. Dj Blackersz says:

    terima kasih…
    saya tunggu postingan terbaru gan….

Leave a Reply

Panorama Theme by Themocracy