Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Cara Membuat Tabel di Blog

Setelah beberapa hari absen, akhirnya muncul lagi di sini. Bukannya
saya tidak bisa untuk membuat tulisan baru, cuma agak sedikit males untuk
menyentuh tut keyboard. Walaupun sedikit kurang semangat, saya paksain juga
deh buat gelitikin si keyboard. Alasan utamanya yaitu ada sedikit rasa
takut. Emang takut apaan, takut ama hantu? bukan donk! masa sudah zaman lampu neon begini
masih takut sama hantu. Takut yang saya maksud adalah takut blog ini di tinggalkan sama
para pembaca apabila kelamaan tidak saya update. Oh begitu ya! yups…. soalnya tidak bisa
di pungkiri bahwa blog ini merupakan salah satu penyumbang dana buat saya tiap bulan nya.
Ya lumayanlah… dari kedua program yang saya ikuti yaitu gabung di http://www.resepbisnis.com/?id=rohman
dan di http://www.obralplus.com/?id=rohman
ada saja rezeki yang saya dapat tanpa di duga-duga.

Intermezo nya tidak usah lama-lama, nanti yang baca malah kabur lagi. Baiklah, sekarang saya membicarakan
topik utama yang mau saya ulas yaitu cara membuat tabel di blog/website. Pertanyaan ini di ajukan
oleh salah satu sobat yang saya lupa namanya karena sudah agak lama melalui buku tamu, dan saya juga sedikit
males membuka dokumen-dokumen lama di buku tamu. Bagi yang merasa menanyakan soal ini, silahkan absen saja
di kotak komentar.

Untuk membuat tabel di blog, bisa kita lakukan dengan kode HTML yang khusus untuk membuat tabel tentunya.
Perintah yang di pakai adalah <table> ..... </table>. Di dalam tabel,
kita bisa bisa beberapa atribut di dalamnya, antara lain yaitu:

  • bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor=”kode warna”.
  • 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” .
  • cellpadding : untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel. Penempatan kodenya : cellpadding=”pixel” .
  • border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan kodenya : boeder=”pixel” .
  • cellspacing
  • : untuk mengatur jarak antara sel. Penempatan kodenya : cellspacing=”pixel” .

  • height : untuk mengatur tinggi tabel. penempatan kodenya : height=”pixel”|”%” .
  • height : untuk mengatur lebal tabel. Penempatan kodenya : height=”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 :

  • 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” .
  • valign : untuk mengatur posisi vertikal. penempatan kodenya : valign=”top”|”middle”|”bottom”
  • 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:

  • 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” .
  • valign : untuk mengatur posisi vertikal. penempatan kodenya : valign=”top”|”middle”|”bottom”
  • bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor=”kode warna”.
  • colspan : untuk mengatur kolom. Penempatan kodenya : colspan=”nomor” .
  • 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 elemn untuk membuat kolom. atribut yang bisa di pakai antara lain :

  • 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” .
  • valign : untuk mengatur posisi vertikal. penempatan kodenya : valign=”top”|”middle”|”bottom”
  • bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor=”kode warna”.
  • colspan : untuk mengatur kolom. Penempatan kodenya : colspan=”nomor” .
  • 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 denk

</td>

</tr>
</table>

Hasilnya akan seperti ini :

Contoh

Contoh juga denk

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 denk

</td>

</tr>


<tr>
<td align="center">

Contoh

</td>

<td align="center">

Contoh juga denk

</td>
</tr>

</table>

hasilnya seperti ini :

Contoh

Contoh juga denk
Contoh Contoh juga denk

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 denk

</td>

<tr bgcolor="yellow">

<tr>
<td align="center">

Contoh

</td>

<td align="center">

Contoh juga denk

</td>
</tr>
</table>

hasilnya seperti ini :

Contoh

Contoh juga denk
Contoh Contoh juga denk

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. Juned
2. Jaka kelana
3. Ibro

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>Juned</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>jaka kelana</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>Ibro</td>
</tr>
</table>


Hasilnya kira-kira seperti ini :

Tabel 1.1
Data Teknisi
No. Nama
1. Juned
2. jaka kelana
3. Ibro

 

 

 

Selain untuk menempatkan tulisan, sebuah tabel pun banyak di gunakan
untuk menempatkan gambar agar terlihat lebih rapih. Contoh :


<table width="300" border="1" cellpadding="20">
<tr>
<td align="center">

<a href="http://www.resepbisnis.com/?id=Rohman&quot; target="new"><img height="58" src="http://24rohman.googlepages.com/resepbisnis.gif&quot; alt="mau pinter membuat blog atau website? klik saja di sini"/></a>

</td>
<td align="center">

