--> Skip to main content

Cara Menambah Warna pada Tabel HTML

Dalam tutorial dasar-dasar HTML edisi ini, kita akan mempelajari tentang cara membuat tabel pada kode 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:
<!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>
Dari script diatas, dapat ditarik kesimpulan :
  • 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
Script HTML untuk 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 :
NilaiKeterangan
nama_warnaMendefinisikan background color dengan nama warna (seperti "red")
nomor_hexMendefinisikan background color dengan kode hex (seperti "#ff0000")
nomor_rgbMendefinisikan background color dengan kode rgb (seperti "rgb(255,0,0)")

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar