Jumat, 10 April 2009

Blog Tabel

. Jumat, 10 April 2009

Membuat dan Memposting Tabel





































Yapzz… berawal dari sebuah pertanyaan singkat melalui sms dari seorang sahabat yang menanyakan tentang cara memasukkan table kedalam blog. Karena singkatnya pesan tersebut sampai sampai saya salah membacanya, yang mestinya dibaca table malah Saya baca label hehehe… dengan pdnya Saya bikinkan dia tutorial lengkap cara memasukkan label kedalam blog dan Saya tujukan kepada sahabatku tersebut via email. Walhasil Dia kecewa dengan jawaban yang saya berikan dengan mengirimkan SMS lagi, Dia bilang “Bukan Label Tapi Tabel” hahahaha...
Ssssssssssttttttttt….. Hayoo.. yang merasa silahkan Absen.. hehehe…

Sebenarnya banyak sekali tutorial cara membuat tabel dengan html, tapi sayang kebanyakan tutorial masih dirasa membinggungkan dan sulit untuk diikuti mereka yang masih awam dengan tag tag html yang disampaikan. untuk itu Saya akan mencoba memberikan langkah-langkah mudah membuat tabel dan mempostingnya kedalam blog anda. ok langsung aja dimulai

Untuk membuat tabel dengan kode html dengan mudah semudah membuat tabel di Ms. Office Word Anda bisa menggunakan program Ms. FrontPage Berikut langkah pembuatan tabel Pada Program Microsoft FrontPage yang kemudian akan kita posting kedalam blog.

  1. Buka Program Microsoft FrontPage.

    Pastikan Layout/tampilan layar adalah Normal yaitu layar editing pada FrontPage. Perhatikan gambar berikut
  2. Klik Menu Table ►Insert ►Table. Lihat gambar berikut
  3. Kemudian akan tampil dialog Insert Tabel seperti terlihat pada gambar dibawah ini
    kemudian aturlah tabel sesuai dengan kebutuhan. kemudian klik ok]]
    Keterangan :
    Rows:Menentukan Jumlah Baris
    Columns:Menentukan Jumlah Kolom
    Alignment:Posisi Horizontal, kiri, tengah, kanan
    Border Size:Ukuran Ketebalan Border
    Cell Padding:Jarak border dengan isi
    Cell Spacing:Ukuran antara sell / border
    Specify Width:Ukuran seluruh tabel(pixel/percent)
    Contoh : Row : 6, Column : 3, Align : Center, Border : 1, Width : 200 ] Pixel
    ]
  4. Menyatukan beberapa cell kolom tabel (Merge Cell / Span), Blok/sorot cell yang akan disatukan, kemudian klik kanan → klik Merge Cell. Lihat gambar berikut
  5. Menyatukan beberapa cell baris tabel (Merge Cell / Span), Blok/sorot cell yang akan disatukan, kemudian klik kanan → klik Merge Cell. Lihat gambar berikut


    Keterangan : Pengaturan tabel dapat dilakukan melalui tabel properties. klik kanan pada tabel/cell yang terseleksi (diblok/disorot) kemudian klik Table Properties Pengaturan Cell dapat dilakukan melalui Cell properties. klik kanan pada tabel/cell yang terseleksi (diblok/disorot) kemudian klik Cell Properties

  6. Memformat Tabel agar sesuai dengan kiinginan, gunakan fasilitas toolbar Tables yang dapat di aktifkan melalui menu View → Toolbars → Tables. Lihat gambar
    Untuk memberikan warna pada tabel Kita dapat menggunakan fasilitas Toolbar Fill Color pada group Toolbar Tables, lihat gambar disamping.

    Caranya : Blok/sorot/seleksi sel yang akan diberi warna, Klik Icon Fill Color pada toolbar Tables, akan tampil beberapa pilihan warna, Kita dapat memiilih warna sesuai selera dengan mengklik More Fill Color dan akan tampil

    Catatan : Selain menggunakan toolbar Tables Kita juga dapat menggunakan fasilitas Borders and Shading untuk memperindah tampilan Tabel. dibawah iniadalah penjelasan singkatnya

    Borders and Shading :
    Sebelum menggunakan fasilitas ini pastikan cell/table terlebih dahulu diBlok/sorot/seleksi
    Menu Borders berfungsi untuk pengaturan Border atau garis pemisah pada setiap cell.Menu Shading
    berfungsi untuk pengaturan latarbelakang (background) pada cell/table

    Pengisian & Format Data

    A

    B
    CD
    1C1D1
    2C2D2
    3C3D3
    JumlahC123D123
    TotalCD123
    Kita dapat mengisi data pada tabel dapat secara langsung pada Cell, dan untuk memberi warna pada data, Kita dapat menggunakan toolbar Font Color. Lihat gambar berikut :

    Caranya : Blok/sorot/seleksi Data yang akan diberi warna, Klik Icon Font Color pada group toolbar Formating, akan tampil beberapa pilihan warna, Kita dapat memiilih warna sesuai selera dengan mengklik More Fill Color dan akan tampil

