11 Jul 2011

Share: yuk Belajar Buat Tabel Di Blog

Hello sharelikers,Mungkin minggu -minggu ini saya akan bahas tuntas tentang Tutorial Meskipun saya Adalah seorang newbie,Karena hanya bertujuan untuk Dokumentasi mungkin saja suatu saat newbie ini lupa atau Khilaf. Mendengar kata Tutorial tentu sobat bisa menemukan bermilyar -milyar para master Blogger  diluar sana yang menyajikan Tutorial secara lengkap dan menarik.

Nah kali ini saya mau mendokumentasikan tentang cara membuat tabel diblog.Sebagaimana kita tahu Tabel ang bisa berfungsi sebagai :
  • tempat meletakkan data dan statistika layaknya di MS excel atau word
  • meletakkan banner dan gambar lebih rapi di sidebar maupun post
Namun sayangnya,di Blogspot ataupun Wordpress,menu ikon untuk membuat table tidaklah tersedia (tidak seperti di MS word ataupun Excel),maka dari itu kita harus mempelajari cara membuat tabel dengan tag html table berikut Ini :tag html nya <table> ..... </table> dan didalam tag ini ada beberapa elemen atau attribut yang bisa kita gunakan :
  • bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor= "kode warna".misal bgcolor="#ffffff"  (untuk warna putih)
  • 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" (pilih salah satu jangan tiga-tiganya)
  • cellpadding : untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel. Penempatan kodenya : cellpadding=" ***px" (isi dengan angka misal cellpadding="5px"(satuan pixel)
  • border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan kodenya : border="**px" .bisa juga sobat satukan dengan tag border lainnya seperti Dotted,Solid,groove,ridge,outset,inset.Contoh : border="5px solid"
  • cellspacing: untuk mengatur jarak antara sel. Penempatan kodenya : cellspacing="**px" . 
  • height : untuk mengatur tinggi tabel. penempatan kodenya : height="**pixel"/ atau "***%" Height bisa menggunakan satuan pixel (px) atau juga persentase dari ukuran dari isi tabel
  • Width untuk lebar tabel,pengaturan sama dengan Height
1.Nah bagaimana Syntaks Table secara dasar? 


<table align="left" atau "center"atau "right"
bgcolor="color"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
width="pixel"
atau "%"
height="pixel"
atau "%">

.....................

</table>

2.Selanjutnya tabel juga harus diberi beberapa elemen diantaranya Caption (judul),TH (header table),Baris/row (elemen Tr),serta Elemen Kolom (Td).

~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">


............................


</caption>

~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"atau"center"atau"right" .
  • valign : untuk mengatur posisi vertikal. penempatan kodenya :
    valign="top"atau"middle"atau"bottom"
  • bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".misal bgcolor="hijau"
Sintaks atau kode yang terbentuk yaitu seperti ini :

<tr align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom">


.....................


</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"atau"center"atau"right" .
  • valign : untuk mengatur posisi vertikal. penempatan kodenya :
    valign="top"atau"middle"atau"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"
bgcolor="color"
valign="top"|"middle"|"bottom"
colspan="number" rowspan="number">


.....................


</th>

~Elemen TD adalah elemen untuk membuat kolom. atribut yang bisa  di pakai sama dengan atribut yang dipakai oleh TH (table header)
  • align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"atau"center"atau"right" .
  • valign : untuk mengatur posisi vertikal. penempatan kodenya :
    valign="top"atau"middle"atau"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 :

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


.....................


</td>


Masih bingung?Nah sekarang mari kita buat tabel dari dasar hingga mahir

  • Untuk membuat sebuah tabel tunggal, kodenya kira-kira seperti ini :

<table width="200" border="1">
<tr>
<td>


Ini cuma Contoh


</td>
</tr>
<table>


Hasilnya akan seperti ini :

 ini cuma Contoh


  • 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">

Contoh lagi
</td>
</tr>
</table>

hasilnya akan seperti Ini  loh :

Contoh Lagi

  • Nah kalo mau bordernya agak tebelan (diatas cuma make border 1px) maka ditambahkan Nilai border dan stylenya bisa diganti (misal border=" 9px solid/groove/dotted/ridge/outse/inset
<table width="200" border="9px solid">
<tr>
<td align="center">

Contoh Pake Border 9px

</td>
</tr>
</table>
 Hasilnya akan seperti Ini :

Contoh pake Border 9px

  • Jika ingin kolomnya bertambah, tinggal tambahkan kode kolomnya.(tidak otomatis make enter tapi manual) Contoh dua kolom, kodenya seperti ini :


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

Ini kolom pertama
</td>
<td align="center">

Ini kolom kedua

</td>
</tr>
</table>
Hasilnya akan seperti berikut Ini :

ini kolom pertamakolom kedua

  • Nah kalau tadi dua kolom berikut In contoh dua baris dua Kolom
<table width="300" border="1px ">
<tr>
<td align="center">

kolom pertama baris pertama

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

kolom pertama baris kedua


</td>
</tr>
<tr>
<td align="center">
Kolom kedua baris pertama

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

Kolom kedua baris kedua

</td>
</tr>
</table>
 Hasilnya akan seperti ini :
kolom pertama baris pertamakolom pertama baris kedua
Kolom kedua baris pertamaKolom kedua baris kedua

  • Jika ingin diberi warna Sobat tinggal menyisipkan atribut Bg Color seperti contoh dibawah Ini:

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

baris 1 kolom 1

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

baris 2 kolom1

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

baris 1 kolom2


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

baris 2 kolom2

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

~Hasilnya akan tampak seperti Ini :

baris 1kolom1baris 2kolom1
baris 1kolom2baris 2kolom2

  • Bila sobat ingin menambahkan gambar kedalamnya,misal banner Iklan sobat tinggal menyelipkan kode html gambar didalam Kode Tr ataupun Td  seperti contoh berikut Ini :
<table border="1" cellpadding="20" style="width: 300px;"><tbody>
<tr><td align="center">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5LhBGqST0NF-fCmDwpmjIKuzfGE4bGzeSlG2xPMFwgbS2xM9TARa8J1jp8JVdOZNbxNjrraKzHiSbP8JN6UWXdRl6ntQfZdkEydhM-QF_qZuK5Scpqd3CXV7xHX6Bu1O6NmdsWFhOGhn9/s1600/vino+2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="44" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5LhBGqST0NF-fCmDwpmjIKuzfGE4bGzeSlG2xPMFwgbS2xM9TARa8J1jp8JVdOZNbxNjrraKzHiSbP8JN6UWXdRl6ntQfZdkEydhM-QF_qZuK5Scpqd3CXV7xHX6Bu1O6NmdsWFhOGhn9/s200/vino+2.jpg" width="200" /></a>
</td><td align="center">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5LhBGqST0NF-fCmDwpmjIKuzfGE4bGzeSlG2xPMFwgbS2xM9TARa8J1jp8JVdOZNbxNjrraKzHiSbP8JN6UWXdRl6ntQfZdkEydhM-QF_qZuK5Scpqd3CXV7xHX6Bu1O6NmdsWFhOGhn9/s1600/vino+2.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="44" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5LhBGqST0NF-fCmDwpmjIKuzfGE4bGzeSlG2xPMFwgbS2xM9TARa8J1jp8JVdOZNbxNjrraKzHiSbP8JN6UWXdRl6ntQfZdkEydhM-QF_qZuK5Scpqd3CXV7xHX6Bu1O6NmdsWFhOGhn9/s200/vino+2.jpg" width="200" /></a>
</td></tr>
<tr><td align="center">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5LhBGqST0NF-fCmDwpmjIKuzfGE4bGzeSlG2xPMFwgbS2xM9TARa8J1jp8JVdOZNbxNjrraKzHiSbP8JN6UWXdRl6ntQfZdkEydhM-QF_qZuK5Scpqd3CXV7xHX6Bu1O6NmdsWFhOGhn9/s1600/vino+2.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="44" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5LhBGqST0NF-fCmDwpmjIKuzfGE4bGzeSlG2xPMFwgbS2xM9TARa8J1jp8JVdOZNbxNjrraKzHiSbP8JN6UWXdRl6ntQfZdkEydhM-QF_qZuK5Scpqd3CXV7xHX6Bu1O6NmdsWFhOGhn9/s200/vino+2.jpg" width="200" /></a>
</td><td align="center">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5LhBGqST0NF-fCmDwpmjIKuzfGE4bGzeSlG2xPMFwgbS2xM9TARa8J1jp8JVdOZNbxNjrraKzHiSbP8JN6UWXdRl6ntQfZdkEydhM-QF_qZuK5Scpqd3CXV7xHX6Bu1O6NmdsWFhOGhn9/s1600/vino+2.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="44" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5LhBGqST0NF-fCmDwpmjIKuzfGE4bGzeSlG2xPMFwgbS2xM9TARa8J1jp8JVdOZNbxNjrraKzHiSbP8JN6UWXdRl6ntQfZdkEydhM-QF_qZuK5Scpqd3CXV7xHX6Bu1O6NmdsWFhOGhn9/s200/vino+2.jpg" width="200" /></a>
</td></tr>
</tbody></table>


  • Nah Terakhir  bila sobat Ingin membuat versi lengkapnya sobat menggunakan header(TH) dengan background warna serta  Gambar maka lihatlah contoh berikut ini

<table align="left" bgcolor="cyan" border="2" cellpadding="5" cellspacing="0"><caption align="top"><b>Tabel 1.1</b></caption><tbody>
<tr bgcolor="fuchsia"><th colspan="2">Tabel Header</th></tr>
<tr bgcolor="green"><th>gambar</th>
<th>keterangan</th></tr>
<tr bgcolor="yellow"><td>

<img border="0" height="44" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5LhBGqST0NF-fCmDwpmjIKuzfGE4bGzeSlG2xPMFwgbS2xM9TARa8J1jp8JVdOZNbxNjrraKzHiSbP8JN6UWXdRl6ntQfZdkEydhM-QF_qZuK5Scpqd3CXV7xHX6Bu1O6NmdsWFhOGhn9/s200/vino+2.jpg" width="200" />
</td><td style="text-align: center;"><b>Yang Penting Share </b></td></tr>
<tr bgcolor="red"><td>

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJz7aRDxbxWZpjau2ApUZ5ogCtwmTtng2pRaIpR7wykyRRvswNIZcEH2m7D1KTu6i86oidKIxGhYrCmcR_ClfWHr2So2UcoFzvXhPLg_2gkVd4rCaD9HTf6VlhbDchI7uVpl0W9rZefwym/s1600/google-pr-update-list.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="44" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJz7aRDxbxWZpjau2ApUZ5ogCtwmTtng2pRaIpR7wykyRRvswNIZcEH2m7D1KTu6i86oidKIxGhYrCmcR_ClfWHr2So2UcoFzvXhPLg_2gkVd4rCaD9HTf6VlhbDchI7uVpl0W9rZefwym/s200/google-pr-update-list.jpg" width="200" /></a>

</td><td style="text-align: center;"><b>Hadiah Google</b></td></tr>
<tr bgcolor="blue"><td style="text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq-h9iPc8RuPx5I0_8I6UnuxwTvQY-i9KxBvbhf5ou9QJg-Mru-waJENmlkYo25jaXHmUDsoC-wc2Pgdq1wG6TeptxruRiAqqss3lEVcPGil8P74xEvhEi7ECwZMzYp8QimLbBztSdsbWr/s1600/photo-posting_07.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="44" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq-h9iPc8RuPx5I0_8I6UnuxwTvQY-i9KxBvbhf5ou9QJg-Mru-waJENmlkYo25jaXHmUDsoC-wc2Pgdq1wG6TeptxruRiAqqss3lEVcPGil8P74xEvhEi7ECwZMzYp8QimLbBztSdsbWr/s200/photo-posting_07.gif" width="200" /></a>

</td><td style="text-align: center;"><b>Preview</b></td></tr>
</tbody></table>

Tabel 1.1
Tabel Header
gambarketerangan
Yang Penting Share
Hadiah Google

Preview

















Alhamdulilah akhirnya selesai juga tutorial Ini ,udah pegel nih tangan Yang penting Share,Semoga postingan yang berguru pada kang Rohman Ini dapat bermanfaat bagi sobat dan saya juga ,Sobat bisa berkreasi dengan segala atribut table yang ada.Selamat berkreasi dengan tabel di blogger.Salam yang Penting Share.



Postingan ini dicopas dan diterjemahkan dari :
http://kolom-tutorial.blogspot.com/2007/11/cara-membuat-tabel-di-blog.html

Tampilan terbaik menggunakan Google chrome dan Mozilla +5 layar 1280x854

29 comments:

  1. Anonymous7/11/2011

    wee.. oklah nanti di coba buat kolom-2 kaya gitu ya ..

    ReplyDelete
  2. @Dhani wah abang jgn ejek ahh,abang dhani mah udah lebih tau dari saya pake merendah lagi hohoho saya belajar blogazinenya mantap dari abang :D

    ReplyDelete
  3. panjang banget sob.. hehe.. btw, sorry telat bayar hutang kunjungan.. hehehe..

    kok follower dsini muncul, punya q dah 2 hari ga muncul bersam2 dgn GA.. :)

    ReplyDelete
  4. @Catatan si Boy wkwkwkw itu dia panjangnya minta ampun hohoo ya itu kodenya dah dihack alias dah diedit biar selalu nongol,coba deh pake Ctrl +u lalu cek scriptnya :P

    ReplyDelete
  5. panjang bner sob ,ga cape tu nulis nya???
    mantafffffff

    ReplyDelete
  6. hmmmm bener jugayah sob,,sayasering kerepotan bikin table di dalem postin gan...bisasayapke tuh ntr klobikinpostingan yg adatabelnya ....trims info kerennya

    ReplyDelete
  7. dapat ilmu lagi disini
    trims gan done today

    ReplyDelete
  8. @Blog Eke capek sih sob,cuma demi share ya harus berkorban walau jari keriting :P

    ReplyDelete
  9. @Green KLOPERER ya sobat bisa dipake bwat post yg ada tabelnya silahkan dicoba

    ReplyDelete
  10. @Obat Sakit 2011 bukan ilmu baru om,saya cuma share ke sekian kalinya dari para master blogger

    ReplyDelete
  11. keren2 model tblnya, tapi kayaknya saya juga belum coba pake postingan tabel

    ReplyDelete
  12. udah tak pasang di my frien link sob, silakan di cek

    ReplyDelete
  13. mantab,,, blogku yang baru sangat perlu tabel seperti ini..hehe

    sory baru mampir.. ^^a

    ReplyDelete
  14. Yeyeyeee..info yg hebet nie..ntar di ita coba dechh..mudahan bisa juga...thank's ya sob

    ReplyDelete
  15. @Tukang Komik gpp sob,Hehehe silahkan dicoba bwat komiknya

    ReplyDelete
  16. @Putri Omsima hehehe namanya Diita ya?hem semoga tambah keren puisinya saya suka tuh

    ReplyDelete
  17. Yang paling saya lemah ya buat tabel, mulai dari BBCode buat tabel nda bisa-bisa, mumpung ada tutorialnya di bookmark dulu ah.

    Keren-keren ya, tabel 1.1 bisa dibuat daftar banner temen tuh. :)

    ReplyDelete
  18. @DAW-XP oke master iya silahan dicoba :D

    ReplyDelete
  19. Wuih semakin mantabs nich Tutornya Mas i- One,.
    Gimana kabarnya?

    ReplyDelete
  20. kode warnanya punyakah gan yang lengkap

    ReplyDelete
  21. Bedeh, keren sob, YPS makin di hati aja dah.. :D

    ReplyDelete
  22. @Boku no Blog wah mas lulu salah sambung hehehe ni bukan mas i-one tapi mas randy hehehe

    ReplyDelete
  23. @Obat Sakit 2011 ada sob,cari aja di sitemap :D

    ReplyDelete
  24. Wah sorry banget Mas Randy,...mmg gak cuman hp aja yang salah sambung, otak juga salah sambung,..heheheh Mantab tutornya dan keep share...

    ReplyDelete
  25. @Boku no Blog gpp mas lUlu ah ini tutor lama bersemi kembali :D maklum saya newbie

    ReplyDelete
  26. sipp nih, saya juga udah pake buat kotak komentar saya bikin kolom disamping tombol sharing :D

    ReplyDelete
  27. @Ladida Cafe Hehehe iya mas ladida saya udah lihat mantaps dehhtop bgt Ladida cafe :D thanks komentnya2

    ReplyDelete