Cara Membuat Table pada Blog Sabtu, 04 Februari 2012 amirul rozie

Click Disini Untuk Lebih Lanjut....

Cara membuat table / tabel pada blog. Blogtegal blog tutorial kembali lagi untuk anda sodara-sodara,dan pada kesempatan kali ini Blogtegal akan menulis article tentang membuat table/tabel
Apa kegunaan dari table itu sendiri di dunia blogging? Sulitkah membuat tabel itu sendiri? Pertanyan anda akan terjawab hari ini dengan lugas ha. .ha. .ha. . Lets do it!
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 seb! enarnya sangat simple yakni

<table>
<tr>
<td>
isi table itu sendiri
</td>
</tr>
</table>

maka akan menghasilkan tampilan seperti di bawah ini

isi table itu sendiri

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

Untuk contoh jelasnya bisa di lihat pada artikel tentang cara membuat table kode part.2Membuat table berisi gambar. Berikut caranya:

<table border="1" <tr><td> <img src="http://s835.photobucket.com/albums/zz280/phoonix8/Blog_Tegal.gif"/> </td></tr></table>

Hasilnya: Jika semua atribut pendukung di gabungkan semua maka hasil yg akan keliatan akan seperti berikut:

<table border="1" bordercolor="#0000aa" bgcolor="B0C4DE" width="60" <tr><td align="center"> <img src="http://s835.photobucket.com/albums/zz280/phoonix8/Blog_Tegal.gif"/> </td></tr></table>

Hasilnya: Nah untuk Atribut table td dan tr dan cellpadding dan cellspacing bisa di lanjutkan membacanya pada tutorial tentang cara membuat table kode part.2, karna atribut tersebut tersebut di gunakan untuk memvariasi tampilan tabel atau lebih tepatnya membuat sempurna tampilan tabel, yang di gunakan untuk membuat multi kotak, baik menyamping maupun ke bawah.

Oh ya sampe di sini sudah paham apa belum? Jika belum paham silahkan bertanya pada kotak komentar. Malu bertanya sesat di jalan lho