TopBottom

Blog Tutorial

About Me

Add your donation here for a better of our service. Thanks!

Berlangganan

Anda Suka Tips Blogger Zacky?
Temukan Kami Di:
Ingin Dapat Artikel Terbaru?
rss Klik disini untuk berlangganan melalui RSS atau terima artikel di email anda dengan cara mengisi form berikut:

Cara Membuat Tabel Di Blog

Original by IFX Adrian | 03 Desember 2009 7 Comments

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…

Label: ,

Bagikan Artikel Ini!

<a href="http://instaforex.com/forexcopy_system.php?x=DVXF">InstaForex</a>
Facebook Delicious Digg! Twitter Linkedin StumbleUpon Lintas Berita
Technorati Google Bookmarks Mixx Yahoo! Newsvine Reddit

Artikel Lain Yang Mungkin Anda Baca

7 komentar:

Atif Romeo 3 Maret 2010 15.01  

Hebat... belum ada yg ngajarin bikin tabel di blog.. salut dah!! Btw, mas zacky ga bikin buku? bagus2 nih artikelnya.

Muhammad Irjan Mas'ud 8 Agustus 2010 14.02  

great bang Zacky! sangat jelas tuntunannya... cuma sy mau tau gmn caranya kasih warna bordernya?

Tahyu 9 Oktober 2010 06.29  

bagus sekali artikelnya...
kebetulan lagi butuh untuk tabel harga pulsa gimana caranya?

saya bookmarks nih blognya.
sundul dulu ahh...

syakir 6 September 2012 12.32  

terimakasih tips nya,:)

Anonim 16 Juni 2013 19.45  

hebAT NIH, dari berkali googling cuma ini yg ngasi tau cara bikin kolom detail..mantap !!!

Sukamto Khathunk 27 Oktober 2013 12.58  

Artikel yang bagus, trimakasih

Poskan Komentar