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 pertama

kolom 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 pertama	kolom pertama baris kedua
Kolom kedua baris pertama	Kolom 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 1kolom1	baris 2kolom1
baris 1kolom2	baris 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
gambar	keterangan
	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