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 InezDaftar Menu & Harga
No. Menu Harga
1. Nasi Uduk Rp 5000
2. Pecel Lele Rp 3500
3. Teh Telor GRATIS!!!


"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,,, :)