Jumat, 14 September 2012
Cara Membuat Tabel Di Blog
Do you like this story?
Panduan Blogger untuk blogger pemula.Panduan blogger yang akan membahas,menjelaskan serta membantu sobat blogger semua tentang " Cara Membuat Tabel Di Blog ".Membuat
table di blog sebenarnya sudah banyak blogger yang membahasnya.Namun
dalam kesempatan ini,akoe akan meneruskan informasi tersebut.Dan untuk sobat blogger yang memerlukan dan membutuhkan caranya,silahkan baca terus artikel ini sampai tuntas.
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">
<tbody>
<tr><td>1.</td><td>Agus</td></tr>
<tr><td>2.</td><td>Imam</td></tr>
<tr><td>3.</td><td>Iwan</td></tr>
<tr><td>4.</td><td>Dinda</td></tr>
</tbody>
</table>
Keterangan
- Setiap pembuatan table harus dimulai dengan tag <table> dan diakhiri dengan tag <table>
- 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 <tr> dan diakhiri dengan tag </tr>
- Tag <td> (table data) digunakan untuk mengisikan data pada setiap cell dan harus ditutup dengan tag </td>
Dari contoh di atas hasilnya akan menjadi seperti di bawah ini.
| 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">
<tbody>
<tr><td>1.</td><td>Agus</td></tr>
<tr><td>2.</td><td>Imam</td></tr>
<tr><td>3.</td><td>Iwan</td></tr>
<tr><td>4.</td><td>Dinda</td></tr>
</tbody>
</table>
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">
<tbody>
<tr><td>1.</td><td>Agus</td></tr>
<tr><td>2.</td><td>Imam</td></tr>
<tr><td>3.</td><td>Iwan</td></tr>
<tr><td>4.</td><td>Dinda</td></tr>
</tbody>
</table>
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.
<table border="1" cellpadding="5" cellspacing="1">
<tbody>
<tr><th>No.</th><th>Nama Teman</th></tr>
<tr><td>1.</td><td>Agus</td></tr>
<tr><td>2.</td><td>Imam</td></tr>
<tr><td>3.</td><td>Iwan</td></tr>
<tr><td>4.</td><td>Dinda</td></tr>
</tbody>
</table>
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">
<tbody>
<tr><th>No.</th><th>Nama Teman</th></tr>
<tr><td>1.</td><td>Agus</td></tr>
<tr><td>2.</td><td>Imam</td></tr>
<tr><td>3.</td><td>Iwan</td></tr>
<tr><td>4.</td><td>Dinda</td></tr>
</tbody>
</table>
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.
<table border="1" cellpadding="5" cellspacing="1">
<tbody>
<tr height=”10”><th witdh="45">No.</th><th width="155"> Nama Teman</th></tr>
<tr><td>1.</td><td>Agus</td></tr>
<tr><td>2.</td><td>Imam</td></tr>
<tr><td>3.</td><td>Iwan</td></tr>
<tr><td>4.</td><td>Dinda</td></tr>
</tbody>
</table>
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.
<table border="1">
<tbody>
<tr><td>1.</td><td>Agus</td></tr>
<tr><td>2.</td><td> </td></tr>
<tr><td>3.</td><td>Iwan</td></tr>
<tr><td>4.</td><td>Dinda</td></tr>
</tbody>
</table>
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.
<table
border="1" cellpadding="1" cellspacing="1"
height="90"><tbody><tr height="30"><th
witdh="45">No.</th><th width="155"> Nama
Teman</th></tr><tr><td>1.</td><td>Agus</td></tr><tr><td>2.</td><td>Imam</td></tr><tr><td>3.</td><td>Iwan</td></tr><tr><td>4.</td><td>Dinda</td></tr></tbody></table>
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!!
This post was written by: Franklin Manuel
Franklin Manuel is a professional blogger, web designer and front end web developer. Follow him on Twitter
Langganan:
Posting Komentar (Atom)
0 Responses to “Cara Membuat Tabel Di Blog”
Posting Komentar