CARA MEMBUAT TABEL HTML BERWARNA

Membuat tabel di HTML adalah hal dasar yang perlu diketahui oleh setiap pengembang web. Namun, bagaimana jika kamu ingin membuat tabel tersebut lebih menarik dengan menambahkan warna? Nah, dalam artikel ini kita akan membahas secara detail tentang cara membuat tabel HTML berwarna.

Langkah pertama tentunya adalah membuat tabel dasar HTML. Kemudian, kita akan menambahkan kode CSS untuk memberikan warna pada tabel tersebut. Apakah kamu sudah siap? Mari kita mulai.

Langkah 1: Buat Tabel HTML

Pertama, kamu perlu membuat struktur dasar tabel dalam HTML. Kamu bisa melakukannya dengan menggunakan tag <table>, <tr>, dan <td>. Berikut adalah contoh kode HTML untuk membuat tabel:

<table>
  <tr>
    <td>Baris 1, Kolom 1</td>
    <td>Baris 1, Kolom 2</td>
  </tr>
  <tr>
    <td>Baris 2, Kolom 1</td>
    <td>Baris 2, Kolom 2</td>
  </tr>
</table>

Dalam kode di atas, tag <table> digunakan untuk membuat tabel. Sedangkan <tr> untuk membuat baris dan <td> untuk membuat kolom.

Langkah 2: Tambahkan CSS

Setelah tabel HTML dibuat, selanjutnya adalah menambahkan kode CSS untuk mewarnai tabel tersebut. Untuk melakukan ini, kamu perlu menambahkan tag <style> di dalam head halaman webmu.

Berikut adalah contoh kode CSS untuk memodifikasi warna tabel:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  td, th {
    border: 1px solid #ddd;
    padding: 8px;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  tr:hover {
    background-color: #ddd;
  }
  th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
  }
</style>

Penjelasan Kode CSS

Dalam kode CSS di atas, ada beberapa hal yang perlu diperhatikan:

• border-collapse: collapse;: menggabungkan batas tabel menjadi satu batas saja.
• td, th {...}: memberikan batas dan penyangga pada sel dalam tabel.
• tr:nth-child(even) {...}: memberikan warna latar belakang yang berbeda pada setiap baris genap dalam tabel.
• tr:hover {...}: mengubah warna latar belakang ketika mouse berada di atas baris.
• th {...}: melakukan styling untuk baris header.

Itulah cara membuat tabel HTML berwarna. Dengan pengetahuan ini, kini kamu bisa membuat tabel yang lebih menarik dan informatif. Selamat mencoba!