#0000FF
|
#FF0000
|
#00FF00
|
#CCCCCC
|
#FFFF00
|
#00FFFF
|
#0099FF
|
#FF33CC
|
#CCFF33
|
#666666
|
#FFCC00
|
#000066
|
#000011
|
||
Tabel Sederhana dan Berwarna Untuk Postingan Blog
|
||
Bagi para webmaster yang sudah melanglang-buana sekian lama di dunia
per-website-an dan per-blog-an pasti sudah pernah merasakan memposting sebuah
tabel di website/blog. Ada yang sudah sangat mahir sehingga dengan lincah dan cepatnya
mengetikkan kode-kode html untuk membuat tabel dengan berbagai kreasi. Tapi
mungkin bagi yang baru belajar masih sedikit bingung. Seperti saya, yang sudah
agak lupa bagaimana kode-kode html untuk membuat tabel.
Ini adalah contoh kode html untuk tabel dengan 2 kolom dan 1 baris dengan tebal border 1 pixel.
<table border=”1″>
<tr>
<td></td><td></td>
</tr>
</table>
Untuk membuat baris baru, kita tinggal menuliskan kode <tr></tr>. Kalau sudah, di dalam baris tersebut kita isi tabel data yang kodenya <td></td>, maka akan jadi satu kolom, untuk menambah kolom kedua tinggal ditulis kode <td></td> lagi masih di dalam kode <tr></tr> tadi. Kalau sudah, tampilan kode2 di atas pada browser kurang lebih akan seperti ini :
Terlihat lucu bukan? tabel itu harus berisi teks, kalau tidak maka tampilannya ya seperti itu.
Kita lihat tampilannya setelah diisi teks :
<table border=”1″>
<tr>
<td>kolom pertama</td><td>kolom kedua</td>
</tr>
</table>
kalau kode2 ini dibaca akan tampil :
kolom pertama
|
kolom kedua
|
Lebar kolom pada tabel itu akan menyesuaikan dengan panjang tulisannya. Untuk supaya tabel terlihat rapi, kita perlu mengatur lebar kolom(column width)
Kode tadi kita tambahkan :
<table border=”1″ width=”100%”>
<tr>
<td width=”30%”>kolom pertama</td><td>kolom
kedua</td>
</tr>
</table>
maka kurang lebih hasilnya akan seperti ini ,
kolom pertama
|
kolom kedua
|
Untuk membuat beberapa baris lagi di bawahnya, tinggal tambahkan kode <tr></tr> tadi setelah kode </tr> terakhir sehingga baris yang baru akan berada di bawahnya. Seperti ini,
<table border=”1″ width=”100%”>
<tr>
<td width=”30%”>kolom pertama</td>
<td>kolom kedua</td>
</tr>
<tr>
<td width=”30%”>kolom pertama</td>
<td>kolom kedua</td>
</tr>
</table>
<td width=”30%”>kolom pertama</td>
<td>kolom kedua</td>
</tr>
<tr>
<td width=”30%”>kolom pertama</td>
<td>kolom kedua</td>
</tr>
</table>
hasilnya,
kolom pertama
|
kolom kedua
|
kolom pertama
|
kolom kedua
|
Sebenarnya masih banyak kostumisasi tabel supaya tabel bisa tampil lebih menarik seperti membuat background, menyisipkan gambar, membuat bingkai, dll. Tapi ini baru dasarnya saja. Kalau Anda tertarik mempelajari HTML lebih dalam silakan kunjungi HTMLisEasy.com untuk bahasa Inggris atau klik Di sini untuk yang berbahasa Indonesia. Selamat belajar!
Resensi : http://blogdedi.wordpress.com/tips/membuat-tabel-di-posting-blog/
Membuat Warna Background Tabel
Buat yang baru aja kenal sama HTML saya shering sedikit tentang cara membuat background warna didalam table.
Berikut contoh penulisannya:
<table width="200"
border="1">
<tr><td
bgcolor="#0000FF"> #0000FF</td><td
bgcolor="#FF0000"> #FF0000</td><td
bgcolor="#00FF00"> #00FF00</td></tr>
<tr><td
bgcolor="#CCCCCC"> #CCCCCC</td><td
bgcolor="#FFFF00"> #FFFF00</td><td
bgcolor="#00FFFF"> #00FFFF</td></tr>
<tr><td
bgcolor="#0099FF"> #0099FF</td><td
bgcolor="#FF33CC"> #FF33CC</td><td
bgcolor="#CCFF33"> #CCFF33</td></tr>
<tr><td
bgcolor="#666666"> #666666</td><td
bgcolor="#FFCC00"> #FFCC00</td><td
bgcolor="#000066"> #000066</td></tr>
<tr><td colspan="3"
bgcolor="#000011"></td></tr>
<tr><td colspan="3"
align="center"> #000011</td></tr>
<tr><td colspan="3"
align="center"> Beberapa contoh
warna dengan menggunakan Kode HTML </td></tr>
</table>
Hasilnya seperti ini:
#0000FF
|
#FF0000
|
#00FF00
|
#CCCCCC
|
#FFFF00
|
#00FFFF
|
#0099FF
|
#FF33CC
|
#CCFF33
|
#666666
|
#FFCC00
|
#000066
|
#000011
|
||
Beberapa
contoh warna dengan menggunakan Kode HTML
|
||
Untuk mendapatkan code warna HTML lengkap anda
bisa menggunakan software dreamweaver
Semoga dapat membantu bagi anda yang baru saja mengenal kode html.
Semoga dapat membantu bagi anda yang baru saja mengenal kode html.
