بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

Kumpulan Materi Management Informatika untuk SMA Islam Lembah Arafah

dan Kumpulan Hasil karya Siswa Lembah Arafah


Kategori css    
  • Latihan Table 3 
    <!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tabel Hijau</title>
  <style>
    h1{
            text-align: center;
            color: green;
    }
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      padding: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    table {
      border-collapse: separate;
      border-spacing: 0;
      width: 70%;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      border-radius: 20px;
      overflow: hidden;
    }

    th {
      background-color: #2e7d32; /* hijau tua */
      color: white;
      padding: 12px;
      text-align: center;
      font-size: 16px;
    }

    th:first-child {
      border-top-left-radius: 20px;
    }

    th:last-child {
      border-top-right-radius: 20px;
    }

    td {
      background-color: #e8f5e9; /* hijau muda */
      padding: 10px;
      text-align: left;
      border-bottom: 1px solid #c8e6c9;
    }

    tr:last-child td {
      border-bottom: none;
    }
    .ratatengah {
        text-align: center;
        color: red;
    }
    .ratakanan {
        text-align: right;
        color: red;
    }
  </style>
</head>
<body>
        <h1>Daftar Siswa</h1>
  <table>
    <thead>
      <tr>
          
        <th>No</th>
        <th>Nama</th>
        <th>Email</th>
        <th>Role</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr><td class="ratatengah">1</td><td>Eris Taufiq</td><td>eris@mail.com</td><td>Admin</td><td class="ratakanan">Rp.100.000.000,-</td></tr>
      <tr><td class="ratatengah">2</td><td>Ahmad</td><td>ahmad@mail.com</td><td>Editor</td><td class="ratakanan">Rp.50.000.000,-</td></tr>
      <tr><td class="ratatengah">3</td><td>Siti</td><td>siti@mail.com</td><td>Pengguna</td><td class="ratakanan">Rp.30.000.000,-</td></tr>
      <tr><td class="ratatengah">4</td><td>Budi</td><td>budi@mail.com</td><td>Editor</td><td class="ratakanan">Rp.30.000.000,-</td></tr>
      <tr><td class="ratatengah">5</td><td>Ani</td><td>ani@mail.com</td><td>Pengguna</td><td class="ratakanan">Rp.20.000.000,-</td></tr>
    </tbody>
  </table>
</body>
</html>