Back to Table Section
Table

User List with Avatars

#table

Live preview

Source code

html
<div class="container py-5">
  <h3 class="fw-bold mb-3">Team members</h3>
  <div class="table-responsive">
    <table class="table align-middle">
      <thead>
        <tr>
          <th>Member</th>
          <th>Role</th>
          <th>Joined</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="d-flex align-items-center gap-2"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop" alt="Ayesha portrait" class="rounded-circle" style="width:36px;height:36px;object-fit:cover">
            <div>
              <div class="fw-bold small">Ayesha Rahman</div><small class="text-muted">ayesha@x.com</small>
            </div>
          </td>
          <td>Designer</td>
          <td>Jan 2023</td>
          <td><span class="badge bg-success">Online</span></td>
        </tr>
        <tr>
          <td class="d-flex align-items-center gap-2"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop" alt="Rahim portrait" class="rounded-circle" style="width:36px;height:36px;object-fit:cover">
            <div>
              <div class="fw-bold small">Rahim Uddin</div><small class="text-muted">rahim@x.com</small>
            </div>
          </td>
          <td>Developer</td>
          <td>Mar 2022</td>
          <td><span class="badge bg-secondary">Away</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

More designs in this section