#under_header{ margin:10px 0; padding:1%; width:98%; }

Rabu, 11 Juli 2012

Membuat Tabel Kode


Kegunaan dan manfaat menu tabel ialah untuk membuat susunan HTML menjadi rapi, baik teks maupun gambar di dalam posting maupun di dalam sidebar.
Dasar kode tabel itu sebenarnya sangat simple yakni

<table>
<tr>
<td>
isi table
</td>
</tr>
</table>

maka akan menghasilkan tampilan seperti di bawah ini
isi table

Nah. . Disini belum terlihat bentuk tabelnya, terlihat seperti tulisan biasa. Bukan maksud penulis untuk berbelit-belit dalam membuat tabel, tapi penulis ingin membuat anda mengerti tentang kegunaan kode tabel satu-persatu. Berikut penulis akan jelaskan atribut-atribut yang bisa di pakai di dalam membuat tabel.
  • Kode <table> = adalah kode dasar untuk membuat table.
  • width = untuk memberi kelebaran suatu tabel.
  • border = untuk memberi garis tepi pada kotak table.
  • bordercolor = untuk memberi warna border.
  • bgcolor = untuk memberi backround berwarna pada table.
  • align = untuk menempatkan posisi isi table sendiri.
  • kode <td> = untuk membuat baris baru/membuat kotak baru menyamping.
  • kode <tr> = untuk membuat baris baru/! membuat kotak baru kebawah.
  • cellpadding = untuk memberi jarak antara dinding dengan isi tabel.
  • cellspacing = untuk memberi jarak antara kotak yang satu dg kotak yang lain.
Penambahan atribut width pada table untuk memberi fungsi kelebaran kotak table. CONTOH 1:
<table border="1" width="70"> <tr><td> Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online </td></tr></table>
Hasilnya:
Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online


CONTOH 2:
<table border="1" width="130"> <tr><td> Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online </td></tr></table>
Hasilnya:
Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online

Penambahan Atribut border untuk memberi garis tepi pada kotak table. CONTOH 1:
<table border="2"> <tr><td> Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online </td></tr></table>
Hasilnya:
Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online
CONTOH 2:
<table border="20"> <tr><td> Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online </td></tr></table>
Hasilnya:
Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online
Pemberian Atribut bordercolor untuk memberi warna pada garis tepi kotak table. CONTOH 1:
<table bordercolor="#0000AA"> <tr><td> Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online </td></tr></table>
Hasilnya:
Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online
CONTOH 2:
<table bordercolor="#BB0000"> <tr><td> Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online </td></tr></table>
Hasilnya:
Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online
Untuk kode-kode warna HTML bisa di tengok pada artikel kode kode warna HTMLPemberian Atribut bgcolor untuk memberi warna background pada table. CONTOH 1:
<table bgcolor="#0000AA"> <tr><td> Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online </td></tr></table>
Hasilnya:
Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online
CONTOH 2:
<table bgcolor="#BB0000"> <tr><td> Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online </td></tr></table>
Hasilnya:
Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online
Penambahan atribut align untuk menempatkan posisi isi table, bisa di kiri, tengah dan kanan. Satuan yg bisa di pakai yakni left, center, dan right. Atribut yg satu ini akan bekerja secara maksimal jika di tempatkan pada kode ( tr ) dan pada kode ( td ), untuk lebih jelasnya perhatikan contoh-contoh berikut dan bandingkan dg contoh-contoh diatas. CONTOH 1:
<table><tr> <td align="left"> Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online </td></tr></table>
Hasilnya:
Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online
CONTOH 2:
<table><tr> <td align="center"> Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online </td></tr></table>
Hasilnya:
Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online
CONTOH 3:
<table><tr> <td align="right"> Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online </td></tr></table>
Hasilnya:
Blog tutorial, tutorial blogspot, tutorial blogger, belajar SEO, bisnis online

>selesai.............

Tidak ada komentar:

Posting Komentar