Table

A tabular data display built exclusively with standard semantic tags and @utility table-* classes.

List of active users
Name	Role	Status
Alice Smith	Admin	Active
Bob Jones	Editor	Offline
Charlie Brown	Viewer	Active

Usage

table.html

<div class="table-container">
  <table class="table-base">
    <caption class="sr-only">List of active users</caption>
    <thead class="table-header">
      <tr>
        <th scope="col" class="table-th">Name</th>
        <th scope="col" class="table-th">Role</th>
        <th scope="col" class="table-th">Status</th>
        <th scope="col" class="table-th text-right">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-row">
        <td class="table-td font-medium">Alice Smith</td>
        <td class="table-td text-neutral-11">Admin</td>
        <td class="table-td">
          <span class="badge color-group-success">Active</span>
        </td>
        <td class="table-td text-right">
          <button class="text-primary-9 hover:underline">Edit</button>
        </td>
      </tr>
      <!-- ... -->
    </tbody>
  </table>
</div>