Cara Mudah Bikin Table Posting

Halloooooo sahabat blogger semua....berita kali ini ane kasih tau cara mudah bikin table di blog. Anda tertarik...nih caranya, baca sampai habis ya....

Untuk membuat tabel di blog, bisa kita lakukan dengan kode HTML. Perintah yang di pakai adalah  
<table>...tulisan anda di sini...</table>
caranya ketika anda ingin memasukkan tulisan ke dalam table, masuk saja ke Edit HTML pada haalaman posting anda, setelah itu kembali ke Compose lagi dan masukkan tulisan anda ke dalamnya. gampang khan?????
Di dalam tabel, kita bisa bisa beberapa atribut di dalamnya, antara lain yaitu:

• bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".
• align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .
• cellpadding : untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel. Penempatan kodenya : cellpadding="pixel" .
• border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan kodenya : boeder="pixel"
• cellspacing
: untuk mengatur jarak antara sel. Penempatan kodenya : cellspacing="pixel" .
• height : untuk mengatur tinggi tabel. penempatan kodenya : height="pixel"|"%" .
• height : untuk mengatur lebal tabel. Penempatan kodenya : height="pixel"|"%" .

Sintaks atau kode yang terbentuk yaitu seperti ini :

<table align="left"|"center"|"right" /*pilih salah satu dan hapus yang lainnya*/
bgcolor="color" /*isi dengan kode warna yang ente suka dan hapus yang lainnya*/
border="pixel" /*isi dengan angka, 1px atau 2px atau yang mana aja sesuka anda*/
cellpadding="pixel" /* ini margin kiri, isi dengan angka akhiri dengan px ya*/
cellspacing="pixel" /*jarak spasi, isi dengan angka dan diakhiri dengan px dan hapus yang lainnya*/
width="pixel"|"%" /*pilih salah satu, 200px, auto, atau 100% dan hapus yang lainnya*/
height="pixel"|"%"> /*sama seperti di atas*/

tulisan anda di sini

</table> /*kode penutup*/

Sebuah elemen TABLE, juga berisi beberapa elemen yaitu CAPTION, elemen TH(table header), elemen TR(table row), serta elemen TD (table row).

Elemen CAPTION berfungsi untuk membuat judul dari sebuah tabel. elemen ini mempunyai atribut align dengan nilai top (yaitu judul di simpan di sebelah atas tabel), juga bottom (yaitu judul berada di sebelah bawah dari tabel).

Sintaks atau kode yang terbentuk yaitu seperti ini :

<caption align="top"|"bottom"> /*pilih salah satu dan hapus yang lainnya*/
tulisan anda di sini
</caption> /*kode penutup*/

elemen TR (Table Row) yaitu untuk membuat baris, elemen ini di tempatkan di dalam elemen tabel. Atribut yang bisa di pakai di dalam TR antara lain :

• align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .
• valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"
• bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".

Sintaks atau kode yang terbentuk yaitu seperti ini :

<tr align="left"|"center"|"right" /*pilih salah satu dan hapus yang lainnya*/
bgcolor="color" /*isi dengan kode warna*/
valign="top"|"middle"|"bottom"> /*pilih salah satu dan hapus yang lainnya*/
tulisan anda di sini
</tr>

elemen TH(Table Header) berfungsi sebagai header sel pada sebuah kolom tabel. Atribut yang bisa di pakai antara lain:

• align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .
• valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"
• bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".
• colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor" .
• rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor"

Sintaks atau kode yang terbentuk yaitu seperti ini :

<th align="left"|"center"|"right" /*pilih salah satu dan hapus yang lainnya*/
bgcolor="color" /*isi dengan kode warna*/
valign="top"|"middle"|"bottom" /*pilih salah satu dan hapus yang lainnya*/
colspan="number" rowspan="number"> /*ganti number dengan angka 10, 20, atau sesuka anda*/


tulisan anda di sini
</th> /*kode penutup*/

Elemen TR(Table Row) adalah elemn untuk membuat kolom. atribut yang bisa di pakai antara lain :

• align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .
• valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"
• bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".
• colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor" .
• rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor"

Sintaks atau kode yang terbentuk yaitu seperti ini : langkahnya sama dengan di atas gan


<td align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom"
colspan="number" rowspan="number">

tulisan anda di sini
</td>

Kode di atas akan berubah secara otomatis ketika anda memasukkan Edit HTML pada postingan.
Masih bingung? kalau begitu saya beri beberapa contoh agar sedikit lebih jelas. Intinya membuat sebuah tabel tunggal, kodenya seperti ini :

<table width="200" border="1">
<tr>
<td>
tulisan anda di sini
</td>
</tr>
<table>

Hasilnya akan seperti ini :

tulisan anda di sini

