Cara Membuat Tabel Pada Blog

Seperti kata-kata beberapa blog yang lebih senior nih, kalo nggak sering-sering update blog, blog kita bisa ditinggalkan para pembacanya, atut tuh jadinya. Yah, sedikit demi sedikit per hari bisa lah buat update satu artikel ato lebih ;D hehe... tapi saya masih belum bisa menarik pengunjung dengan ini karena ternyata sudah banyak pesaing yang membahas tentang tips dan trik seputar blog. Nah, kali ini saya akan membicarakan tentang pembuatan tabel.

Yang paling penting di dalam pembuatan tabel adalah rumus <table> .... </table> dan pada tabel tersebut kita dapat menambahkan beberapa atribut seperti:

1. bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".
2. 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".
3. cellpadding : untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel. Penempatan kodenya : cellpadding="pixel"
4. border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan kodenya : boeder="pixel"
5. cellspacing : untuk mengatur jarak antara sel. Penempatan kodenya : cellspacing="pixel"
6. height : untuk mengatur tinggi tabel. penempatan kodenya : height="pixel"|"%"
7. weight : untuk mengatur lebar tabel. Penempatan kodenya : weight="pixel"|"%"

Sintaks atau kode yang terbentuk yaitu seperti ini :

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

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

</table>

Sebuah elemen TABLE, juga berisi beberapa elemen yaitu CAPTION, elemen TH(table header), elemen TR(table row), serta elemen TD (table row).

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 :

1. 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"
2. valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"
3. bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna"

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:

1. 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"
2. valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"
3. bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna"
4. colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor"
5. 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 TR(Table Row) adalah elemen untuk membuat kolom. atribut yang bisa di pakai antara lain :

1. 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"
2. valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"
3. bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna"
4. colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor"
5. 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? kalau begitu saya beri beberapa contoh agar sedikit lebih jelas :

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

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

Contoh

</td>
</tr>
<table>


Hasilnya akan seperti ini :

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
</td>
</tr>
</table>

Hasilnya akan seperti ini :

Contoh

Contoh-contoh di atas menggunakan nilai border 1, coba bandingkan apabila saya menggunakan nilai border yang lebih besar, misalkan 9. Kodenya kira-kira seperti ini :

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

Hasilnya akan seperti ini :

Contoh

Jika ingin kolomnya bertambah, tinggal tambahkan kode kolomnya. contoh dua kolom, kodenya seperti ini :

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


Hasilnya akan seperti ini :

Contoh

Contoh juga

Kalau ingin dua baris, kira-kira kodenya seperti ini :

<table width="300" border="1">
<tr>
<td align="center">
Contoh
</td>
<td align="center">
Contoh juga
</td>
</tr>
<tr>
<td align="center">
Contoh
</td>
<td align="center">
Contoh juga
</td>
</tr>
</table>


hasilnya seperti ini :

Contoh	Contoh juga
Contoh	Contoh juga

Jika tabelnya ingin di beri warna, tinggal tambahkan kode bgcolor="kode warna". contoh :
<table width="300" border="1" bgcolor="black">
<tr bgcolor="green">
<td align="center">
Contoh
</td>
<td align="center">
Contoh juga
</td>
<tr bgcolor="yellow">
<tr>
<td align="center">
Contoh
</td>
<td align="center">
Contoh juga
</td>
</tr>
</table>

hasilnya seperti ini :

Contoh	Contoh juga
Contoh	Contoh juga

Sekarang saya beri contoh terakhir (sedikit lebih serius) dengan mengunakan fungsi caption serta TH (table header). Misalkan saya ingin membuat sebuah tabel data dari nama-nama teknisi. Data-data yang ingin di buatkan tabel, misalkan seperti ini :

Tabel 1.1

Data Teknisi
No.	Nama
1.	Ardi Wijaya
2.	Yusuf
3.	Ntob

Kode yang di pakai bisa seperti ini :

<table align="left" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Data Teknisi</th>
</tr>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Ardi Wijaya</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>Yusuf</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>Ntob</td>
</tr>
</table>

Hasilnya kira-kira seperti ini :

Tabel 1.1

Data Teknisi
No.	Nama
1.	Ardi Wijaya
2.	Yusuf
3.	Ntob

Dan jika menurut Anda garis tepi mengganggu pemandangan, Anda bisa menghilangkannya dengan mengganti nilai dalam blogger menjadi 0 (nol). Contoh:

<table align="left" border="0" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Data Teknisi</th>
</tr>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Ardi Wijaya</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>Yusuf</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>Ntob</td>
</tr>
</table>

Hasilnya kira-kira seperti ini :

Tabel 1.1

Data Teknisi
No.	Nama
1.	Ardi Wijaya
2.	Yusuf
3.	Ntob

Ohya, seperti yang menjadi permasalahan membuat tabel pada tutorial yang lain, yaitu tidak rapatnya jarak antar tulisan. Solusinya adalah dirapatkannya/hapus saja enter yang menghubungkan antara rumus satu dengan yang lain. Contoh:

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

diubah menjadi:

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

Memang akan membuat kita lebih sulit tapi penghapusan bisa dilakukan setelah selesai mengisi data pada tabel. Nah, seperti itulah kira-kira cara membuat tabel di blog. Agak rumit memang, tapi butuh ketelitian untuk menghasilkan tabel yang sempurna (nggak hanya tabel sih yang butuh tapi semua juga butuh ketelitian, hehe :D ). Oke, semoga bermanfaat bagi kita semua.

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di die-silver.blogspot.com

Gunakan Tombol berikut untuk menyimpan halaman :
Cara Membuat Tabel Pada Blog
menjadi format PDF dan lebih maksimal jika terdapat kesalahan koneksi atau yang lainnya.

..::Artikel Menarik Lainnya::..

Trik Blog

• Masalah Pada Kotak Komentar
• Memberi Penomoran Pada Daftar yang Ditulis
• Editor Baru untuk Posting di Blogspot
• Mengganti Tulisan Read More dengan Gambar
• Cara Mengembalikan Blog yang Terhapus
• Cara Setting Domain Berbayar di Blogspot Tanpa Hosting
• Cara Membuat Status YM Sendiri
• Cara Membuat Read More Menggunakan Span-id
• Cara Memasang Emoticon di Atas Kotak Komentar
• Hosting Gratis 000webhost.com Mengalami Problem
• Cara Membuat Spoiler di Blog
• Cara Memasang Gadget Online Visitor
• Cara Berkomentar yang Baik dan Benar
• Membuat Menu Dropdown Dan Variasinya
• Pasang Alert di Blog Sebagai Pesan Penutup
• Cara Memodifikasi Tulisan PAda Blog
• Cara Membuat Daftar Isi Pada Blog
• Mempercantik Tampilan Judul Posting pada Label
• Membuat Huruf Posting Bergaya Koran
• Cara Pasang Statistik dan Tracker
• Cara Menampilkan Recent Comments
• Cara menghilangkan Tang dan Obeng
• Memodifikasi Tampilan Artikel Berlangganan Feedburner
• Memasang Widget Artikel Terkait/Related Post pada Blog