Tag Archive: tabel


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

Iklan

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