Cara Menambahkan Warna pada Sel dan Baris Tabel HTML – Kita bisa menambahkan warna pada tabel menggunakan CSS. Ada beberapa cara untuk memberi warna pada tabel, seperti memberi warna pada seluruh tabel, pada baris tertentu, atau bahkan hanya pada sel tertentu. Di sini, kita akan belajar cara memberikan warna pada elemen-elemen tabel tersebut.
1. Menambahkan Warna Latar Belakang pada Sel Tabel
Untuk memberi warna latar belakang pada sel tabel, kita bisa menggunakan CSS dengan properti background-color. Misalnya, kita ingin memberikan warna pada header tabel dan sel data.
<style>
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #4CAF50; /* Warna hijau untuk header */
color: white; /* Warna teks putih */
padding: 10px;
}
td {
background-color: #f2f2f2; /* Warna abu-abu muda untuk data */
padding: 10px;
}
table, th, td {
border: 1px solid black; /* Garis border untuk tabel */
}
</style>
<table>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
<tr>
<td>Rudi</td>
<td>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Siti</td>
<td>30</td>
<td>Banjarmasin</td>
</tr>
</table>
Tampilan Tabel
Pada contoh ini:
- Warna latar belakang pada header tabel diubah menjadi hijau (#4CAF50) dengan teks berwarna putih.
- Warna latar belakang pada sel data diubah menjadi abu-abu muda (#f2f2f2).
2. Menambahkan Warna pada Baris Tabel Secara Bergantian (Alternating Row Colors)
Untuk membuat tabel lebih mudah dibaca, kamu bisa memberi warna yang berbeda pada baris ganjil dan genap. Ini bisa membantu pembaca untuk lebih mudah mengikuti data pada tabel yang memiliki banyak baris.
<style>
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #333;
color: white;
padding: 10px;
}
td {
padding: 10px;
}
table, th, td {
border: 1px solid black;
}
tr:nth-child(odd) {
background-color: #f2f2f2; /* Warna untuk baris ganjil */
}
tr:nth-child(even) {
background-color: #ffffff; /* Warna untuk baris genap */
}
</style>
<table>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
<tr>
<td>Rudi</td>
<td>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Siti</td>
<td>30</td>
<td>Banjarmasin</td>
</tr>
<tr>
<td>Andi</td>
<td>22</td>
<td>Surabaya</td>
</tr>
</table>
Tampilan Tabel
Di sini, kita menggunakan CSS nth-child untuk memberi warna pada baris ganjil dan genap:
nth-child(odd)memberi warna abu-abu muda pada baris ganjil.nth-child(even)memberi warna putih pada baris genap.
3. Menambahkan Warna pada Kolom Tertentu
Jika kamu ingin memberi warna hanya pada satu kolom, kamu bisa menambahkan CSS dengan memilih kolom menggunakan nth-child. Misalnya, kamu ingin memberi warna pada kolom “Umur”.
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid black;
}
th {
background-color: #333;
color: white;
}
td:nth-child(2) {
background-color: #ffff99; /* Warna kuning untuk kolom Umur */
}
</style>
<table>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
<tr>
<td>Rudi</td>
<td>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Siti</td>
<td>30</td>
<td>Banjarmasin</td>
</tr>
</table>
Pada contoh ini:
- Kolom kedua (Umur) diberikan warna latar belakang kuning menggunakan
nth-child(2).
4. Menambahkan Warna pada Sel Tertentu
Selain memberi warna pada seluruh kolom atau baris, kamu juga bisa memberi warna hanya pada sel tertentu. Misalnya, untuk menyorot satu data tertentu.
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid black;
}
th {
background-color: #333;
color: white;
}
td.highlight {
background-color: #ffcccb; /* Warna merah muda untuk highlight */
}
</style>
<table>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
<tr>
<td>Rudi</td>
<td class="highlight">25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Siti</td>
<td>30</td>
<td>Banjarmasin</td>
</tr>
</table>
Pada contoh ini, kita memberikan kelas .highlight pada sel umur Rudi agar memiliki warna latar belakang merah muda (#ffcccb).
Dengan menambahkan warna pada tabel HTML, kamu bisa membuat tabel yang lebih menarik dan mudah dibaca. Ada berbagai cara untuk memberikan warna, mulai dari memberi warna pada seluruh tabel, baris, kolom, atau bahkan sel tertentu. Dengan sedikit sentuhan CSS, kamu bisa membuat tampilan tabel di website kamu jauh lebih menarik dan informatif.
Berikut adalah beberapa teknik yang telah kita bahas:
- Memberi warna pada header tabel.
- Membuat baris bergantian dengan warna berbeda.
- Memberi warna pada kolom atau sel tertentu.
Jangan ragu untuk bereksperimen dengan berbagai warna dan tampilan agar tabel di website
kamu bisa lebih menarik dan mudah dipahami pengunjung. Selamat mencoba!