Table with Avatars

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

/* ---- The main styling for the avatar and text group ---- */
.user-profile {
    display: flex;
    align-items: center;
}
.user-profile .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* This makes the image circular */
    object-fit: cover; /* Prevents the image from being distorted */
    margin-right: 15px;
}
.user-profile .user-details {
    display: flex;
    flex-direction: column;
}
.user-profile .user-name {
    font-weight: 600;
    color: #333;
}
.user-profile .user-role {
    font-size: 0.9rem;
    color: #777;
}
</style>

<table class="avatar-table">
    <thead>
        <tr>
            <th scope="col">Member</th>
            <th scope="col">Department</th>
            <th scope="col">Contact</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="user-profile">
                    <img src="https://placehold.co/40/2c3e50/ffffff?text=AW" alt="Avatar for Alice Williams" class="avatar">
                    <div class="user-details">
                        <span class="user-name">Alice Williams</span>
                        <span class="user-role">Lead Developer</span>
                    </div>
                </div>
            </td>
            <td>Engineering</td>
            <td>alice.w@example.com</td>
        </tr>
         <tr>
            <td>
                <div class="user-profile">
                    <img src="https://placehold.co/40/e74c3c/ffffff?text=BJ" alt="Avatar for Bob Johnson" class="avatar">
                    <div class="user-details">
                        <span class="user-name">Bob Johnson</span>
                        <span class="user-role">Marketing Manager</span>
                    </div>
                </div>
            </td>
            <td>Marketing</td>
            <td>bob.j@example.com</td>
        </tr>
        <tr>
            <td>
                <div class="user-profile">
                    <img src="https://placehold.co/40/2ecc71/ffffff?text=CS" alt="Avatar for Charlie Smith" class="avatar">
                    <div class="user-details">
                        <span class="user-name">Charlie Smith</span>
                        <span class="user-role">UX Designer</span>
                    </div>
                </div>
            </td>
            <td>Design</td>
            <td>charlie.s@example.com</td>
        </tr>
        <tr>
            <td>
                <div class="user-profile">
                    <img src="https://placehold.co/40/9b59b6/ffffff?text=DM" alt="Avatar for Diana Miller" class="avatar">
                    <div class="user-details">
                        <span class="user-name">Diana Miller</span>
                        <span class="user-role">HR Specialist</span>
                    </div>
                </div>
            </td>
            <td>Human Resources</td>
            <td>diana.m@example.com</td>
        </tr>
    </tbody>
</table>