Cara membuat tabel pada blog

Untuk membuat tabel pada blog sebenarnya caranya cukup mudah, yang dibutuhkan hanya sedikit keahlian, kemampuan, umur min 34 tahun, menikah,.....@%&#^^#$wkwkwk..

ngawur banget..haha

Nih cara yang sebenarnya, he2x

beberapa tag yang dibutuhkan untuk membuat tabel adalah sbb:

• tag tabel itu sendiri ==> <table>Isi tabel anda</table>, dan beberapa tag untuk elemen-elemennya
  

tag untuk judul tabel ==> <caption>judul tabelnya</caption>untuk judul, anda bisa meletakkannya di atas atau di bawah tabel dengan menambahkan kode align="top" / "bottom" pada tag caption.top untuk judul di
atas tabel dan bottom untuk judul di bawah tabel.

• tag untuk baris ==> <tr>Isi baris</tr>

• tag untuk kolom ==> <td>Isi kolom</td>
  

nah,untuk atributnya, anda dapat menggunakan yang ini:

• bgcolor : untuk mengatur warna background/warna latar belakang tabel, baris atau kolom.
  
  bgcolor="kode warna"
  
  untuk kode warna anda bisa melihatnya disini.
• align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan.
align="left" / "center" / "right" left untuk kiri, center untuk tengah, dan right untuk rata kanan.
• valign : untuk mengatur tata letak tulisan secara vertikal, bisa di atas, di tengah, dan di bawah
valign="top" / "middle" / "bottom" Top untuk atas, middle untuk tengah, dan bottom untuk bawah.
• cellpadding: untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel.
  cellpadding="...pixel"
• border: untuk mengatur tingkat ketebalan garis tepi pada tabel.
  
  border="...pixel"
• cellspacing: untuk mengatur jarak antara sel. satuannya dalam pixel.
  
  cellspacing="...pixel"
• width: untuk mengatur lebar tabel atau kolom. satuannya dalam pixel atau persen.
  
  width="...pixel / %"
• height: untuk mengatur tinggi / panjang secara vertikal. satuannya dalam pixel atau persen.
  height="...pixel / %"

Dah pusing lum??hehe
biar ngga' ribet2 banget..
nih saya kasih contoh-contohnya:
misalkan anda ingin membuat tabel yang berisi 2 baris dan 3 kolom..
maka, kode yang harus anda buat seperti ini:

<table border="1"><tr>
<td>Isi kolom 1 baris 1</td>
<td>Isi kolom 2 baris 1</td>
<td>Isi kolom 3 baris 1</td></tr>
<tr>
<td>Isi kolom 1 baris 2</td>
<td>Isi kolom 2 baris 2</td>
<td>Isi kolom 3 baris 2</td></tr></table>

hasilnya akan seperti ini:

Isi kolom 1 baris 1	Isi kolom 2 baris 1	Isi kolom 3 baris 1
Isi kolom 1 baris 2	Isi kolom 2 baris 2	Isi kolom 3 baris 2
Isi kolom 1 baris 3	Isi kolom 2 baris 3	Isi kolom 3 baris 3

seperti yang sudah saya tulis di atas, tag <tr> adalah tag untuk barisnya. jika anda ingin menambah jumlah baris yang ada, maka anda harus menambahkan tag <tr> nya juga..
begitu juga dengan tag <td>, untuk jumlah kolomnya..
jika anda ingin membuat judul tabelnya, maka anda harus membuat tag <caption>Judul tabel</caption> dan diletakkan di antara tag <table> dan </table>..
contoh:
<table border="1"> <caption>Jumlah siswa SMPN Kiamat Sudah Dekat</caption>
<tr><td>Kelas</td>
<td>Jumlah Siswa</td></tr>
<tr><td>XII</td>
<td>512</td></tr></table>
maka jadinya akan seperti ini:

Jumlah siswa SMPN Kiamat Sudah Dekat

Kelas	Jumlah Siswa
XII	512

jika anda ingin meletakkan judulnya di bawah tabel, tinggal tambahkan saja kode align="bottom" pada tag caption, seperti ini <caption align="bottom">judul tabel</caption>
mudah kan??
kita lanjut ke atribut-atributnya y..
misalkan anda ingin memberikan warna backgroundnya, berarti anda harus membuat kode bgcolor="warna backgroundnya", dan di letakkan di:
tag <table>, jika anda ingin memberi warna background tabel secara keseluruhan.
tag <tr>, jika anda hanya ingin memberikan warna barisnya saja.. atau
tag <td>,  jika anda hanya ingin memberikan warna background per kolom..
contoh:
jika kodenya seperti ini

</table border="1" bgcolor="#ffcocb"><tr><td>back</td>
<td>ground</td>
<td>tabel</td></tr>
<tr><td>berwarna</td>
<td>pink</td>
<td>keseluruhan</td></tr>

maka tabel yang akan dihasilkan seperti ini:

back	ground	tabel
berwarna	pink	keseluruhan

jika kode yang anda buat seperti ini:

</table border="1">
<tr bgcolor="#ffcocb"><td>back</td>
<td>ground</td>
<td>tabel</td></tr>
<tr><td>berwarna</td>
<td>pink</td>
<td>pada baris 1</td></tr>

maka tabel yang anda buat, akan menjadi seperti ini:

back	ground	tabel
berwarna	pink	pada baris 1

jika kode yang anda buat seperti ini:

</table border="1">
<tr><td bgcolor="#ffcocb">back</td>
<td>ground</td>
<td bgcolor="#ffcocb">tabel</td></tr>
<tr><td>berwarna</td>
<td>pink pada</td>
<td>kolom 1 & 3 baris 1</td></tr>

maka tabelnya akan seperti ini:

back	ground	tabel
berwarna	pink pada	kolom 1&2 baris 1

nah, kalau dah paham pasti anda semua sudah bisa nyoba-nyoba sendiri sekarang.
biar g panjang banget postingannya n saya juga dah cape ngetiknya, langsung saya gabung saja y contoh atribut-atributnya.. saya anggap anda sudah paham tentang atributnya,.
misalnya seperti ini:
<table border="1" bgcolor="#ff0000;" cellpadding="5pixel" cellspacing="2pixel" width="100%"><caption align="bottom">Tabel campur-campur</caption>
<tr width="100%">
<td width="75%">campur</td>
<td bgcolor="#808069">campur</td></tr>
<tr height="50">
<td align="right">
campur
</td>
<td valign="top">
campur</td></tr>
</table>
akan jadi seperti ini:

Tabel campur-campur

campur	campur
campur	campur

==>intinya, jika anda taruh atribut pada tag <table> maka akan berpengaruh pada tabelnya, jika anda taruh atribut pada tag <tr> maka akan berpengaruh pada baris tersebut saja, dan jika anda taruh atribut pada tag <td> maka akan berpengaruh pada kolom tersebut saja..ok??


Np: perlu di perhatikan untuk atribut align dan valign. pada saat memberikan kode ini, agar dapat berfungsi dengan baik, maka anda harus menekan tombol enter setelah tag tempat dimana anda meletakkan kode tsb. pusing?
nih contohnya:
meletakkan atribut align atau valign pada kolom,
<td align/valign="....">(enter)
Isi Kolom
<td>

Np: Pada penulisan kode untuk tabel, saya sarankan untuk tidak menggunakan enter, karena dapat mengakibatkan tabel yang anda buat akan berada jauh di bawah dari postingan. kecuali untuk atribut align dan valign seperti yang telah saya sebutkan tadi.

Sekian..Trims 4 read it..^_^