Thursday, 5 August 2010

Cara Membuat Tabel Di BLOG

:

Tabel merupakan sebuah elemen yang berfungsi untuk mengelompokkan beberapa variabel dengan variabel lain ke dalam sebuah kotak sehingga mudah untuk memahami pembagiannya (itu defenisi menurut saya, menurut anda gimana?). Bagi anda para Blogger yang memilki blog untuk keperluan bisnis tabel ini akan sangat berguna untuk menampilkan daftar harga dan jenis barang yang ditawarkan. Untuk keperluan yang lain juga boleh. Maka dari itu, di tips kali ini saya akan menjelaskan cara membuat tabel tersebut. Mau tau?

Untuk membuat tabel di blog atau website kita menggunkan kode HTML, misal <table> ..... </table>. Didalamnya kita bisa memasukkan beberapa atribut. Di antaranya:

bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya: bgcolor="kode warna" . Klik Disini untuk mengetahui kode warna HTML.

align : untuk mengatur perataan teks pada tabel (rata kiri, tengah, rata kanan, atau rata kiri-kanan)Penempatan kodenya: align="left"|"center"|"right"

cellpadding : untuk mengatur jarak antara tepi cell dengan isi cell di dalam sebuah tabel. Penempatan kodenya: cellpadding="pixel"

border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan kodenya: border="pixel"

cellspacing : untuk mengatur jarak antara cell. Penempatan kodenya: cellspacing="pixel"

height : untuk mengatur tinggi tabel. Penempatan kodenya: height="pixel"

width : untuk mengatur lebal tabel. Penempatan kodenya: width="pixel"

Kode yang terbentuk adalah seperti ini:
<table align="left"|"center"|"right"
bgcolor="kode warna"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
height="pixel"|"%"
width="pixel"|"%">
.....................
</table>

Kita juga bisa memasukkan beberapa elemen ke dalam elemen tabel, yaitu caption, TH (Table Header), TR (Table Row), dan TD (Table Division).

Elemen caption berfungsi untuk membuat judul tabel. Elemen ini mempunyai atribut align dengan nilai top (judul di atas tabel), dan bottom (judul di bawah tabel).

Kode yang terbentuk adalah seperti ini:
<caption align="top"|"bottom">
.................
</caption>

Elemen TR (Table Row) berfungsi untuk membuat baris. Elemen ini letaknya di dalam elemen tabel. Atribut yang bisa di pakai di dalam TR antara lain:

align : untuk mengatur perataan teks pada tabel (rata kiri, tengah, rata kanan, atau rata kiri-kanan)Penempatan kodenya: align="left"|"center"|"right"

valign : untuk mengatur posisi vertikal teks. Penempatan kodenya: valign="top"|"middle"|"bottom"

bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya: bgcolor="kode warna" . Klik Disini untuk mengetahui kode warna HTML.

Kode yang terbentuk adalah seperti ini:

<tr align="left"|"center"|"right"
bgcolor="kode warna"
valign="top"|"middle"|"bottom">
.................
</tr>

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

align : untuk mengatur perataan teks pada tabel (rata kiri, tengah, rata kanan, atau rata kiri-kanan)Penempatan kodenya: align="left"|"center"|"right"

valign : untuk mengatur posisi vertikal teks. Penempatan kodenya: valign="top"|"middle"|"bottom"

bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya: bgcolor="kode warna" . Klik Disini untuk mengetahui kode warna HTML

colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor"

rowspan : untuk mengatur baris. Penempatan kodenya : rowspan="nomor"

Kode yang terbentuk adalah seperti ini:

<th align="left"|"center"|"right"
bgcolor="kode warna"
valign="top"|"middle"|"bottom"
colspan="nomor" rowspan="nomor">
.................
</th>

Elemen TD (Table Division) adalah elemen untuk membuat kolom. Atribut yang bisa di pakai di dalam TD antara lain:

align : untuk mengatur perataan teks pada tabel (rata kiri, tengah, rata kanan, atau rata kiri-kanan)Penempatan kodenya: align="left"|"center"|"right"

valign : untuk mengatur posisi vertikal teks. Penempatan kodenya: valign="top"|"middle"|"bottom"

bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya: bgcolor="kode warna" . Klik Disini untuk mengetahui kode warna HTML.

colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor"

rowspan : untuk mengatur baris. Penempatan kodenya : rowspan="nomor"

Kode yang terbentuk adalah seperti ini:

<td align="left"|"center"|"right"
bgcolor="kode warna"
valign="top"|"middle"|"bottom"
colspan="nomor" rowspan="nomor">
.................
</td>

Berikut kode membuat tabel sederhana:
 
<table width="200" border="1">
<tr>
<td>
Contoh Tabel Sederhana
</td>
</tr>
<table>

Hasilnya:

Contoh Tabel Sederhana

Jika anda ingin tulisannya berada ditengah, tambahkan kode align="center" setelah kode <td>.
Jika anda ingin menebalkan border nya, ganti nilai border="1" dengan nilai yang lebih tinggi. Contoh: border="5"

Contoh:

<table width="200" border="5">
<tr>
<td align="center">
Contoh center & border="5"
</td>
</tr>
</table>

Hasilnya:



Contoh center & border="5"

Jika anda ingin menambah kolom, misalnya 3 kolom, kodenya seperti ini:


<table width="300" border="5">
<tr>
<td align="center">
Contoh Kolom 1
</td>
<td align="center">
Contoh Kolom 2
</td>
<td align="center">
Contoh Kolom 3
</td>
</tr>
</table>

