Home» html» Cara Memberi Warna Tabel Pada HTML

Cara Memberi Warna Tabel Pada HTML

Posted by Ashari

Suatu tampilan tabel akan terlihat kaku, tidak enak dipandang mata dan terlihat formal apabila tidak disertai dengan warna pada setiap kolom-kolom tabel tersebut. Tabel sendiri mempunyai fungsi untuk menampilkan data pada basis data atau database. Tentu saja untuk menampilkan data dalam tabel terlihat menarik, rapih dan mudah dibaca, maka tabel tersebut perlu diberikan warna. Lalu bagaimana cara mewarnai tabel tersebut. Nah, dalam tutorial kali ini Saya akan coba membahas sedikit Cara Memberi Warna Tabel Pada HTML.

Memberi Warna Pada Tabel

HTML telah menyediakan atribut untuk mengatur dan memberi warna pada tabel, yaitu dengan menggunkan atribut bgcolor.  Atribut bgcolor dapat digunakan untuk tag tabel (tag table) maupun untuk tag kolom (tag th, tag td, maupun tag col).

Apabila atribut bgcolor dipasang pada tag <table>, maka atribut ini berfungsi untuk memberikan warna keseluruhan tabel tersebut. Jika atribut ini dipasang pada tag <th> atau <td> maka akan berfungsi untuk memberi warna pada kolom. Contoh penggunaan atribut bgcolor pada tag <table> adalah sebagai berikut :

<table bgcolor=”warna_tabel” border=”0”>


Untuk lebih jelasnya bisa Anda praktekan pada kode html dibawah ini.

 
<!doctype html>
<html>
<head>
<title>Memberi Warna Tabel pada HTML</title>
</head>
<body>
<h2>Contoh Tabel Warna</h2>
<table bgcolor="green" border="1">      
      <tr><td>Nama</td>             
          <td>:</td>            
          <td>Cristiano Ronaldo</td>
      </tr>      
      <tr><td>TTL</td>
          <td>:</td>   
          <td>Surabaya, 28 Oktober 1995</td>              
      </tr>      
          <tr><td>Alamat</td>             
          <td>:</td>           
          <td>Jl. Buntu No.16 Bandung</td>      
     </tr> 
</table> 
</body>
</html>
Simpan kode html diatas, kemudian buka di browser maka tampilannya nampak seperti berikut.


memberi warna tabel pada html

Jika kita perhatikan pada tampilan gambar diatas, warna tabel akan mnyesuaikan dengan warna yang telah diatur dalam atribut bgcolor pada tag <table> yaitu dengan warna green (hijau). Ada beberapa contoh warna pada html seperti black (hitam), red (merah), green (hijau), yellow (kuning), blue (biru), violet (ungu), silver (abu-abu) dan lain-lain.

Baca Juga : Cara Mengatur Ukuran Tabel Pada HTML

Selain itu kita juga bisa menggunakan kode heksadesimal yang diterjemahkan ke dalam warna RGB. Ada 6 karakter untuk setiap warna yang diberikan.
Misalnya, merah murni = ff0000, hijau murni = 00FF00, dan murni biru = 0000FF. Dalam hex, 00 = nol, dan ff = 255, nilai maksimum untuk definisi warna RGB. Jika jumlahnya semakin tinggi, semakin cerah warnanya. Misalnya, ffffff = putih murni, sedangkan 000000 = hitam murni. Semua warna yang dibuat, adalah hasil dari berbagai kombinasi di atas. Untuk mengetahui kode-kode warna anda bisa lihat di sini atau anda juga bisa memilih kode warna di Photoshop. 

Cara Memberi Warna Pada Kolom Tabel HTML

Setelah kita selesai mengatur warna pada keseluruhan tabel, maka warna kolom pun akan menyesuaikan dengan warna pada tabel. Kita dapat memberi warna pada kolom sesuai dengan keinginan kita. Untuk mengatur dan memberi warna pada kolom tidak berbeda jauh dengan mengatur warna pada keseluruhan tabel.

Untuk mengatur lebar kolom tabel secara manual, maka harus digunakan atribut bgcolor pada tag kolom (tag th, td, maupun tag col). Contoh penggunaannya adalah sebagai berikut.


<td bgcolor=”warna_tabel”>


Berikut adalah contoh tabel yang telah diatur warna kolomnya.

 <!doctype html>
<html>
<head>
<title>Memberi Warna Kolom Pada Tabel HTML</title>
</head>
<body>
<center><h2>Contoh Kolom Warna</h2>
<table border="1">
      <tr><td bgcolor="green">Nama</td>
          <td bgcolor="green">:</td>
          <td bgcolor="green">Cristiano Ronaldo</td>
      </tr>
      <tr><td bgcolor="silver">TTL</td>
          <td bgcolor="silver">:</td>
          <td bgcolor="silver">Surabaya, 28 Oktober 1995</td>
      </tr>
      <tr><td bgcolor="yellow">Alamat</td>
          <td bgcolor="yellow">:</td>
          <td bgcolor="yellow">Jl. Buntu No.16 Bandung</td>
      </tr>
</table>
</body>
</html>  

Simpan kode HTML diatas dengan nama file tabel_warna.html maka tampilannya akan nampak sebagai berikut.

memberi warna tabel pada html


Jika kita perhatikan pada gambar diatas, kolom-kolom pada tabel tersebut memiliki warna yang berbeda untuk tiap kolomnya sesuai dengan pengisian jenis warna di tag <td>. 

Demikianlah untuk pembahasan tentang Cara Memberi Warna Tabel Pada HTML. Jika ada yang kurang paham silakan untuk menanyakan pada kolom komentar dan jika tulisan ini bermanfaat silahkan Anda bagikan melalui tombol share. Terima kasih.

Demo Blog NJW V2 Updated at: 22:01:00
Ari Ibnu Ashari

7 komentar: