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