Membuat & Menyisipkan Tabel HTML di Postingan Blogger
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><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…</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% [?]
Category Contoh Teks HTML, TipsRelated Post:
Saya Hakimtea, salah satu dari sekian banyak Blogger Indonesia tinggal di Bandung. Blog ini merupakan Blog "pribadi" yang membahas seputar blog dan lainnya.
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_
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
fungsinya sederhana aja tp hasilnya postingan jadi kelihatan lebih hidup & menarik. kreatif mas hakim
mas Sofwan bisa saja… makasih atas suportnya
Saya banyak belajar dari mas Sofwan juga ^_^
makasih share ilmunya
artikel bagyus nih mas, bisa buat adsense triknya …
sama2grandy… iya mas arham kayaknya cocok untuk trik itu, asal nggak melanggar UU yg berlaku… ^_^
dian coba coba dulu ah….pasti bisa deh, kalo ndak bisa gimana yach? ngapain khawatir, khan ada hakimtea. iyo ndak,bro?
yoi dian… ga usah khawatir… masih banyak blogger lain selain hakimtea yg lebih otreh malah…
Btw, malming…? Ayok ^_^
wah…satu ilmu baru neh bos…
makasih atas infonya……..
moga-moga aja nanti warga/rakyat indonesia menjadi seorang blogger smuanya…
Informasin Yang Siip Boss (^_^)..he..3x
http://lowongan-kerjamu.blogspot.com
bos….mo tanya nih kenapa sih kalo pas dipasang, koq jarak awal tulisan dengan judul koq jadi jauh dari biasanya…?
Contohnnya begini :
Judul Postingan
diposting oleh:……
ini awal tulisan artikelnya…….koq terlalu jauh ya? bisa diakalin caranya ga? ajarin atuh bos….he..he…sukses ach wat kompetisinya…
Terima kasih dapat pengetahuan baru…
bozz aku titip bloggroll ya….
kita tuker link..
sekalian aku mo nyoba yang html coloum…..
hahha…. saya setuju dengan mas yang komentar nomor 1 diatas,…. tp jujur juga yg seperti inilah yg saya cari….
makasih atas infonya
salam blogging from : http://webiteza.blogspot.com