Blog Tabel

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/seleksiMenu 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 C D 1 C1 D1 2 C2 D2 3 C3 D3 Jumlah C123 D123 Total CD123

   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
	C	D
1	C1	D1
2	C2	D2
3	C3	D3
Jumlah	C123	D123
Total	CD123

<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>