Hasilnya:

Contoh Kolom 1 Contoh Kolom 2 Contoh Kolom 3

Jika anda ingin menambah baris, misalnya 2 baris, kodenya seperti ini:

<table width="300" border="5">
<tr>
<td align="center">
Contoh Kolom 1
</td>
<td align="center">
Contoh Kolom 2
</td>
<td align="center">
Contoh Kolom 3
</td>
</tr>
<tr>
<td align="center">
Contoh Baris 2
</td>
<td align="center">
Contoh Baris 2
</td>
<td align="center">
Contoh Baris 2
</td>
</tr>
</table>

Hasilnya:

Contoh Kolom 1 Contoh Kolom 2 Contoh Kolom 3
Contoh Baris 2 Contoh Baris 2 Contoh Baris 2

Jika ingin memberi warna tabel, kodenya seperti ini:

<table width="300" border="5" bgcolor="#FF00FF">
<tr bgcolor="#0000FF">
<td align="center">
Contoh Kolom 1
</td>
<td align="center">
Contoh Kolom 2
</td>
<td align="center">
Contoh Kolom 3
</td>
</tr>
<tr bgcolor="#00FF00">
<td align="center">
Contoh Baris 2
</td>
<td align="center">
Contoh Baris 2
</td>
<td align="center">
Contoh Baris 2
</td>
</tr>
</table>

Hasilnya:

Contoh Kolom 1 Contoh Kolom 2 Contoh Kolom 3
Contoh Baris 2 Contoh Baris 2 Contoh Baris 2

Huft… Cape’ nih… Lanjut………!!!!!

Ini contoh terakhir:

Misalnya anda adalah Penjual Makanan Online (emang ada? :f anggap aja ada ya.. :r ok, lanjuutt…!). Anda ingin membuat daftar makanan yang unik dan menarik dengan membuat tabel seperti yang saya contohkan berikut:

 
Warung Online Mpok Inez
Daftar Menu & Harga
No.MenuHarga
1.Nasi UdukRp 5000
2.Pecel LeleRp 3500
3.Teh TelorGRATIS!!!


"Wow! Kalau yang itu gimana bang Zacky? :f Inez nggak tau nih.. Bantuin donk…"

Duh Mpok Inez :$, gitu aja repot! Hehehe… Begini kode nya:



<table width="249" border="2" bgcolor="#FF00FF" cellpadding="5" cellspacing="0">
<caption align="top"><b>Warung Online Mpok Inez</b></caption>
<tr bgcolor="fuchsia">
<th colspan="3" bgcolor="#FF0000">Daftar Menu & Harga</th>
</tr>
<tr bgcolor="green">
<th width="24" bgcolor="#FFCC99">No.</th>
<th width="93" bgcolor="#33FFCC">Menu</th>
<th width="92" bgcolor="#66FF00">Harga</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Nasi Uduk</td>
<td bgcolor="#CC0099">Rp 5000</td>
</tr>
<tr bgcolor="red">
<td bgcolor="#99FF00">2.</td>
<td bgcolor="#0000FF">Pecel Lele</td>
<td bgcolor="#FFFFFF">Rp 3500</td>
</tr>
<tr bgcolor="blue">
<td bgcolor="#009900">3.</td>
<td bgcolor="#FF00FF">Teh Telor</td>
<td bgcolor="#CCCCCC">GRATIS!!!</td>
</tr>
</table>

Gimana? Mpok udah kan? Kalau begitu sekarang saya minta menu yang gratis ya, yang Teh Telor itu lho.. :$ Cepat ya Mpookk,,, :)

Lho? Kok jadinya malah ngobrol dengan Mpok Inez? :r :r Ok, saya kembali ke anda para pembaca setia ku.. Hikz.. Hikz..!

Gimana? Saya membuat artikel yang SANGAT SINGKAT ini dengan sangat susah payah, jadi jangan lupa dikasih pujian ya :k, eh komentar… :O

Ok, selamat berkreasi dengan tabel anda…


Cara Membuat Tabel Di BLOG 9 out of 10 based on 10 ratings. 9 user reviews.


Artikel Terkait

cElOTEh sObAT BLOGGER :

Ada 2 komentar ke “Cara Membuat Tabel Di BLOG”
SPECIAL FORCE said...
 

Gan. gimana caranya membuat Tabel kategori kaya punya agan tu, yg bs bergeser ke kiri. by prototive.blogspot.com

Imdad_Gresik said...
 

kayakny udh prnah tak posting dech sOb. ! :12

coba baca ( http://imdad-gresik.blogspot.com/2010/08/membuat-dan-mengatur-arsip-blog-fungsi.html )

lam kenal z

:cendolbig :batabig :najis :marah :repost :2thumbup :matabelo :request :babyboy1 :sorry :travel :kimpoi :ultah :rate5 :bola :kbgt :iloveindonesia :nosara :berduka :hoax :dp :cekpm :thumbup :kr :nohope :ngacir :salahkamar :cool :mewek :babyboy :babygirl :95

ASSALAMU'ALAIKUM WR WB

BLOG ini DOFOLLOW _ Berkomenarlah Yang Baik Dan Sopan Zaaaa !!
Kalo Mau Pake EMOTICONS, sObat Hanya Cukup Menulisan Kodenya Saja... !! ( :10 :11 :13 :16 - :101 / :najis :travel :rate5 ) BE A FRIENDLY !