TOP

Cara Membuat Tabel di Postingan Blog (Script html)

Tutorial kali ini adalah menjelaskan bagaimana cara menyisipkan tabel pada blog anda. Kalu menggunakan software seperti Ms.Office Word, ataupun Ms.Office Exel, sangat mudah untuk membuat table, karena kita tinggal klik klik aja. Ya Kan? hehe.. :) Kalau diblog, sangat beda, kita tidak sekedar mengklik klik, tetapi harus menyispkan kode htmlnya. Nah berikut saya akan memberikan tutorial membuat tabel di blog, tapi dari yang sederhana dulu dan mendasar, sehingga nanti bisa anda kembangkan menjadi lebih baik lagi. Berikut kode kode htmlnya :



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 :D 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 :D 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…

Demikian, tutorial dari saya. Sisanya tinggal anda kembangkan sendiri dengan kreatifitas anda dan imajinasi anda masing-masing. Karena saya yakin, setiap manusia mempunyai ide ide yang berbeda dan cemerlang yang ada didalam hati dan pikiran manusia. Selamat mencoba boss..


Related Posts Plugin for WordPress, Blogger...


0 komentar:

Posting Komentar