Membuat tabel html berwarna dapat kita buat dengan menggunakan CSS (Cascading Style Sheets). CSS berfungsi untuk membuat style pada setiap elemen html baik untuk layout, gambar, teks, maupun tabel. Ibaratnya membuat webiste dengan html adalah sama dengan kita membangun sebuah struktur bangunan rumah dan CSS adalah bagian untuk membuat bangunan tersebut lebih indah dan menarik.
Kali ini kelasprogrammer.com akan membahas mengenai hal sederhana terkhusus bagi pemula yang sedang belajar pemrograman web statis untuk membuat efek warna pada tabel, namun kita tidak akan membuat style nya sendiri, cukup kita ambil dari style CSS yang disediakan gratis oleh W3 Schools.
Baca juga : Cara membuat tabel di bootstrap
W3 Schools adalah website untuk belajar programming yang cukup saya rekomendasikan. W3 Schools menyediakan framework CSS responsive dan modern yang dikembangan dan dapat digunakan oleh siapa saja. Penggunaannya pun cukup mudah kita hanya perlu load css nya dari halaman website kita (dari bagian <head>) lalu kemudian kita hanya tinggal menggunakannya dengan cara memanggil class-class yang ingin digunakan pada setiap elemen html.
Cara Menggunakan W3.CSS
Terdapat dua cara untuk menggunakan w3.css. Cara yang pertama kita bisa langsung load melalui CDN (syaratnya komputer harus terkoneksi internet) seperti berikut:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> Atau bisa juga kalian langsung mendownload file css nya lalu save di drive komputer kalian
Jika Tombol download tidak dapat diklik, refresh kembali halaman browser kamu.
Simpan file w3.css yang barusan kalian download didalam sebuah folder yang sama dengan file html yang akan kita buatkan nanti. Sehingga nantinya kalian langsung bisa load css dengan metode external css dari dalam tag <head> seperti berikut:
<link rel="stylesheet" href="w3.css"> Membuat Tabel Berwarna dengan W3.CSS
Untuk membuat tabel html berwarna kita bisa menggunakan class w3-table diikuti pada tag <tr> untuk heading tabel di beri nama class untuk warna tabelnya. Ada banyak warna yang bisa kita gunakan, Berikut ini adalah listnya:
jika kita ingin memberikan warna pada heading tabel maka kita hanya perlu menambahkan atribut class lalu masukan nilainya w3-nama_color contoh jika saya ingin menggunakan warna Deep Orange maka nilai dari atribut classnya adalah w3-deep-orange.
Contoh
Perhatikan Contoh Dibawah ini, Saya ingin membuat tabel dengan heading berwarna deep-orange. Buat di text editor seperti notepad++ lalu simpan dengan nama w3-tabel.html Kemudian buka di browser.
Mohon diperhatikan pada contoh ini saya load file CSS nya dari internet ya, jika kalian mendownload dan load dari driver kalian maka sesuaikan pada sintak bagian ini <link rel=”stylesheet” href=””>
<!DOCTYPE html>
<html>
<head>
<title>Membuat Tabel Berwarna dengan W3.CSS</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<table class="w3-table">
<thead>
<tr class="w3-deep-orange">
<th>Nama</th>
<th>Usia</th>
<th>Alamat</th>
</tr>
</thead>
<tr>
<td>Dimas</td>
<td>25 Tahun</td>
<td>Jl Sudirman 47</td>
</tr>
<tr>
<td>Marcel</td>
<td>27 Tahun</td>
<td>Jl Sultan Agung 34</td>
</tr>
</table>
</html>Jika dijalankan di aplikasi browser kalian, maka akan tampil seperti berikut
Contoh lain misalnya saya ingin mengganti dengan warna indigo, maka nilai dari atribut class yang saya gunakan adalah ‘w3-indigo’
Yang terpenting disini kalian harus memahami penggunaan nama warna pada setiap classnya. Untuk informasi lebih lengkap silahkan kalian baca di W3 Color.
Kesimpulan
Dari artikel kali ini mengenai cara membuat tabel html berwarna, kita telah belajar dengan mudah membuat warna di html tanpa perlu membuat style css nya sendiri. Kita hanya tinggal menggunakan style css yang telah disediakan secara gratis lewat framework css dari w3 CSS. sebetulnya bukan hanya untuk warna tabel saja, tetapi pengaturan lainnya sepeti efek hover, striped, border juga disediakan di framework css ini. Namun tidak saya bahas disini jika kalian ingin mempelajarinya silahkan klik disini. Sekian dulu ya pembahasan sederhana kali ini, semoga bermanfaat buat kalian semuanya, sampai jumpa!