Pendahuluan
Anda dapat menggunakan HTML untuk melakukan berbagai hal seperti menampilkan blog, memasukkan gambar ke dalam Blog, atau memasukan audio serta video ke dalam halaman Blog atau website.
Selain memberikan border atau bingkai pada tabel, agar tampilan tabel dapat lebih menarik lagi, mengatur warna background sel atau tabel mungkin perlu dibuat. Bagi kalian yang bingung bagaimana caranya membuat warna background pada tabel, Pandue akan membahasnya.
Masing-masing baris dan sel yang terdapat pada suatu tabel dapat dipercantik dengan memberi warna latar (background). Caranya sederhana, hanya dengan memberi nilai pada atribut bgcolor pada tag <tr> (untuk baris) maupun <th> atau <td> (untuk sel). Nilai warna yang digunakan untuk mengisi atribut bgcolor dapat berupa red, green, blue dan sebagainya (nama warna dalam bahasa inggris) atau dalam bentuk notasi hexadesimal, seperti: #000000, #FFFFFF, #FF22AA, dan sebagainya. Jika Anda ingin membuat background transparan pada tabel, Anda dapat mengisi atribut bgcolor dengan nilai "transparent". Contoh: <table bgcolor="transparent">
penerapan warna latar di dalam suatu tabel
Contoh penerapan warna latar di dalam suatu tabel adalah memberi warna latar yang berbeda untuk baris ganjil dan genap. Harapannya adalah agar tampilan tabel tampak lebih menarik dan mudah dibaca.
Untuk menerapkannya, kita dapat menggunakan atribut bgColor pada tag tr. Misalnya, untuk memberi warna latar biru untuk baris ganjil dan warna latar hijau untuk baris genap, kita dapat menggunakan kode berikut:
...
<table border="1">
<thead>
<tr bgcolor="#0000ff">
<th>Nama</th>
<th>Usia</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#00ff00">
<td>John Doe</td>
<td>25</td>
</tr>
<tr bgcolor="#0000ff">
<td>Jane Doe</td>
<td>30</td>
</tr>
</tbody>
</table>
...
Contoh Praktikum Tabel
Praktikum Memberi Warna Latar Baris/Sel dalam Suatu Tabel.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tinggi dan Lebar Suatu Sel Tabel</title>
</head>
<!--[ <body> open ]-->
<body>
<table border="1" >
<h2>Demo memberi Warna Latar Baris/Sel</h2>
<caption>Daftar Harga Emas Antam</caption>
<tr>
<th height="50">No</th>
<th width="150">Seri/Model</th>
<th width="100">Ukuran (Gram)</th>
<th width="100">Harga (±)</th>
</tr>
<tr bgcolor="#ccccee">
<td>1</td>
<td>Emas Batangan Antam - 2020</td>
<td>1 gr</td>
<td>Rp. 799,000 ,-</td>
</tr>
<tr>
<td>2</td>
<td>Emas Batangan Antam - 2020</td>
<td>2 gr</td>
<td>Rp. 1,547,000 ,-</td>
</tr>
<tr bgcolor="#ccccee">
<td>3</td>
<td>Emas Batangan Antam - 2020</td>
<td>10 gr</td>
<td>Rp. 7,763,000 ,-</td>
</tr>
</table>
</body>
<!--[ </body> close ]-->
</html>
Anda dapat mencoba dan memahami bagaimana tabel terbentuk.
Pada praktikum di atas kita membuat warna latar untuk baris data dengan nomor urut ganjil, genap tetap putih (tidak diberi warna). Karena yang akan diberi warna latar adalah baris, maka atribut bgcolor perlu diletakkan di dalam tag <hr>. Jika Anda hanya ingin memberi warna latar ke dalam suat sel (bukan baris) maka properti bgcolor dapat ditempatkan di bagian <td> atau <th>. Namun, jika Anda ingin membuat background transparan pada tabel, Anda dapat mengisi atribut bgcolor dengan nilai "transparent". Contoh: <table bgcolor="transparent">
Metode Pengaturan Warna
Beberapa kemungkinan format kode yang dapat diterapkan untuk memberi nilai warna pada tabel. Sebagai contoh kita ingin memberi warna merah, berikut beberapa model kode yang dapat diterapkan, yaitu Sebagai berikut:
bgcolor Attribute: Ini menggunakan atribut HTML kuno
bgcoloruntuk memberikan warna latar belakang pada sel tabel.Hexadecimal Notation: Menggunakan notasi heksadesimal untuk menyatakan warna merah (#ff0000).
Inline Style - Basic: Menetapkan warna latar belakang menggunakan inline style dengan properti CSS
background-color.Inline Style - Hexadecimal: Menggunakan inline style dengan notasi heksadesimal untuk memberikan warna latar belakang.
Inline Style - RGB Notation: Menetapkan warna latar belakang menggunakan nilai RGB dalam properti
background-color.Inline Style - RGBA Notation: Menggunakan nilai RGBA untuk memberikan warna latar belakang dengan transparansi.
Inline Style - HSL Notation: Menetapkan warna latar belakang menggunakan notasi HSL (Hue, Saturation, Lightness).
Inline Style - HSLA Notation: Menggunakan notasi HSLA dengan tambahan nilai untuk transparansi.
... <tr bgcolor="red"> ...
... <tr bgcolor="#ff0000"> ...
... <tr style="background-color: red;"> ...
... <tr style="background-color: #ff0000;"> ...
... <tr style="background-color: rgb(255, 0, 0);"> ...
... <tr style="background-color: rgba(255, 0, 0, 0.5);"> ...
... <tr style="background-color: hsl(0, 100%, 50%);"> ...
... <tr style="background-color: hsla(0, 100%, 50%, 0.5);"> ...
Kita dapat menyesuaikan penerapan warna latar sesuai dengan kebutuhan dan tujuan kita. Perlu Anda perhatikan bahwa pada saat kolom <tr> diubah warnanya, maka harus tetap memperhatikan rasio kontras warna agar teks tetap dapat mudah terbaca.
Kesimpulan
Dengan menerapkan prinsip-prinsip ini, Anda dapat meningkatkan estetika tabel HTML Anda dan memberikan pengalaman pengguna yang lebih baik. Jangan ragu untuk eksperimen dengan kode dan mengadaptasinya sesuai dengan kebutuhan proyek Anda.
Orang lain juga bertanya (FAQ)
Berikut adalah beberapa pertanyaan yang mungkin sering diajukan pengguna saat mencari tentang dasar-dasar Tabel:
Dasar membuat tabel
Kuasai dasar membuat tabel dengan mudah dan efektif untuk meningkatkan produktivitas Anda dengan panduan dasar membuat tabel.
Cara membuat bingkai atau border tabel
Tambahkan sentuhan profesional pada tabel Anda dengan cara mudah membuat bingkai atau border pada tabel yang elegan.
Mengatur tinggi dan lebar sel tabel
Optimalkan tata letak tabel Anda dengan mempelajari cara mudah mengatur tinggi dan lebar sel tabel untuk presentasi data yang lebih menarik dan informatif.
Memberi warna background sel tabel
Berikan sentuhan visual yang menakjubkan pada tabel Anda dengan tutorial lengkap tentang cara memberi warna latar belakang sel tabel untuk meningkatkan daya tarik dan keterbacaan sekarang.
Memasukan gambar ke dalam tabel
Tambahkan dimensi visual yang mengesankan ke dalam tabel Anda dengan panduan lengkap memasukkan gambar ke dalam sel tabel agar dapat menjadi lebih menarik.
Mengatur jarak antar sel pada tabel
Perfeksionis tabel Anda dengan mudah! Pelajari trik pintar mengatur jarak antar sel pada tabel untuk tampilan yang rapi dan terorganisir dalam sekejap.
Mengatur jarak teks dengan border tabel
Desain profesional tabel untuk tampilan yang presisi dan elegan dengan mempelajari cara mengatur jarak teks dengan border tabel.
Membentangkan sel menjadi beberapa baris
Pelajari bagaimana cara membentangkan sel menjadi beberapa baris untuk presentasi data yang lebih terperinci dan menarik.
Membentangkan sel menjadi beberapa kolom
Kembangkan fleksibilitas tampilan tabel Anda dengan mempelajari cara membentangkan sel menjadi beberapa kolom untuk visualisasi data yang lebih dinamis dan informatif.
Selain beberapa pertanyaan diatas, ada beberapa pertanyaan lain yang mungkin ingin Anda tahu mengenai materi pemprograman web.
Bagaimana cara menjadikan gambar sebagai link?
Bergaya dan efektif: temukan cara mudah menjadikan gambar sebagai link untuk meningkatkan interaktivitas halaman web Anda!.
Teks Alignment (left, right, center & justify)
Persembahkan tampilan yang rapi dan profesional dengan panduan lengkap tentang teks alignment (kiri, kanan, tengah, dan rata kanan-kiri) - pelajari rahasia tata letak yang sesuai dengan gaya Anda!
Format teks (Bold, Italic, Underline)
Untuk memberi tampilan yang menarik pada konten Anda, pelajari cara membuat teks bold, italic, dan underline dengan tutorial praktis.
Membuat & menampilkan karakter Copyright (©) pada halaman web
Tambahkan sentuhan hukum ke situs web Anda: pelajari cara membuat dan menampilkan karakter copyright untuk melindungi karya dan memberi identitas pada halaman web Anda!