<a href="http://www.obralplus.com/?id=rohman"><img src="http://24rohman.googlepages.com/aniobral.gif&quot; alt="mau software murah tapi sangat berguna? klik saja di sini"/></a>

</td>
</tr>
<tr>
<td align="center">

<a href="http://www.obralplus.com/?id=rohman"><img src="http://24rohman.googlepages.com/aniobral.gif&quot; alt="mau software murah tapi sangat berguna? klik saja di sini"></a>

</td>
<td align="center">

<a href="http://www.resepbisnis.com/?id=Rohman&quot; target="new"><img height="58" src="http://24rohman.googlepages.com/resepbisnis.gif&quot; alt="mau pinter membuat blog atau website? klik saja di sini"/></a>

</td>
</tr>
</table>

Hasilnya akan seperti ini :

mau software murah tapi sangat berguna? klik saja di sini

 

jika sobat beranggapan bahwa garis tabel menggangu pemandangan, maka kita bisa mensiasatinya dengan
cara menghilangkan garisnya yaitu nilai borde rnya kita buat 0 (nol).

contoh :


<table width="300" border="0" cellpadding="20">
<tr>
<td align="center">

<a href="http://www.resepbisnis.com/?id=Rohman&quot; target="new"><img height="58" src="http://24rohman.googlepages.com/resepbisnis.gif&quot; alt="mau pinter membuat blog atau website? klik saja di sini"/></a>

</td>
<td align="center">

<a href="http://www.obralplus.com/?id=rohman"><img src="http://24rohman.googlepages.com/aniobral.gif&quot; alt="mau software murah tapi sangat berguna? klik saja di sini"/></a>

</td>
</tr>
<tr>
<td align="center">

<a href="http://www.obralplus.com/?id=rohman"><img src="http://24rohman.googlepages.com/aniobral.gif&quot; alt="mau software murah tapi sangat berguna? klik saja di sini"></a>

</td>
<td align="center">

<a href="http://www.resepbisnis.com/?id=Rohman&quot; target="new"><img height="58" src="http://24rohman.googlepages.com/resepbisnis.gif&quot; alt="mau pinter membuat blog atau website? klik saja di sini"/></a>

</td>
</tr>
</table>

Hasilnya akan seperti ini :

mau software murah tapi sangat berguna? klik saja di sini

 

Bagaimana hasilnya yang terakhir ini, mata kita dapat di tipu bukan?

Catatn kecil saja. Karena kode diatas merupakan kode HTML, maka pada saat posting harus pada posisi Edit HTML
jangan pada posisi Compose. Apabila ingin di simpan di sidebar, pilih yang untuk HTML/javaScript.

Rasanya cukup deh untuk kali ini, silahkan sobat buat variasi-variasi lainnya dari fungsi tabel ini.

Selamat bereksperimen !

26 November 2007 - Posted by | blog tutorial, Tutorial HTML