Selesai sudah cara pembuatan tabel dengan frontpage sangat mudah sekali, sebenarnya sama saja cara membuat tabel di frontpage dengan di microsoft word

Nnnnaaaahh ini yang ditunggu-tunggu gimana caranya memposting tabel yang kita bikin di Ms. FrontPage kedalam blog kita, karena tidak bisa semua script yang ada di frontpage dapat kita posting kedalam blog. Berikut adalah caranya :

  1. Setelah selesai membuat tabel pada layar editing (Normal) sekarang beralih ke layar Coding dengan mengaktifkan Layar HTML yang berada diatas statusbar. Lihat gambar berikut :
  2. Carilah dan Copylah Code HTML dengan awalan <table> (biasanya terletak dibawah tag <body>) sampai dengan code yang paling akhir </tabel> biasanya terletak di atas tag </body>
  3. Login kedalam blogger kemudian buat postingan baru pastikan opsi yang terpilih adalah edit html. kemudian pastekan code html tabel yang telah anda buat dengan Ms. FrontPage kedalamnya
  4. Kemudian klik tombol PUBLISH POST dan Kita dapan melihat hasilnya dengan mengklik tombol View Blog
  5. Selesaiiiiiiii....


INI ADALAH HASIL TABEL YANG SUDAH JADI

A

B
CD
1C1D1
2C2D2
3C3D3
JumlahC123D123
TotalCD123
<table border="1" cellspacing="0" height="200" width="100%"> <tbody>
<tr>
<td width="100%" colspan="3" bgcolor="#006600" valign="middle">
<p align="center"><font size="2" color="#FFFFFF"><b>INI ADALAH
CONTOH TABEL YANG SUDAH JADI</b></font></td>
</tr>
<tr>
<td width="33%" rowspan="2" bgcolor="#009933" align="center">
<p align="center"><font color="#00FF00" size="2"><b>A</b></font></td>
<td width="67%" colspan="2" bgcolor="#009933" align="center">
<font color="#00FF00" size="2"><b>B</b></font></td>
</tr>
<tr>
<td width="33%" bgcolor="#009933" align="center">
<font color="#00FF00" size="2"><b>C</b></font></td>
<td width="34%" bgcolor="#009933" align="center">
<font color="#00FF00" size="2"><b>D</b></font></td>
</tr>
<tr>
<td width="33%" bgcolor="#99CC00" align="center">
<font color="#FF0000" size="2">1</font></td>
<td width="33%" bgcolor="#99CC00" align="center">
<font color="#FF0000" size="2">C1</font></td>
<td width="34%" bgcolor="#99CC00" align="center">
<font color="#FF0000" size="2">D1</font></td>
</tr>
<tr>
<td width="33%" bgcolor="#99CC00" align="center">
<font color="#FF0000" size="2">2</font></td>
<td width="33%" bgcolor="#99CC00" align="center">
<font color="#FF0000" size="2">C2</font></td>
<td width="34%" bgcolor="#99CC00" align="center">
<font color="#FF0000" size="2">D2</font></td>
</tr>
<tr>
<td width="33%" bgcolor="#99CC00" align="center">
<font color="#FF0000" size="2">3</font></td>
<td width="33%" bgcolor="#99CC00" align="center">
<font color="#FF0000" size="2">C3</font></td>
<td width="34%" bgcolor="#99CC00" align="center">
<font color="#FF0000" size="2">D3</font></td>
</tr>
<tr>
<td width="33%" bgcolor="#009933" align="center">
<font color="#FFFF00" size="2">Jumlah</font></td>
<td width="33%" bgcolor="#009933" align="center">
<font color="#FFFF00" size="2">C123</font></td>
<td width="34%" bgcolor="#009933" align="center">
<font color="#FFFF00" size="2">D123</font></td>
</tr>
<tr>
<td width="33%" bgcolor="#006600" align="center"><b>
<font color="#00FFFF" size="2">Total</font></b></td>
<td width="67%" bgcolor="#006600" align="center" colspan="2"><b>
<font color="#00FFFF" size="2">CD123</font></b></td>
</tr>
</tbody></table>

