Cara Memberi Warna Tabel Web di HTML

Tutorial dasar-dasar HTML kali ini akan mengupas tentang bagaimana cara membuat tabel yang disertai bagaimana menambahkan warna pada tabel tersebut.

Kita mengetahui bahwa tabel merupakan suatu mekanisme dalam merepresentasikan data dalam bentuk tabular. Agar sebuah tabel menarik untuk dicermati dan menggugah orang lain membacanya, maka kita dapat melakukannya dengan model pemberian warna pada sebuah tabel.

Membuat Tabel Sederhana HTML

Tabel sederhana html adalah tabel yang terdiri dari baris dan kolom yang tidak memiliki warna dimana setiap kolom ataupun baris digunakan border seperti yang ditunjukkan oleh Gambar.1 dibawah ini :

tabel html
Gambar.1

Kode HTML untuk tabel seperti Gambar.1 diatas adalah 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 :

  • Tag <table> sebagai langkah awal ketika kita hendak membuat tabel di HTML.
  • Secara default, tabel HTML tidak memiliki border. Untuk membuat border, kita menambah attribute border=1. Nilai angka “1” dapat dirubah menjadi “2”,”3″ dst yang bertujuan untuk membentuk ketebalan garis bordernya.
  • Untuk mengawali pembuatan sebuah baris digunakan tag <tr>.
  • 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.

Menambah Background Warna pada Tabel HTML

Untuk menambah background warna pada tabel seperti Gambar.2 dibawah ini, kita dapat memanfaatkan atribut background-color.

background color pada tabel html
Gambar.2

Kode HTML untuk membuat tabel seperti Gambar.2 diatas adalah sebagai berikut :

<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>

Memberi Warna pada Judul Tabel HTML

Seperti yang ditunjukkan oleh Gambar.3 dibawah ini, kita hanya menambahkan warna hanya pada judul tabel. Dan karena judul tabel tersebut merupakan sebuah baris , maka kita dapat menambahkan  background-color:blue pada tag <tr> yang menjadi barisnya untuk  judul tabel tersebut.

menambah warna pada judul tabel html
Gambar.3

Kode HTML untuk menghasilkan tabel seperti Gambar.3 diatas adalah sebagai berikut :

<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

Kita pun dapat membuat tabel warna-warni pada kolom yang kita inginkan. Dalam contoh ini kita akan mengeset warna-warni pada beberapa kolom seperti Gambar.4 dibawah ini :

warna pada kolom tabel html
Gambar.4

Kode HTML untuk menghasilkan tabel seperti Gambar.4 diatas adalah sebagai berikut :

<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 Baris Tabel HTML Berwarna-warni

Jika kita ingin membuat warna antara baris satu berbeda dengan baris lain, kita cukup tambahkan background-color yang berbeda antara satu baris dengan baris lainnya seperti Gambar.5 dibawah ini :

menambah warna baris tabel html
Gambar.5

Kode HTML untuk membuat warna yang berbeda antara satu baris dengan baris yang lain pada tabel HTML adalah sebagai berikut :

<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.

Leave a Reply

Your email address will not be published. Required fields are marked *