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

<td align="center" valign=”top”>Rata Atas (Top)

<td align="center" valign=”middle”>Teks Rata Tengah

<td align="center" valign=”bottom”>Teks Rata Bawah (bottom)

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.

Daftar Blog

1.	<a href="http://tips-trik-blog.blogspot.com/“>Tips dan Trik Blog
2.	<a href="http://onoid.blogspot.com/“>Tips dan Trik Komputer
3.	<a href="http://clixsense2007.blogspot.com/“>Bisnis internet
4.	<a href="http://tips-net.blogspot.com/“>Tips Trik Internet

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.

Peringkat	Pasangan	Jumlah Suara	Prosentase
1	<img src="http://www.geocities.com/yono_pati/sby.gif” /><img src="http://www.geocities.com/yono_pati/boediono.gif” />	11.658.098	61,66%
2	<img src="http://www.geocities.com/yono_pati/mega.gif” /><img src="http://www.geocities.com/yono_pati/prabowo.gif” />	5.402.076	28,57%
3	<img src="http://www.geocities.com/yono_pati/jk.gif” /><img src="http://www.geocities.com/yono_pati/wiranto.gif” />	1.847.958	9,77%

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

Masih Seputar Tips Pembuatan Tabel (bag.3)

Postingan kali ini masih membahas seputar pembuatan tabel dalam blog. Sebelumnya, Tips dan Trik Blog telah membahasnya, masing-masing bagian pertama dan bagian kedua. Pada postingan kali ini, kita akan membahas tentang cara mengatur letak table, tentang pemberian judul tabel, dan juga pembuatan table di dalam table. Jika tertarik, silakan ikuti tipsnya bersama Tips dan Trik Blog berikut ini.

MENGATUR LETAK TABEL

Secara default, table akan terletak di bagian kiri layar. Jika menginginkan, kita dapat meletakkan table pada bagian tengah layar atau bagian kiri layar, perintahnya menggunakan atribut

dan

.

Aplikasinya seperti di bawah ini. Pada contoh ini kita ingin meletakkan table pada bagian tengah layar.

<table border=”1″ cellpadding=”5″ cellspacing=”1″>

No. Nama Teman

1. Agus

2. Imam

3. Iwan

4. Dinda

Hasilnya table akan berada di tengah-tengah layar, seperti di bawah ini.

No.	Nama Teman
1.	Agus
2.	Imam
3.	Iwan
4.	Dinda

Jika ingin meletakkan table pada sisi kanan layar, kita tinggal mengganti “center” dengan “right”.

MEMBERI JUDUL TABEL

Untuk memberi judul table, kita menggunakan atribut

dan

. Contohnya seperti di bawah ini.

Tabel I

No.	Nama Teman
1.	Agus
2.	Imam
3.	Iwan
4.	Dinda

Hasilnya seperti di bawah ini.

Tabel I

No.	Nama Teman
1.	Agus
2.	Imam
3.	Iwan
4.	Dinda

TABEL DI DALAM TABEL

Jika menginginkan, kita dapat membuat table kecil di dalam table yang lebih besar. Contoh aplikasinya seperti di bawah ini.

Ini table di dalam tabel

Hasilnya seperti di bawah ini.

Ini table di dalam tabel

Sepertinya, karena sudah larut malam, untuk postingan kali ini, saya cukupkan sekian dahulu dan Insya Allah akan kita lanjutkan pada postingan mendatang.

Bersambung ke Pembuatan Tabel Bagian Keempat.

Good Luck!!

Baca juga yang ini.

Pembuatan Tabel Bagian Pertama
Pembuatan Tabel Bagian Kedua
Pembuatan Tabel Bagian Ketiga
Pembuatan Tabel Bagian Keempat

Tips Membuat Tabel Bagian Dua

Postingan ini merupakan kelanjutan dari postingan sebelumnya tentang pembuatan tabel dalam blog. Pada postingan yang kedua ini, Tips dan Trik Blog masih akan membicarakan seputar pembuatan tabel terutama yang berhubungan dengan pembuatan merger cells (penggabungan beberapa cell) juga kustomasi warna teks dan background pada tabel. Jika masih membutuhkannya, silakan ikuti tipsnya berikut ini.

MENGGABUNGKAN BEBERAPA CELL (MERGER CELLS)

Ketika membuat tabel, kita mungkin menginginkan penggabungan beberapa cell (merger cells) pada bagian kepala baris atau juga pada bagian kepala kolom sedemikian rupa tampilan tabel menjadi lebih variatif dan tentunya menjadikan tabel lebih mudah dipahami oleh pengunjung. Untuk penggabungan beberapa baris cell, kita menggunakan atribut rowspan dan untuk penggabungan beberapa kolom cell, kita menggunakan atribut colspan.

Contoh aplikasinya rowspan dan colspan adalah seperti di bawah ini.

<td colspan=”3″>Menu Hari Ini<td rowspan=”4″>Minuman

Es Jeruk	Rp. 1.500,-
Es Teh	Rp. 1.500,-
Es Soda	Rp. 4.000,-
Es Kelapa	Rp. 4.500,-
Makanan	Nasi Pecel	Rp. 3.000,-
	Nasi Soto	Rp. 5.000,-
	Nasi Rawon	Rp. 5.500,-

Hasilnya menjadi seperti di bawah ini.

Menu Hari Ini
Minuman	Es Jeruk	Rp. 1.500,-
	Es Teh	Rp. 1.500,-
	Es Soda	Rp. 4.000,-
	Es Kelapa	Rp. 4.500,-
Makanan	Nasi Pecel	Rp. 3.000,-
	Nasi Soto	Rp. 5.000,-
	Nasi Rawon	Rp. 5.500,-

Jika kita mendapati hasil tabel yang tidak rapi atau terdapat gap di antara border-bordernya maka seperti yang pernah Tips Trik Blog sampaikan pada postingan yang lalu, kita harus menghilangkan line break antar baris, pada mode “Edit HTML” kemudian rapatkan semua kode html sedemikian rupa sehingga tidak ada ada spasi dan line break yang memisahkan antar semua kode tersebut. Lebih jelasnya silakan lihat pada postingan yang lalu di bagian bawah.

WARNA BORDER DAN BACKGROUND TABEL

Untuk membuat lebih terlihat menarik, kita dapat memberikan warna baik pada border maupun pada backround tabel.

Contoh aplikasinya seperti di bawah ini.

<table border="4" bordercolor=”#0B610B” bgcolor=”#BEF781″ cellpadding=”2″ cellspacing=”0″ width=”400″>

Menu Hari Ini Minuman Es Jeruk Rp. 1.500,- Es Teh Rp. 1.500,- Es Soda Rp. 4.000,- Es Kelapa Rp. 4.500,- Makanan Nasi Pecel Rp. 3.000,- Nasi Soto Rp. 5.000,- Nasi Rawon Rp. 5.500,-

Keterangan

Kita dapat mengganti warna border dan background sesuai dengan selera masing-masing, dengan cara mengganti kode warna pada atribut bordercolor dan atribut background dan ntuk mengetahui kode warna, silakan berkunjung di sini.

Hasilnya seperti di bawah ini di mana warna border menjadi hijau tua dan warna background menjadi hijau muda.

Menu Hari Ini
Minuman	Es Jeruk	Rp. 1.500,-
	Es Teh	Rp. 1.500,-
	Es Soda	Rp. 4.000,-
	Es Kelapa	Rp. 4.500,-
Makanan	Nasi Pecel	Rp. 3.000,-
	Nasi Soto	Rp. 5.000,-
	Nasi Rawon	Rp. 5.500,-

Kita juga dapat mengkustomasi masing-masing baris cell dengan warna yang berbeda, dengan cara menyisipkan pada tag ataupun .

Aplikasinya seperti di bawah ini.

<tr bgcolor=”#48e219″>

<td rowspan="4" bgcolor=”#7dc368″>Minuman

<td bgcolor=”#00cf58″>Es Jeruk

<td bgcolor=”#b7f66f”>Es Teh<td bgcolor=”#00b30b”>Es Soda<td bgcolor=”#007d01″>Es Kelapa

Menu Hari Ini

Rp. 1.500,-

Rp. 1.500,-

Rp. 4.000,-

Rp. 4.500,-

Hasilnya seperti di bawah ini. Silakan diganti sendiri warnanya, ini hanya contoh saja.

Menu Hari Ini
Minuman	Es Jeruk	Rp. 1.500,-
	Es Teh	Rp. 1.500,-
	Es Soda	Rp. 4.000,-
	Es Kelapa	Rp. 4.500,-

PENGATURAN PERATAAN TEKS PADA CELL

Secara default, perataan teks pada cell adalah left (rata kiri) namun jika menginginkan kita dapat melakukan pengaturan sesuai selera sehingga tabel akan menjadi lebih estetis.

Contoh aplikasinya seperti di bawah ini.

<tr align=”center”>

<td rowspan="4" align=”center”>Minuman

Menu Hari Ini
Es Jeruk	Rp. 1.500,-
Es Teh	Rp. 1.500,-
Es Soda	Rp. 4.000,-
Es Kelapa	Rp. 4.500,-

Hasilnya seperti di bawah ini di mana teks “Menu Hari Ini” dan juga “Minuman” telah menjadi rata tengah sehingga terlihat lebih estetis.

Menu Hari Ini
Minuman	Es Jeruk	Rp. 1.500,-
	Es Teh	Rp. 1.500,-
	Es Soda	Rp. 4.000,-
	Es Kelapa	Rp. 4.500,-

WARNA FONT ATAU TEKS

Jika menginginkan kita dapat mengubah warna sesuai dengan selera masing-masing, dengan cara menambahkan atribut warna dengan format “style=”color:rgb(R,G,B)” (tanpa tanda petik). Untuk melihat kode warna RGB, dapat dilihat di sini.

Aplikasinya seperti di bawah ini.

<tr style=”color: rgb(255, 102, 0);” align=”center”>

<td rowspan="4" style=”color: rgb(0, 102, 0);” align=”center”>Minuman

Menu Hari Ini
Es Jeruk	Rp. 1.500,-
Es Teh	Rp. 1.500,-
Es Soda	Rp. 4.000,-
Es Kelapa	Rp. 4.500,-

Hasilnya seperti di bawah ini di mana warna teks “Menu Hari Ini” dan “Minuman” telah berubah menjadi warna seperti yang kita inginkan.

Menu Hari Ini
Minuman	Es Jeruk	Rp. 1.500,-
	Es Teh	Rp. 1.500,-
	Es Soda	Rp. 4.000,-
	Es Kelapa	Rp. 4.500,-

Pada postingan kali ini, kiranya sampai di sini dahulu, Insya Allah postingan tentang pembuatan tabel ini akan kita lanjutkan pada postingan berikutnya.

Terima kasih atas atensinya dan semoga bermanfaat!!

Bersambung ke Pembuatan Tabel Bagian Ketiga

Harus dibaca yang ini.

Cara Membuat Tabel Bag. Pertama
Cara Pembuatan Tabel Bag. Kedua
Cara Pembuatan Tabel Bag. Ketiga
Cara Pembuatan Tabel Bag. Keempat

Cara Membuat Tabel Dalam Blog

Cara Membuat Tabel Dalam Blog. Sebenarnya sudah banyak rekan blogger yang membahas tema tersebut atau bahkan boleh katakan tema seperti ini sudah basi, namun perkenankan Tips dan Trik Blog untuk tetap “nekad” mempostingnya, siapa tahu masih bermanfaat terutama bagi rekan-rekan blogger pendatang baru.. Yang membutuhkan, silakan untuk membaca tipsnya berikut ini.

Tabel dapat untuk menampilkan data berupa teks, angka-angka, gambar, atau link menjadi tersusun dan tertata rapi sehingga akan memudahkan para pembaca untuk memahaminya. Tabel ini dapat ditempatkan di mana saja dalam blog, di side bar, di footer, atau di dalam postingan.

TABEL DASAR

Format dasar table adalah seperti ini.

<table border=”1″>

1. Agus

2. Imam

3. Iwan

4. Dinda

Keterangan

