Components / Display & Media / Table

Table stable

The admin staple — a quiet header, hairline rows, and a Badge for status.

Preview

Project	Owner	Status	Amount
Product launch	YMYamada	Confirmed	$860
Conference — live day	STSato	Preparing	$3,200
Expo booth	SZSuzuki	Draft	$545

Uses: Badge — include its CSS alongside this one.

<table class="ktable">
  <tr><th>Project</th><th>Owner</th><th>Status</th><th>Amount</th></tr>
  <tr><td>Product launch</td><td><span class="ava">YM</span>Yamada</td><td><span class="badge teal"><i></i>Confirmed</span></td><td>$860</td></tr>
  <tr><td>Conference — live day</td><td><span class="ava">ST</span>Sato</td><td><span class="badge amber"><i></i>Preparing</span></td><td>$3,200</td></tr>
  <tr><td>Expo booth</td><td><span class="ava">SZ</span>Suzuki</td><td><span class="badge"><i></i>Draft</span></td><td>$545</td></tr>
</table>

.ktable{width:100%;border-collapse:collapse;background:var(--k-bg);border:1px solid var(--k-line);border-radius:var(--k-radius-lg);overflow:hidden;font-size:13.5px;font-family:var(--k-font)}
.ktable th{text-align:left;font-size:11.5px;letter-spacing:.05em;color:var(--k-ink-3);font-weight:600;background:var(--k-bg-soft);padding:10px 14px;border-bottom:1px solid var(--k-line)}
.ktable td{padding:12px 14px;border-bottom:1px solid var(--k-line);color:var(--k-ink-2)}
.ktable tr:last-child td{border-bottom:0}
.ktable td:first-child{color:var(--k-ink);font-weight:500}
.ktable .ava{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--k-accent-bg-strong);color:var(--k-accent-ink);font-size:11px;font-weight:600;margin-right:9px;vertical-align:-8px}

Usage

Left-align text, right-align numbers. Keep row actions at the far right.

Accessibility

Real <table> with <th> headers so screen readers can navigate by row and column.

Stat

Timeline