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

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 :
ContohContoh 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 :
ContohContoh juga
ContohContoh 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 :
ContohContoh juga
ContohContoh 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::..

12 comments:

kakve-santi July 19, 2009 at 6:33 PM  

lumayan buat nambah2 ilmu...

ini juga yang saya sedang cari2.. :D

Bayu The Maniac July 20, 2009 at 3:28 AM  

wuih ...
keren banget tuh sob ...
gue baru tau tuh ..
thanks yah infonya ...

cerita naruto July 20, 2009 at 9:45 AM  

wah mantap...
ternyata rumit juga yah buat table
rada2 binun

berita unik July 20, 2009 at 9:52 AM  

tara teng kyu yah sob dah sharing
btw..ikutan paying post yah
agak lelet nich download page-nya ^^

imam July 22, 2009 at 2:40 PM  

Luar biasa.... ini yang di cari2..... LanjutGan!!!;;)

Maliki July 22, 2009 at 2:41 PM  

Bermanfaat sekali.....

Nita July 22, 2009 at 2:42 PM  

Ijin ngopy bozz.... buat belajar.... makasih yak.... :o

Tita July 22, 2009 at 2:43 PM  

ijin nyimpen bos.....

den bagoes July 23, 2009 at 11:38 AM  

siiip bisa tambah lagi wacana gue boosss...tq

gooddell July 26, 2009 at 10:58 AM  

ajib...panjang bagt..komplet
http://gooddell.blogspot.com/

Denny July 27, 2009 at 11:57 PM  

mantab deh kalo artikel yang ini.. :)

semangat cari artikel yang keren2 pak..

radkenz September 1, 2009 at 8:55 AM  

ini nih yang gw cari... thanx bro....

Post a Comment

Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.

Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).

Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.

Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia.

Jika anda tidak punya blog/website, kolom URL boleh dikosongi atau dapat juga diganti dengan email anda.

Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan). Jika komentar anda berupa pertanyaan, maka jika anda menggunakan opsi ini tidak akan ditanggapi. Lebih baik anda gunakan pilihan dibawah ini:

Jika ingin komentar anda tidak dipublikasi, silahkan klik disini.

Terima kasih, komentar anda sangat berarti untuk die-silver.blogspot.com
:a: :b: :c: :d: :e: :f: :g:
:h: :i: :j: :k: :l: :m: :n:

newer post older post home

About Me

My Photo
ardi33
Sangat bercita-cita menjadi seorang webmaster yang selalu dapat memberikan yang terbaik dan bermanfaat kepada semua orang, dan sekarang sedang dalam tahap pembelajaran yang tak kenal lelah!!!
View my complete profile

Stats

Blog Rank:Powered by  MyPagerank.Net
Traffic Rank:Alexa Certified Site Stats for http://die-silver.blogspot.com
Online Visitor:
Blogger Template by Ardi33.Web.id.
Originally Die Silver Template Edited by TemplateZone