• Setiap pembuatan table harus dimulai dengan tag
  dan diakhiri dengan tag
  Border digunakan untuk menentukan ketebalan border (garis) yang dapat diubah sesuai kebutuhan, semakin besar nilainya maka bordernya akan semakin tebal, jika mengisikan dengan angka nol maka akan menjadi tabel yang tidak bergaris (berborder).
  Setiap baris harus diawali dengan tag
  
  dan diakhiri dengan tag
  Tag

  Dari contoh di atas hasilnya akan menjadi seperti di bawah ini.

  (table data) digunakan untuk mengisikan data pada setiap cell dan harus ditutup dengan tag

  1.	Agus
  2.	Imam
  3.	Iwan
  4.	Dinda

  ATRIBUT CELLPADDING DAN CELLSPACING

  Cellpadding digunakan untuk menentukan jarak (spasi kosong) antara data (contents) dengan garis (border) yang mengelilinya dinyatakan dengan satuan pixel, semakin besar nilainya maka jaraknya semakin lebar.
  Cellspacing digunakan untuk pengaturan jarak antara masing-masing cell, semakin besar nilainya maka semakin lebar jaraknya.

  Contoh aplikasi cellpadding, seperti di bawah ini.

  <table border="1" cellpadding=”10″>

  1. Agus
  2. Imam
  3. Iwan
  4. Dinda

  Hasilnya akan menjadi seperti di bawah ini, di mana jarak (spasi) antara content (data) dengan border lebih lebar.

  1.	Agus
  2.	Imam
  3.	Iwan
  4.	Dinda

  Contoh aplikasi Cellspacing, seperti di bawah ini.

  <table border="1" cellspacing=”5″>

  1. Agus
  2. Imam
  3. Iwan
  4. Dinda

  Hasilnya seperti di bawah ini, di mana jarak masing-masing cell lebih lebar dibandingkan dengan table standar.

  1.	Agus
  2.	Imam
  3.	Iwan
  4.	Dinda

  TABEL DENGAN HEADER

  Untuk membuat table dengan header (judul baris), kita harus menggunakan tag dan diakhiri dengan . Dengan tag tersebut teksnya ditampilkan dengan cetakan tebal (bold) sehingga akan membedakan dengan teks data yang lainnya.

  Contoh aplikasi Tabel Dengan Header seperti di bawah ini.

  No.	Nama Teman
  1.	Agus
  2.	Imam
  3.	Iwan
  4.	Dinda

  Hasilnya seperti di bawah ini.

  No.	Nama Teman
  1.	Agus
  2.	Imam
  3.	Iwan
  4.	Dinda

  PENGATURAN LEBAR & TINGGI TABEL

  Untuk melakukan pengaturan lebar table digunakan atribut width yang memiliki nilai dengan satuan pixel atau presentase dari lebar browser/induk tabelnya. Selain untuk melakukan pengaturan lebar table, witdh juga dapat digunakan dengan menentukan lebar tiap-tiap kolom.
  Untuk melakukan pengaturan tinggi table digunakan atribut height yang memiliki nilai dengan satuan pixel atau presentase dari induk tabelnya. Selain untuk melakukan pengaturan tinggi table, height juga dapat digunakan dengan menentukan tinggi baris.

  Contoh aplikasi untuk menentukan lebar dan tinggi table adalah seperti di bawah ini.

  <table border="1" cellpadding="5" cellspacing="1" width=”200″ height=”150″>

  No. Nama Teman
  1. Agus
  2. Imam
  3. Iwan
  4. Dinda

  Hasilnya seperti di bawah ini.

  No.	Nama Teman
  1.	Agus
  2.	Imam
  3.	Iwan
  4.	Dinda

  Contoh aplikasi untuk pengaturan lebar dan tinggi baris kolom adalah seperti di bawah ini.

  <tr height=”10”><th witdh=”45″>No.

  <th width=”155″> Nama Teman

  1.	Agus
  2.	Imam
  3.	Iwan
  4.	Dinda

  Hasilnya seperti di bawah ini.

  No.	Nama Teman
  1.	Agus
  2.	Imam
  3.	Iwan
  4.	Dinda

  DATA CELL KOSONG

  Ada beberapa browser yang tidak dapat menampilkan table dengan baik dengan beberapa data kosong. Untuk itu, kita gunakan   untuk menggantikan cell dengan data yang kosong.

  Aplikasinya seperti di bawah ini.

  1.	Agus
  2.
  3.	Iwan
  4.	Dinda

  Hasilnya seperti di bawah ini.

  1.	Agus
  2.
  3.	Iwan
  4.	Dinda

  MENGHILANGKAN SPASI

  Mungkin kita akan mendapati table dengan tampilan ada spasi sehingga table terlihat tidak rapi dan acak-acakan, contohnya seperti screenshot di bawah ini.

  
  Solusinya adalah menghilangkan line break antar baris sehingga menjadi seperti di bawah ini. Caranya, klik mode “Edit HTML” kemudian rapatkan semua kode html tersebut sehingga seperti di bawah ini.

  No.	Nama Teman
  1.	Agus
  2.	Imam
  3.	Iwan
  4.	Dinda

  Sebenarnya postingan tentang pembuatan table ini masih banyak yang harus kita bahas namun karena sudah capek mengetiknya, maka kita akan lanjutkan di postingan selanjutnya.

  Terima kasih!!

  Bersambung,…ke Pembuatan Tabel Bagian Kedua

  Baca juga yang ini.
  
  Pembuatan Tabel Bagian Pertama
  Pembuatan Tabel Bagian Kedua
  Pembuatan Tabel Bagian Ketiga
  Pembuatan Tabel Bagian Keempat