Cara Menambah Warna pada Tabel HTML
Tabel merupakan sebuah cara untuk menyajikan data dalam bentuk tabular dimana terdiri dari baris dan kolom. Oleh karena itu, penggunaan tabel sering digunakan terutama yang menggunakan banyak data.
Cara membuat tabel sederhana pada HTML
Tabel sederhana yang kita maksud disini adalah sebuah tabel yang terdiri dari beberapa baris dan kolom serta judul seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
 |
| Gambar.1 |
Dari Gambar.1 dapat dibuat tabel dalam script HTML sebagai berikut:
Dari script diatas, dapat ditarik kesimpulan :<!DOCTYPE html> <html> <head> </head> <body> <table border="1"> <tr> <th>No</th> <th>Nama</th> <th>NIM</th> <th>Jenis Kelamin</th> </tr> <tr> <td>1</td> <td>Andi Fraseria</td> <td>220120102001</td> <td>Pria</td> </tr> <tr> <td>2</td> <td>Rudi Hariadi</td> <td>220120102002</td> <td>Pria</td> </tr> <tr> <td>3</td> <td>Doni Mikarel</td> <td>220120102003</td> <td>Pria</td> </tr> </table> </body> </html>
- Pembuatan tabel didahului oleh tag <table>
- attribute border=1 menyatakan pembuatan tabel dengan memiliki border. Karena secara default, sebuah table tidak memiliki border.
- Tag <tr> berfungsi sebagai pembuat baris
- Tag <th> bertujuan untuk membuat judul. Jika dalam satu baris <tr> dibuat diinisialisasi <th> sebnyak 4, maka dalam satu baris akan terbuat 4 kolom dengan masing-masing memiliki judul.
- Tag <td> untuk mengisi data pada masing-masing baris. Jika dalam satu baris<td> dibuat 4 <td>, maka dalam satu baris akan terbuat 4 kolom(cell) dimana tiap cell akan diisi datanya seperti script diatas.
Membuat Tabel HTML Berwarna
Untuk membuat warna pada tabel seperti Gambar.3, kita tambahkan atribut background-color.
 |
| Gambar.2 |
Script HTML tabel seperti Gambar.2 :
<table border="1" style="background-color: blue;"> <tr> <th>No</th> <th>Nama</th> <th>NIM</th> <th>Jenis Kelamin</th> </tr> <tr> <td>1</td> <td>Andi Fraseria</td> <td>220120102001</td> <td>Pria</td> </tr> <tr> <td>2</td> <td>Rudi Hariadi</td> <td>220120102002</td> <td>Pria</td> </tr> <tr> <td>3</td> <td>Doni Mikarel</td> <td>220120102003</td> <td>Pria</td> </tr> </table>
Membuat Kolom Tabel Judul HTML Berwarna
Misalkan kita akan menambah warna hanya pada judul kolom (cell) seperti Gambar.3 dibawah ini, maka cukup kita tambahkan background-color:blue pada tag <tr> yang menjadi barisnya untuk kolom-kolom judul.
Gambar.3
Script HTML-nya :
<table border="1" >
<tr style="background-color: blue;">
<th>No</th>
<th>Nama</th>
<th>NIM</th>
<th>Jenis Kelamin</th>
</tr>
<tr>
<td>1</td>
<td>Andi Fraseria</td>
<td>220120102001</td>
<td>Pria</td>
</tr>
<tr>
<td>2</td>
<td>Rudi Hariadi</td>
<td>220120102002</td>
<td>Pria</td>
</tr>
<tr>
<td>3</td>
<td>Doni Mikarel</td>
<td>220120102003</td>
<td>Pria</td>
</tr>
</table>
Membuat Kolom Tabel HTML Berwarna-warni
Dalam contoh ini kita akan membuat kolom antara satu baris maupun berbeda baris akan memiliki warna-warna yang berbeda seperti yang ditunjukkan oleh Gambar.4 dibawah ini :
 |
| Gambar.4 |
Jika kita perhatikan untuk baris judul , semua kolom memiliki warna yang sama yaitu biru, oleh karena kita cukup tambahkan background-color:blue pada tag <tr>. Sedangkan pada baris kedua : kolom "1", kolom "Andi Fraseria", kolom "220120102001" dan kolom "Pria" memiliki warna yang berbeda. Oleh karena itu kita tambahkan background-color:nama_warna pada masing-masing tag <td>.
Berikut ini script html untuk membuat tabel seperti Gambar.4 :
<table border="1" align="center"> <tr style="background-color: blue;"> <th>No</th> <th>Nama</th> <th>NIM</th> <th>Jenis Kelamin</th> </tr> <tr style="background-color: green;"> <td style="background-color: aqua;">1</td> <td>Andi Fraseria</td> <td style="background-color: purple;">220120102001</td> <td>Pria</td> </tr> <tr > <td>2</td> <td style="background-color: aqua;">Rudi Hariadi</td> <td>220120102002</td> <td>Pria</td> </tr> <tr> <td style="background-color: red;">3</td> <td style="background-color: gray;">Doni Mikarel</td> <td style="background-color: purple;">220120102003</td> <td style="background-color: brown;">Pria</td> </tr> </table>
Membuat Tabel HTML Berwarna-warni
Pada penjelasan diatas, kita membuat tabel berwarna untuk keseluruhan baris dan warna untuk baris judul. Sekarang kita akan membedakan warna antara satu baris dengan baris dibawahnya. Tinggal ditambahkan background-color yang berbeda antara satu baris dengan baris lainnya seperti Gambar.5 dibawah ini : |
| Gambar.4 |
<table border="1" > <tr style="background-color: blue;"> <th>No</th> <th>Nama</th> <th>NIM</th> <th>Jenis Kelamin</th> </tr> <tr style="background-color: green;"> <td>1</td> <td>Andi Fraseria</td> <td>220120102001</td> <td>Pria</td> </tr> <tr style="background-color: aqua;"> <td>2</td> <td>Rudi Hariadi</td> <td>220120102002</td> <td>Pria</td> </tr> <tr style="background-color: red;"> <td>3</td> <td>Doni Mikarel</td> <td>220120102003</td> <td>Pria</td> </tr> </table>
Catatan :
Pada versi html 5 kebawah, untuk mewarnai tabel digunakan attribute bgcolor:nama_warna. Namun pada versi HTML 5 dan versi diatasnya digunakan background-color:nama_warna.
Untuk memberi warna pada tabel, terdapat tiga opsi yaitu :
| Nilai | Keterangan |
|---|---|
| nama_warna | Mendefinisikan background color dengan nama warna (seperti "red") |
| nomor_hex | Mendefinisikan background color dengan kode hex (seperti "#ff0000") |
| nomor_rgb | Mendefinisikan background color dengan kode rgb (seperti "rgb(255,0,0)") |
