Zebra Striped Table

<!DOCTYPE html>
<title>My Example</title>

.table-zebra {
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.table-zebra caption {
    caption-side: bottom;
    text-align: right;
    font-size: 0.8rem;
    color: #666;
    padding: 10px 0;
}

.table-zebra thead {
    background-color: #2c3e50; /* A dark blue-grey header */
    color: #ffffff;
}

.table-zebra th, 
.table-zebra td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #dddddd;
}

/* This is the magic for the zebra-striping */
.table-zebra tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.table-zebra tbody tr:last-of-type {
    border-bottom: 2px solid #2c3e50;
}

/* Optional: Add a hover effect for better user interaction */
.table-zebra tbody tr:hover {
    background-color: #e2e8f0;
    cursor: pointer;
}
</style>

<div class="table-container">
    <table class="table-zebra">
        <caption>List of Active Users as of Today</caption>
        <thead>
            <tr>
                <th scope="col">User ID</th>
                <th scope="col">Full Name</th>
                <th scope="col">Email Address</th>
                <th scope="col">Role</th>
                <th scope="col">Last Login</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>USR-001</td>
                <td>Arthur Dent</td>
                <td>adent@example.com</td>
                <td>Researcher</td>
                <td>2024-05-20</td>
            </tr>
            <tr>
                <td>USR-002</td>
                <td>Ford Prefect</td>
                <td>fprefect@example.com</td>
                <td>Journalist</td>
                <td>2024-05-21</td>
            </tr>
            <tr>
                <td>USR-003</td>
                <td>Zaphod Beeblebrox</td>
                <td>zbeeblebrox@example.com</td>
                <td>President</td>
                <td>2024-05-18</td>
            </tr>
            <tr>
                <td>USR-004</td>
                <td>Trisha McMillan</td>
                <td>tricia@example.com</td>
                <td>Astrophysicist</td>
                <td>2024-05-21</td>
            </tr>
            <tr>
                <td>USR-005</td>
                <td>Marvin</td>
                <td>paranoid.android@example.com</td>
                <td>Robot</td>
                <td>2024-05-19</td>
            </tr>
        </tbody>
    </table>
</div>