Contoh Table Dengan CSS

📅 Selasa, 21 Oktober 2025 ⏱ 1 menit baca
<html>
  <head>
    <title>Table dengan CSS</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f9;
        padding: 20px;
      }

      table {
        border-collapse: collapse;
        width: 60%;
        margin: auto;
        background-color: #ffffff;
      }

      td {
        border: 1px solid #cccccc;
        padding: 10px;
        text-align: left;
      }

      /* Baris pertama (header) */
      tr:nth-child(1) {
        background-color: #d0ebff; /* biru muda */
        font-weight: bold;
      }

      /* Baris genap */
      tr:nth-child(even) {
        background-color: #f1f1f1; /* abu muda */
      }

      /* Baris ganjil */
      tr:nth-child(odd) {
        background-color: #ffffff; /* putih */
      }

      /* Saat di-hover */
      tr:hover {
        background-color: #e6f7ff; /* biru sangat muda */
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Nama</td>
        <td>Alamat</td>
      </tr>
      <tr>
        <td>Eris</td>
        <td>Pondok Kopi</td>
      </tr>
      <tr>
        <td>Taufiq</td>
        <td>Cianjur</td>
      </tr>
    </table>
  </body>
</html>