21 Komentar »

  1. Thanks atas infonya ya🙂

    Komentar oleh afrid fransisco | 26 November 2007 | Balas

  2. kang rohman supaya warna background / header tidak 1 warna gimana.kayak punya kang rohman itu di atas. kabita yeuh… nuhun ach sateuacanna

    Komentar oleh Saefulloh Yudiana,ST | 26 November 2007 | Balas

  3. blog saya applied paling banyak table. setakat ini saya belum pernah temui mana-mana blog yang meletakkan table paling banyak melainkan blog saya. http://rawatankesihatan.blogspot.com

    maklumat saudara rohman amat berguna, tetapi saya bikin table ini dengan mudah menggunakan perisian website maker seperti NVU. kita bina table, kemudian copy HTML code dan paste. Amat mudah, insya Allah

    Komentar oleh DR. ARIFFAIZAL BIN MOHD NOR ARIFFIN | 26 November 2007 | Balas

  4. Banyak jalan menuju Roma. jika saya biasa menggunakan software Dreamweaver untuk mengolah HTML, Javascript, ataupun css sangat mudah menggunakan software tersebut.

    Komentar oleh rohman | 26 November 2007 | Balas

  5. sbenarnya pertanyaan sy tdk ada hubungannya dg postingan ini. aku mau pasang daftar posting terbaru, aku coba pake RSS Feed tp kalo sy masukkan misal http://tokonjo.blogspot.com/atom.xml konfirmasinya tidak valid. Adakah cara lain untuk menampilkan sperti Post Terbaru di bagian bawah blognya mas Rohman. Mohon petunjuk, terima kasih sebelumnya

    Komentar oleh Syarief | 27 November 2007 | Balas

  6. Mas, Evan dah pake haloscan. tapi recent comment-nya kok tak terbatas ya? gmana cara membatasinya, biar gak terlihat semua. tks

    Komentar oleh Evan | 27 November 2007 | Balas

  7. manya sih ga usah pakai haloscan lagi kalau ada tampilan liaave your comment seperti ini….usul saya gimana mas romhman posting tentang bikin leave comment seperti ini…makasih mas…?

    Komentar oleh Free Web Content | 30 November 2007 | Balas

  8. wah kang thanks bangat deh atas tutorrial2nya. Aku mendapat banyak sekali pengetahuan mengenai webblog sekaligus membuka wawasan saya tentang blog itu. saya mau nanya nih kang?.saya kan baru membuat blog dan masih terus di add,tapi yang saya bingung gimana cara mempublikasikan blog yang sudah saya buat,agar terpampang di search engine google, atau apa ja lah.Mohon bantuannya y.thanks before.ni alamat blog saya http://www.chandra-amq.blogspot.com

    Komentar oleh Imanuel Chandra Lefta | 24 Desember 2007 | Balas

  9. @imanuel : untuk cara daftar search engine, silahkan baca panduan no 64 pada bagian bawah blog ini. klik saja link nya. tips dari saya, apabila ingin lebih cepat mencari artikel, pakai search engine (mesin pencari) yang ada di atas.

    Komentar oleh rohman | 24 Desember 2007 | Balas

  10. bagus banget, tapi tabel saya sering muncul jauh banget ke bawah judul. gimana tuh soluinya…thanks ya mas

    Komentar oleh mahendra | 18 Maret 2008 | Balas

  11. kang rohman yang baek..
    ane udah buat tabel, trus border udah ane kosongin (nilai 0) tapi tetap aja ada jarak antar sel. kasih solusi ya. trims sebelumnya.🙂

    Komentar oleh hakim | 22 Maret 2008 | Balas

  12. mo nanya sedikit neh ma, bisa ngak kita menggatikan gifnya klo bisa kasih tau donk caranya
    thanks

    Komentar oleh Anonymous | 2 April 2008 | Balas

  13. nha…kang rohman..ini dia yang saya cari-cari…makasyih ya…

    Komentar oleh Ranggalawe Istifajar Rullinda | 13 April 2008 | Balas

  14. kang mau nanya nie seputar pembuatan tabel…ko klo di blog ku ada tambahan code (tbody)..(/tbody)
    trus aku hapus code itu n aku simpen muncul lagi code itu…knapa kang ya…?klo mo menghilangkan code tsb gmna kang….thx . bls di email saia ya kang ekhan.gitar1stindo@gmail.com
    atau bls lewat coment ini juga..

    Komentar oleh ekhan | 1 Mei 2008 | Balas

  15. Assalamualaikum Kang..
    Kalau pasang tabel kok selalu terlalu ke bawah ya kang..mohon di jelasin dong…
    jazakumullohu katsiro…
    Wassalamualakum

    Komentar oleh PUMITA | 28 Mei 2008 | Balas

  16. mas yang mengenai resepbisnis.com apa itu bener..?tolong kasih masukan..

    Komentar oleh Sandy1fm | 27 Juni 2008 | Balas

  17. thanks mas…
    informasinya bagus banget and nambah banget tuh pengetahuan kita

    selalu memposting hal-hal yang manrik lagi mas….

    Komentar oleh HARYANTO | 12 Juli 2008 | Balas

  18. terima kasih, kang…
    perlu dicoba, nih

    Komentar oleh andi | 31 Juli 2008 | Balas

  19. kang aku minta tolong banget nih.
    blog saya layoutnya lagi kacau tapi aku ga tau harus ngerubah apanya.
    gini masalahnya kang,kalo blog nampilkan 1 atau 2 posting sih ga apa2,tapi klo lebih dri itu malah postingan yng ke tiga masuk ke sidaber dan parahnya profil,arsip blog dan semuanya yng tadinya dipinggir jadi kebawah.
    blog saya http://www.firman89.blogspot.com,tolong teli blog saya trus kasih tau solusinya.
    hatur nuhun kang.

    Komentar oleh firman | 5 Agustus 2008 | Balas

  20. wah ilmu baru buat saya! thanx ya kang rohman!🙂

    Komentar oleh bisnisonline | 28 Agustus 2008 | Balas

  21. waduh kok malah bingung yaaa…… ada gak kang formula HTML yang siap pake maksudnya tinggal copy paste getoo….itu lho bikin tabel visitor yang setiap orang masuk ke blog langsung masuk hitungan pengunjung ke berapa gitu…thank’s. this my blog http://donnisetiawan.blogspot.com

    Komentar oleh Donni | 21 November 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: