User List Directory Table

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

.user-list-table thead th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: #666;
    letter-spacing: 0.5px;
    padding: 12px 15px;
    border-bottom: 2px solid #e0e0e0;
    text-align: left;
}

.user-list-table tbody td {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle; /* Key for aligning items in the cell */
}
.user-list-table tbody tr:last-child td {
    border-bottom: none;
}
.user-list-table tbody tr:hover {
    background-color: #f9f9f9;
}

/* ---- User Info Cell Styling ---- */
.user-info {
    display: flex;
    align-items: center;
}
.user-info .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
}
.user-info .user-details {
    display: flex;
    flex-direction: column;
}
.user-info .user-name {
    font-weight: 600;
    color: #333;
}
.user-info .user-email {
    font-size: 0.85rem;
    color: #777;
}

/* ---- Status Badge Styling ---- */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 12px;
    text-transform: capitalize;
}
.status-active {
    background-color: #eafaf1;
    color: #27ae60;
}
.status-away {
    background-color: #fef5e7;
    color: #f39c12;
}
.status-offline {
    background-color: #f4f6f6;
    color: #7f8c8d;
}

</style>

<table class="user-list-table">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Title / Role</th>
            <th scope="col">Status</th>
            <th scope="col">Member Since</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="user-info">
                    <img src="https://placehold.co/40?text=JC" alt="Avatar for Jane Cooper" class="avatar">
                    <div class="user-details">
                        <span class="user-name">Jane Cooper</span>
                        <span class="user-email">jane.cooper@example.com</span>
                    </div>
                </div>
            </td>
            <td>Regional Paradigm Technician</td>
            <td><span class="status-badge status-active">active</span></td>
            <td>2022-03-10</td>
        </tr>
        <tr>
            <td>
                <div class="user-info">
                    <img src="https://placehold.co/40?text=CF" alt="Avatar for Cody Fisher" class="avatar">
                    <div class="user-details">
                        <span class="user-name">Cody Fisher</span>
                        <span class="user-email">cody.fisher@example.com</span>
                    </div>
                </div>
            </td>
            <td>Lead Intranet Administrator</td>
            <td><span class="status-badge status-away">away</span></td>
            <td>2021-11-05</td>
        </tr>
        <tr>
            <td>
                <div class="user-info">
                    <img src="https://placehold.co/40?text=RR" alt="Avatar for Ronald Richards" class="avatar">
                    <div class="user-details">
                        <span class="user-name">Ronald Richards</span>
                        <span class="user-email">ronald.richards@example.com</span>
                    </div>
                </div>
            </td>
            <td>Product Manager</td>
            <td><span class="status-badge status-offline">offline</span></td>
            <td>2023-01-22</td>
        </tr>
         <tr>
            <td>
                <div class="user-info">
                    <img src="https://placehold.co/40?text=KW" alt="Avatar for Kristin Watson" class="avatar">
                    <div class="user-details">
                        <span class="user-name">Kristin Watson</span>
                        <span class="user-email">kristin.watson@example.com</span>
                    </div>
                </div>
            </td>
            <td>UX Designer</td>
            <td><span class="status-badge status-active">active</span></td>
            <td>2022-08-15</td>
        </tr>
    </tbody>
</table>