Langkah untuk menampilkan berbagai warna pilihan pada tabel?

Tutorial kali ini akan membahas bagaimana cara memberi warna pada tabel di HTML baik menggunakan CSS atau tidak dengan cara yang sangat mudah. Tabel merupakan komponen HTML yang sangat sering digunakan karena konsep table html sangat frienldy dalam membentuk sebuah desain halaman HTML. Bahkan hampir desain website menggunakan tabel, begitu juga dengan aplikasi berbasis web. Oleh karena itu menguasai tabel HTML dapat dikategorikan sebagai kebutuhan dasar dalam website, termasuk cara memberi warna pada tabel html ini.

Untuk menambah warna tabel HTML sebenarnya cara yang cukup mudah, namun ada beberapa kasus tertentu yang memang perlu dibahas dalam tutorial. Berikut adalah beberapa penjelasan dari beberapa cara yang dapat kita gunakan untuk memberi background warna tabel, warna garis tabel, atau kolom tabel.

Tutorial bagaimana cara memberi warna pada tabel html atau menambahkan warna pada tabel html ini kami bahas menjadi beberapa model tabel. Sehingga akan lebih mudah untuk di pahami oleh blogger pemula, dan dapat dengan cepat untuk di praktekan.

Cara Memberi Warna Pada Tabel HTML

Berikut adalah penjelasan nya tentang cara memberi warna pada tabel html dan contoh kasus dalam desain tabel html.

Sebelumnya kita perhatikan terlebih dulu contoh kode tabel HTML di bawah ini;

   


   

Warna di Tabel HTML

   
       
           
           
       
       
           
           
       
       
           
           
       
   

No#	Daftar Tutorial
1	Menambahkan warna backgroud dengan CSS
2	Membuat tabel responsive

Jika tag kode HTML di atas dijalankan maka akan mengasilkan tampilan tabel html tanpa tambahan warna seperti gambar berikut;

Bagaimana jika kemudian kita akan memberi warna pada tabel html? kita dapat memanupulasi data atau bentuk tabel menggunakan atribut tabel pada HTML. Atribut tabel pada HTML untuk memberikan warna background adalah bgcolor, sementara untuk membuat tulisan di dalam tabel berada di tengah atribut yang digunakan adalah align.

Selanjutnya dari kode html tabel di atas, kita akan menambabhkan warna header table, disini kita menggunakan atribut background, berikut kodenya;

   


   

Warna di Tabel HTML

   
       
           
           
       
       
           
           
       
       
           
           
       
   

No#	Daftar Tutorial
1	Menambahkan warna backgroud dengan CSS
2	Membuat tabel responsive

Perhatikan kode diatas, disana terdapat atribut bgcolor="#FFA800", dimana #FFA800 adalah warna hexa dari warna asli orange, kita dapat merubah dengan warna html seperti red, yellow, green, skyblue atau warna hexa yang lain. Kita juga dapat membuat warna tabel html pada kolom atau pada baris sesuai dengan kebutuhan. Kemudian ada juga terdapat atribut align="center",  dimana atribut ini adalah atribut yang digunakan untuk membuat text di dalam tabel menjadi rata tengah.

Berikut tampilan tabel html jika kode html yang telah diberi atribut di atas di jalankan;

Sampai pada tahap ini tutorial cara memberi warna pada tabel html tanpa CSS sepertinya sudah dapat dipahami. Selanjutnya adalah dengan menggunakan CSS untuk mewarnai tabel, sehingga tutorial akan beralih ke cara memberi warna pada tabel html dengan css. Kode css disini kita embed langsung ke dalam kode html. Berikut adalah kode css nya:

Letakan kode css di atas tepat di antara tag , dan berikut adalah kode warna tabel html lengkap yang sudah diembed / di tambahkan kode css tersebut;

   
   


   

Warna di Tabel HTML

   
       
           
           
       
       
           
           
       
       
           
           
       
   

No#	Daftar Tutorial
1	Menambahkan warna backgroud dengan CSS
2	Membuat tabel responsive

Jika di kode html pada tutorial cara memberi warna pada tabel html di atas kita jalankan maka akan menampilkan desain tabel html seperti berikut;

Cara Memberi Warna Pada Tabel HTML

Demikian penjelasan dan contoh kode tabel html pada tutorial

cara memberi warna pada tabel html

yang dapat kami bahas. Silahakan dikembangkan kembali lagi menjadi lebih profesional, tentang warna tabel html ini. Sehingga desain tabel html dapat menjadi lebih menarik. Semoga dapat membantu.