Satu Lagi Tentang Pembuatan Tabel (Bag. Empat)

Postingan ini merupakan bagian keempat dari postingan tentang pembuatan tabel yang Tips dan Trik Blog sebelumnya, yaitu bagian pertama, bagian kedua, dan bagian ketiga. Pada kesempatan kali ini, kita akan membahas tentang perataan teks (alignment), penempatan link dalam table, dan juga penempatan image pada table. Jika tertarik, silakan ikuti tipsnya berikut ini.

PERATAAN TEKS VERTIKAL

Untuk perataan teks secara horizontal telah disinggung pada bagian kedua, pada postingan kali ini kita akan membahas perataan teks vertical. Perintah untuk perataan teks vertical, terdiri dari tiga perintah, yaitu :

valign="top"
Perintah agar teks rata atas (top)

valign="middle"
Perintah agar teks rata tengah (middle)

valign="bottom"
Perintah agar teks rata bawah (bottom)

Contoh aplikasinya seperti di bawah ini. Pada contoh di bawah ini, kita akan mengkombinasikan perataan teks vertical dengan perataan teks horizontal (center), dengan menambahkan atribut align=”center”.

<table border="1" cellpadding="0" cellspacing="1" width="420" height="100">
<tbody><tr>
<td align="center" valign="top">Rata Atas (Top)</td>
<td align="center" valign="middle">Teks Rata Tengah</td>
<td align="center" valign="bottom">Teks Rata Bawah (bottom)</td></tr></tbody></table>

Hasilnya seperti di bawah ini.

Rata Atas (Top)

Teks Rata Tengah

Teks Rata Bawah (bottom)

PENEMPATAN LINK DI DALAM TABEL

Selain teks biasa, kita dapat menempatkan (memasukkan) link di dalam table.
Contoh aplikasinya seperti di bawah ini.

<table border="1" width="270" height="120">
<caption>Daftar Blog</caption>
<tbody>
<tr><td>1.</td><td><a href="http://tips-trik-blog.blogspot.com/">Tips dan Trik Blog</a></td></tr>
<tr><td>2.</td><td><a href="http://onoid.blogspot.com/">Tips dan Trik Komputer</a></td></tr>
<tr><td>3.</td><td><a href="http://clixsense2007.blogspot.com/">Bisnis internet</a></td></tr>
<tr><td>4.</td><td><a href="http://tips-net.blogspot.com/">Tips Trik Internet</a></td></tr>
</tbody>
</table>

Hasilnya seperti di bawah ini.

Daftar Blog

1.	Tips dan Trik Blog
2.	Tips dan Trik Komputer
3.	Bisnis internet
4.	Tips Trik Internet

Keterangan
Ganti URL yang berwarna merah dengan URL yang kita inginkan.


PENEMPATAN IMAGE PADA TABEL

Selain teks dan link, kita juga dapat menempatkan image pada table.

Contoh aplikasinya seperti di bawah ini.

<table border="4" cellspacing="0" width="420">
<tbody>
<tr><td align="center">Peringkat</td><td align=”center">Pasangan</td><td align=”center">Jumlah Suara</td><td align=”ccenter">Prosentase</td></tr>
<tr><td align="center">1</td><td align="center"><img src="http://www.geocities.com/yono_pati/sby.gif" /><img src="http://www.geocities.com/yono_pati/boediono.gif" /></td><td align="right">11.658.098</td><td align="right">61,66%</td></tr>
<tr><td align="center">2</td><td align="center"><img src="http://www.geocities.com/yono_pati/mega.gif" /><img src="http://www.geocities.com/yono_pati/prabowo.gif" /></td><td align="right">5.402.076</td><td align="right">28,57%</td></tr>
<tr><td align="center">3</td><td align="center"><img src="http://www.geocities.com/yono_pati/jk.gif" /><img src="http://www.geocities.com/yono_pati/wiranto.gif" /></td><td align="right">1.847.958</td><td align="right">9,77%</td></tr>
</tbody></table>

Keterangan

Yang berwarna merah adalah alamat URL image yang dapat kita ganti dengan URL image yang kita inginkan.

Hasilnya seperti di bawah ini.

Peringkat	Pasangan	Jumlah Suara	Prosentase
1		11.658.098	61,66%
2		5.402.076	28,57%
3		1.847.958	9,77%

PEMBUATAN TABEL DENGAN COPY PASTE

Sebenarnya ada cara mudah membuat table yaitu dengan cara copy paste. Kita dapat menggunakan MS WORD untuk tujuan ini.

Pertama, buatlah table yang kita inginkan dengan menggunakan MS Word. Isi data dan formatlah sesuai yang kita inginkan.

Kedua, login ke account blogger hingga masuk ke post editor (halaman pengetikan).

Ketiga, ubahlah ke mode “tulis” (compose)

Keempat, kembali ke MS Word, kemudian lakukan seleksi pada table yang telah kita buat tersebut kemudian pilih copy pada menu Edit.

Kelima, kembali ke post editor kemudian pastekan table yang telah kita buat dengan MS Word tersebut.

Keenam, pastikan tabel telah tercopy dengan baik dan sukses.

Ketujuh, terbitkan (publish) postingan tersebut dan selesai.


PEMBUATAN TABEL DENGAN TABLE GENERATOR

Selain dengan cara di atas, ada juga cara praktis lainnya yaitu dengan menggunakan bantuan HTML TABLE GENERATOR, untuk tujuan ini kita dapat mencoba layanan yang ini, yaitu http://www.quackit.com/html/html_table_generator.cfm.

Langkah-langkahnya adalah sebagai berikut.

Pertama, buka halaman http://www.quackit.com/html/html_table_generator.cfm

Kedua, lakukan kustomasi table yang diinginkan, seperti dengan mengubah “table witdh”, “background-color”, “Number Rows”, “Number Columns”, “Cellspacing”, “Cellpadding”, “Border Witdh”, “Border Color”.

Ketiga, klik button “Generate Table” dan kita dapat langsung melihat previewnya sekaligus html code table-nya yang kemudian dapat kita pastekan pada post editor.

Keempat, selesai.


Selamat Mencoba!!

Baca juga yang ini.

Tips Pembuatan Tabel Bagian Pertama
Tips Pembuatan Tabel Bagian Kedua
Tips Pembuatan Tabel Bagian Ketiga
Tips Pembuatan Tabel Bagian Keempat
Description: Satu Lagi Tentang Pembuatan Tabel (Bag. Empat) Rating: 4.5 Reviewer: Unknown - ItemReviewed: Satu Lagi Tentang Pembuatan Tabel (Bag. Empat)