Terlihat bahwa tulisan yang ada, tampak mepet ke dinding tabel, apabila kita ingin agar tulisan berada persis di tengah tabel, maka cukup tambahkan saja kode align="center" pada kolomnya. misal seperti ini :

<table width="200" border="1">
<tr>
<td align="center">
tulisan anda di sini
</td>
</tr>
</table>

Hasilnya akan seperti ini :

tulisan anda di sini

Contoh-contoh di atas menggunakan nilai border 1, coba bandingkan apabila saya menggunakan nilai border yang lebih besar, misalkan 9. Kodenya seperti ini :

<table width="200" border="9">
<tr>
<td align="center">
tulisan anda di sini
</td>
</tr>
</table>

Hasilnya akan seperti ini :

tulisan anda di sini

Jika ingin kolomnya bertambah, tinggal tambahkan kode kolomnya. contoh dua kolom, kodenya seperti ini :

<table width="300" border="9">
<tr>
<td align="center">
tulisan anda di sini

</td>
<td align="center">
tulisan juga

</td>
</tr>
</table>

Hasilnya akan seperti ini :

tulisan

tulisan juga

Kalau ingin dua baris, kira-kira kodenya seperti ini :

<table width="300" border="1">
<tr>
<td align="center">

tulisan

</td>
<td align="center">
tulisan juga
</td>
</tr>
<tr>
<td align="center">

tulisan
 
</td>
<td align="center">
 
tulisan juga
 
</td>
</tr>
</table>

hasilnya seperti ini :

tulisan	tulisan juga
tulisan	tulisan juga

Jika tabelnya ingin di beri warna, tinggal tambahkan kode bgcolor="kode warna". contoh :

<table width="300" border="1" bgcolor="black">
<tr bgcolor="green">
<td align="center">
tulisan

</td>
<td align="center">

tulisan juga


</td>
<tr bgcolor="yellow">
<tr>
<td align="center">


tulisan


</td>
<td align="center">


tulisan juga  


</td>
</tr>
</table>

hasilnya seperti ini :

tulisan	tulisan juga
tulisan	tulisan juga

Sekarang saya beri contoh terakhir (sedikit lebih serius) dengan mengunakan fungsi caption serta TH (table header). Misalkan saya ingin membuat sebuah tabel data dari nama-nama pemegang perusahaan. Data-data yang ingin di buatkan tabel, kodenya seperti ini :

<table align="left" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr bgcolor="fuchsia"> /*tulisan fuchsia bisa di ganti dengan kode warna*/
<th colspan="2">nama pemegang saham</th> /*ganti sesuka anda*/
</tr>
<tr bgcolor="green"> /*tulisan green bisa di ganti dengan kode warna*/
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow"> /*tulisan yellow bisa di ganti dengan kode warna*/
<td>1.</td>
<td>blogonol</td> /*ganti sesuka anda*/
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>blogonol lagi</td> /*ganti sesuka anda*/
</tr>
<tr bgcolor="blue"> /*tulisan blue bisa di ganti dengan kode warna*/
<td>3.</td>
<td>lagi-lagi blogonol</td> /*ganti sesuka anda*/
</tr>
</table>

Hasilnya seperti ini :

Tabel 1.1

nama pemegang saham
No.	Nama
1.	blogonol
2.	blogonol lagi
3.	lagi-lagi blogonol

Kalau sobat mau tahu tentang kode warna...klik di sini. sebenarnya masih banyak cara bikin table, tapi kayak cukup sampai di sini dulu...nanti kita lanjutkan lagi.

Lantas kita coba gabungkan antara gambar dengan dengan teks, kodenya 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  ini,

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

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

<table>
<tr>
<td>menjadi orang baik itu perlu, menjadi blogger yang aneh tapi baik hati juga perlu, namun terkadang yang perlu itu harus diperlukan juga bagi sesama...heheheeee :)</td>
<td><center><img border="0" src="http://i445.photobucket.com/albums/qq171/etnikprogresif/cooltext491101786.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>Semoga kelak cita-cita itu tidak lagi menjadi impian Dan kita atau mereka lebih memilih cita-cita yang lebih mulia...yaitu cita-cita mulia dengan menjadi...100% Blogger...heheheee lagi :)</td>
</tr>
</table>

kalau mau menampilkan bordernya ganti angka 0 pada

img border="0"

dengan angka 1 atau sesuaka anda.
 
Hasilnya akan menjadi seperti ini.

menjadi orang baik itu perlu, menjadi blogger yang aneh tapi baik hati juga perlu, namun terkadang yang perlu itu harus diperlukan juga bagi sesama...heheheeee :)
	Semoga kelak cita-cita itu tidak lagi menjadi impian Dan kita atau mereka lebih memilih cita-cita yang lebih mulia...yaitu cita-cita mulia dengan menjadi...100% Blogger...heheheee lagi :)

Ok gan...Selamat Menjajal Cara Mudah Bikin Table

keep spirits and do the best