Selasa, 28 April 2015

Panduan Cara Membuat Tabel dengan HTML bagian II (Memberi Pewarnaan Pada Tabel)

Setelah sebelumnya saya menulis artikel tentang Cara Membuat Tabel dengan HTML, berikutnya saya akan mencoba berbagi informasi lebih lanjut tentang cara membuat tabel dengan html dengan kustomisasi pewarnaan yang lebih menarik, namun masih tergolong sederhana. seperti, bagaimana membuat warna pada baris tabel, membuat cellpadding dan juga cellspacing pada tabel.
Berikut contoh sintaknya :

<table bgcolor='black' cellpadding='5' cellspacing='1' width='300px'>
<tr bgcolor='yellow'><td align='center'>Nama</td><td align='center'>Jenis Kelamin</td></tr>
<tr bgcolor='white'><td>Doni</td><td>Pria</td></tr>
<tr bgcolor='white'><td>Jono</td><td>Pria</td></tr>
<tr bgcolor='white'><td>Susi</td><td>Wanita</td></tr>
<tr bgcolor='white'><td>Yanti</td><td>Wanita</td></tr>
</table>

Akan menghasilkan tabel seperti berikut ini :

NamaJenis Kelamin
DoniPria
JonoPria
SusiWanita
YantiWanita

Penjelasan :
  • Teks yang berwarna biru merupakan properties tambahan yang akan dijelaskan
  • bgcolor='black' maksudnya adalah tabel yang kita buat akan diberikan warna hitam pada backgroundnya secara keseluruhan.
  • cellpadding='5' maksudnya memberikan jarak/padding pada <td>/cell, sehingga terlihat lebih longgar setiap cellnya.
  • cellspacing='1' maksudnya, kita memberikan jarak antara cell yg satu dengan cell yang lainnya (terlihat dari garis batas hitam antar cell)
  • width='300' maksudnya memberikan panjang tabel sepanjang 300px.
  • bgcolor='yellow', memberikan warna background berwarna kuning pada satu baris tabel.
  • bgcolor='white', memberikan warna background berwarna putih pada satu baris tabel. 
  • align='center', meletakkan tulisan di center/tengah tengah cell. 
 Itulah sedikit penjelasan tentang cara memberikan pewarnaan pada tabel.
Semoga bermanfaat

    1 komentar:

    1. Thanks infonya gan..

      Bagi agan yang berminat belajar membuat website bisa dilihat di situs berikut ini Belajar Membuat Web

      BalasHapus

    Terima Kasih Telah Memberikan Komentar

    Designed By Published.. Blogger Templates