Table

<table>

Displays structured data in rows and columns. Designed for dense developer data — users, logs, API keys, transactions.

Overview

Preview

Name	Status	Role	Action
AM Alex Morgan alex@oxide.dev	Active	Admin
TS Taylor Swift taylor@oxide.dev	Active	Editor
JL Jordan Lee jordan@oxide.dev	Inactive	Viewer

Basic table

<div class="overflow-hidden rounded-xl border border-zinc-800">
  <table class="w-full text-sm">
    <thead>
      <tr class="border-b border-zinc-800 bg-zinc-900/60">
        <th class="px-4 py-3 text-left text-[10px] font-semibold uppercase tracking-widest text-zinc-500">Name</th>
        <th class="px-4 py-3 text-left text-[10px] font-semibold uppercase tracking-widest text-zinc-500">Status</th>
        <th class="px-4 py-3 text-right text-[10px] font-semibold uppercase tracking-widest text-zinc-500">Action</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-zinc-800/50">
      <tr class="transition-colors hover:bg-zinc-900/40">
        <td class="px-4 py-3 font-medium text-zinc-100">Alex Morgan</td>
        <td class="px-4 py-3">
          <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-950/50 px-2 py-0.5 text-xs font-medium text-emerald-400 ring-1 ring-inset ring-emerald-800/50">
            <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
            Active
          </span>
        </td>
        <td class="px-4 py-3 text-right">
          <button class="text-xs font-medium text-zinc-500 hover:text-[#D40C37] transition-colors">Edit</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

With avatar column

<td class="px-4 py-3">
  <div class="flex items-center gap-3">
    <div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[#D40C37]/20 text-xs font-semibold text-[#D40C37]">
      AM
    </div>
    <div>
      <p class="font-medium text-zinc-100">Alex Morgan</p>
      <p class="text-xs text-zinc-500">alex@oxide.dev</p>
    </div>
  </div>
</td>

Sortable header

<th class="px-4 py-3 text-left">
  <button class="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-widest text-zinc-500 hover:text-zinc-300 transition-colors">
    Name
    <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/>
    </svg>
  </button>
</th>

Empty state

<tr>
  <td colspan="4" class="px-4 py-12 text-center">
    <p class="text-sm font-medium text-zinc-400">No results found</p>
    <p class="mt-1 text-xs text-zinc-600">Try adjusting your search or filters.</p>
  </td>
</tr>

Accessibility notes

• Use <caption> or aria-label on <table> to describe its purpose
• Sortable columns should use aria-sort="ascending" or aria-sort="descending" on <th>
• Use scope="col" on header cells and scope="row" on row headers