16 komentar:

www.katobengke.com mengatakan...

wah kena kayaknya nih aq...hehehhehheeheheh................

Anonim mengatakan...

heheheheh..................
kamu tuh yah.............
ni aq iwan...sahabat yang kamu cinggung tuh...

www.katobengke.com mengatakan...

sobat aq mau nanya kok aq baru dengar tu yang namanya microsoft front page..
bingun lagi deh aq...hehheheeh

Rojodirojo mengatakan...

Program Microsoft FrontPage itukan program bawaan microsoft office programnya super sipel semudah membuat dokumen di microsoft word.

Coba cek punya programnya gak..?? melalui
START → RUN kemudian ketikkan FRONTPG.exe → OK
Jika gak nongol Programnya artinya Bang iwan gak punya programnya.

Solusi lain utk membuat tabel bisa menggunakan jasa website html table generator yang juga banya tersedia. misalnya di alamat berikut :
http://www.quackit.com/html/html_table_generator.cfm
atau di :
http://www.code-generator.net/html/html-table-generator.cfm

www.katobengke.com mengatakan...

aku masih kagak paham...so membingungkan min harus aq praktek langsung ma kamu yah..........
heheheheh

Rojodirojo mengatakan...

Gampang kok asal mau coba aja... Bisa buat tabel di Ms. Word kan...?? kalau bisa bikin di word berarti bisa juga bikin di FrontPage.

Kalau masih bingung bikin aja tabelnya di Ms. Word trus kopas aja tabel di Ms. Word ke Ms. FrontPage kemudian Klik tampilan Layar HTML (Lihat tutorial diatas) Copy kode htmlnya.. mulai dari :
<table>Sampai dengan tag</table>Beress dehh.. :D

mastopo mengatakan...

makasih mas aku memang membutuhkan tipsnya,......lagi blajaran mas :))

Anonim mengatakan...

bisa ga, kalau bikin tabel dulu di ms word/excel, trus di-export ke ms front page? makasih

kolom koran mengatakan...

sekedar tambahan, tips ini bisa juga untuk memposting artikel bergaya kolom koran.

Sahir Aja dah! mengatakan...

Bos! kalau aku mau tanya ini,,, Boleh minta No HPx gk,? biar esok hari bisa langsung Request lewat sms ato E-mail!

Anonim mengatakan...

wahhh
thanx bangat gan

anak smp mengatakan...

habis muter-muter cari tips buat postingan tabel eh ternyata nemu disini.
thx...

Rojodirojo mengatakan...

untuk membuat table dapat dilakukan dari excel, word, dan frontpage.
untuk yang mau request postingan bisa tinggalkan pesan anda di sini.
terimakasih.

ardi mengatakan...

terima kasih tipnsya, saya masih bingung sedikit

welvashop mengatakan...

mantap boss
mapir yah
www.welvashop.co.nr

Bisnis pulsa mengatakan...

makasih banget mas broww.. artikelnya bermanfaat.

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

 
Namablogkamu is proudly powered by Blogger.com | Template by o-om.com