Display user information in a table

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Table in Section Example</title>
  <style>
    :root {
      --bg-color: #e0e7ff; /* Default background color */
    }

    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: var(--bg-color);
    }

    section {
      --bg-color: #f4f4f4; /* Override the variable locally in section */
      background-color: var(--bg-color);
      padding: 20px;
      border-radius: 8px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }

    th, td {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: left;
      background-color: var(--bg-color); /* Inherit the section's background */
    }

    th {
      font-weight: bold;
    }
  </style>
</head>
<body>

  <section>
    <h2>User Information</h2>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Role</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alice Johnson</td>
          <td>alice@example.com</td>
          <td>Admin</td>
        </tr>
        <tr>
          <td>Bob Smith</td>
          <td>bob@example.com</td>
          <td>Editor</td>
        </tr>
      </tbody>
    </table>
  </section>

</body>
</html>