Dari tabel diatas kita akan membuat warna header tabel, disini kita menggunakan atribut background, berikut kodenya
<table border='1' width='400'><tr bgcolor='#EE6868' align='center'>
<td>No</td>
<td>URL</td>
</tr>
<tr bgcolor='yellow'>
<td>1</td>
<td>Suckittrees.Com</td>
</tr>
<tr>
<td>2</td>
<td>demos.Suckittrees.Com</td>
</tr>
</table>
Perhatikan kode di atas, terdapat atribut bgcolor='#EE6868', dimana #EE6868 adalah warna hexa dari pink, bisa diganti dengan warna html seperti red, yellow, green< /a> atau warna hexa lainnya. Anda juga bisa membuat warna meja pada kolom atau baris sesuai dengan keinginan Anda. Selain itu, ada juga atribut align='center' , ini adalah atribut yang digunakan untuk membuat teks pada tabel rata di tengah.
Sehingga akan menampilkan tabel dalam bentuk
Mengerti di sini. ?????? . tahukah anda sebenarnya kita bisa menggunakan CSS untuk mewarnai tabel, untuk membuatnya dengan CSS anda bisa membaca artikel Membuat Tabel Zebra dengan CSS, Nah disini kita akan membuat warna tabelnya juga, berikut kode cssnya
<style type="text/css">table {
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #3A3A3A;
border-collapse: collapse;
}
table th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #FFA6A6;
background-color: #D56A6A;
color: #ffffff;
}
table tr:hover td {
cursor: pointer;
}
table tr:nth-child(even) td{
background-color: #F7CFCF;
}
table td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #FFA6A6;
background-color: #ffffff;
}
</style>_
Sehat. ketika kita terapkan pada tabel di atas, berikut adalah kode lengkap untuk membuat warna tabel dengan CSS;
Tutorial kali ini akan membahas cara mewarnai tabel di HTML baik menggunakan CSS maupun tidak dengan cara yang sangat sederhana. Tabel merupakan komponen HTML yang sangat sering digunakan karena konsep tabel HTML sangat friendly dalam membuat desain halaman HTML. Bahkan, hampir semua desain website menggunakan tabel, begitu juga dengan aplikasi berbasis web. Oleh karena itu, penguasaan tabel HTML dapat dikategorikan sebagai kebutuhan dasar dalam website, termasuk cara mewarnai tabel HTML
Untuk menambahkan warna pada tabel HTML sebenarnya caranya cukup mudah, namun ada beberapa kasus khusus yang perlu dibahas pada tutorial. Berikut beberapa penjelasan beberapa cara yang bisa kita gunakan untuk memberi warna background tabel, warna garis tabel, atau kolom tabel
Tutorial cara memberi warna pada tabel html atau menambahkan warna pada tabel html ini kita bahas menjadi beberapa model tabel. Sehingga akan lebih mudah dipahami oleh para blogger pemula, dan bisa cepat dipraktekkan
Cara Memberi Warna pada Tabel HTML
Berikut penjelasan tentang cara memberi warna pada tabel html dan contoh kasus dalam desain tabel htmlPertama, mari kita lihat contoh kode tabel HTML di bawah ini;
Tutorial Cara Mewarnai Tabel HTMLWarna dalam Tabel HTML
Tidak# Daftar Tutorial
1 Menambahkan warna backgroud dengan CSS
2 Membuat tabel responsif
Jika tag kode HTML diatas dijalankan maka akan menghasilkan tampilan tabel html tanpa tambahan warna seperti gambar berikut;
Bagaimana jika kemudian kita akan mewarnai tabel html? . Atribut tabel pada HTML untuk memberi warna background adalah bgcolor, sedangkan untuk membuat tulisan pada tabel di tengah atribut yang digunakan adalah align
Selanjutnya dari kode html tabel diatas kita akan menambahkan warna pada header tabel, disini kita menggunakan atribut background, berikut kodenya;
Tutorial Cara Mewarnai Tabel HTMLWarna dalam Tabel HTML
Tidak# Daftar Tutorial
1 Menambahkan warna backgroud dengan CSS
2 Membuat tabel responsif
Perhatikan kode di atas, ada atribut bgcolor="#FFA800", dimana #FFA800 adalah warna hexa dari warna orange asli, kita bisa menggantinya dengan warna html seperti merah, kuning, hijau, biru langit atau lainnya warna heksa. Kita juga bisa membuat warna tabel html pada kolom atau baris sesuai kebutuhan. Kemudian ada juga atribut align="center", dimana atribut ini adalah atribut yang digunakan untuk membuat teks pada tabel menjadi terpusat
Berikut tampilan tabel html jika kode html yang sudah diberi atribut di atas dijalankan;
Sampai disini tutorial cara memberi warna pada tabel html tanpa css sepertinya sudah bisa dimengerti. Selanjutnya adalah menggunakan CSS untuk mewarnai tabel, jadi tutorialnya akan lanjut ke cara mewarnai tabel html dengan css. Disini kita embed kode css langsung ke kode html. Ini kode cssnya
meja {
font-family. verdana, arial, sans-serif;
ukuran huruf. 11px;
warna. #333333;
lebar batas. 1px;
border-color. #FFA800;
perbatasan-runtuh. runtuh;
}
tabel th {
lebar batas. 1px;
lapisan. 8px;
gaya perbatasan. padat;
border-color. #FFA800;
warna latar belakang. langit biru;
warna. #ffffff;
}
tabel tr. arahkan td {
kursor. petunjuk;
}
tabel tr. n-anak(genap) td{
warna latar belakang. langit biru;
}
meja td {
lebar batas. 1px;
lapisan. 8px;
gaya perbatasan. padat;
border-color. #FFA800;
warna latar belakang. #ffffff;
}
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;
Tutorial Cara Mewarnai Tabel HTML
meja {
font-family. verdana, arial, sans-serif;
ukuran huruf. 11px;
warna. #333333;
lebar batas. 1px;
border-color. #FFA800;
perbatasan-runtuh. runtuh;
}
tabel th {
lebar batas. 1px;
lapisan. 8px;
gaya perbatasan. padat;
border-color. #FFA800;
warna latar belakang. langit biru;
warna. #ffffff;
}
tabel tr. arahkan td {
kursor. petunjuk;
}
tabel tr. n-anak(genap) td{
warna latar belakang. langit biru;
}
meja td {
lebar batas. 1px;
lapisan. 8px;
gaya perbatasan. padat;
border-color. #FFA800;
warna latar belakang. #ffffff;
}
Warna dalam Tabel HTML
Tidak# Daftar Tutorial
1 Menambahkan warna backgroud dengan CSS
2 Membuat tabel responsif
Jika kode html kita jalankan pada tutorial cara mewarnai tabel html diatas maka akan muncul desain tabel html seperti berikut;
Cara Memberi Warna pada Tabel HTML
Itulah penjelasan dan contoh kode tabel html pada tutorial cara memberi warna pada tabel html yang bisa kita bahas. Mohon dikembangkan lagi agar lebih profesional, tentang warna tabel html ini. Sehingga desain tabel html bisa lebih menarik. Semoga membantuBagikan Artikel ini