テーブル

hc-table は標準の <table> に適用するクラスです。支援技術が読み上げられるよう、正しい <thead> / <tbody> / <th scope="col"> / <td> の構造を使ってください。

基本の HTML

Name	Status	Actions
Order #123	Active
Order #124	Pending
Order #125	Draft

<table class="hc-table">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Status</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Order #123</td>
      <td><span class="hc-badge" data-variant="success">Active</span></td>
      <td><button class="hc-button" type="button" data-size="sm">View</button></td>
    </tr>
    <tr>
      <td>Order #124</td>
      <td><span class="hc-badge" data-variant="warning">Pending</span></td>
      <td><button class="hc-button" type="button" data-size="sm">View</button></td>
    </tr>
    <tr>
      <td>Order #125</td>
      <td><span class="hc-badge">Draft</span></td>
      <td><button class="hc-button" type="button" data-size="sm">View</button></td>
    </tr>
  </tbody>
</table>

密度

data-density="compact" は、データ密度の高いリスト向けに縦のパディングを減らします。

Default

Name	Status
Order #123	Active
Order #124	Pending
Order #125	Draft

data-density=“compact”

Name	Status
Order #123	Active
Order #124	Pending
Order #125	Draft

<table class="hc-table" data-density="compact">
  <thead>
    <tr><th scope="col">Name</th><th scope="col">Status</th></tr>
  </thead>
  <tbody>
    <tr><td>Order #123</td><td>Active</td></tr>
    <tr><td>Order #124</td><td>Pending</td></tr>
    <tr><td>Order #125</td><td>Draft</td></tr>
  </tbody>
</table>

数値列

セルはデフォルトで数字を等幅数字 (font-variant-numeric: tabular-nums)でレンダリングするため、桁の並び — 件数・金額・タイムスタンプ — は列方向に垂直に揃います。このプロパティは数字グリフにしか影響せず、テキストセルは不変です。

右揃えは列ごとの意味論なので、宣言的な opt-in です: セルまたはヘッダーセルの data-numeric が末尾揃えにします(text-align: end — 論理値なので RTL では自動で反転)。

Item	Qty	Amount
Widget	1,114	9,110.25
Gadget	98	101.09
Gizmo	7	1,987.50

<table class="hc-table">
  <thead>
    <tr>
      <th scope="col">Item</th>
      <th scope="col" data-numeric>Qty</th>
      <th scope="col" data-numeric>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Widget</td><td data-numeric>1,114</td><td data-numeric>9,110.25</td></tr>
    <tr><td>Gadget</td><td data-numeric>98</td><td data-numeric>101.09</td></tr>
    <tr><td>Gizmo</td><td data-numeric>7</td><td data-numeric>1,987.50</td></tr>
  </tbody>
</table>

条件付き書式

サーバーがルールを評価し、その結果を data-tone="info | success | warning | error" としてセル(td/th) または行全体(tr)に描画します。スタイルシートは共有のセマンティックステータスカラーでティントします(ダークテーマ対応)。色だけに頼らず、値やテキストのマーカーをセルに残してください:

<tr>
  <td>Legacy sync</td>
  <td data-tone="error">Failed</td>
</tr>

キー・バリュー変種

data-variant="kv" はテーブルを詳細ビュー向けの 2 列の定義リストに変えます — キーは固定インラインサイズの行ヘッダーでミュートのテキスト、値は本文のスタイルのまま、行のホバーハイライトはオフ (操作するものがないため)です:

Realm id	local
Display name	Local development
Created	2026-06-01

<table class="hc-table" data-variant="kv">
  <tbody>
    <tr><th scope="row">Realm id</th><td>local</td></tr>
    <tr><th scope="row">Display name</th><td>Local development</td></tr>
    <tr><th scope="row">Created</th><td>2026-06-01</td></tr>
  </tbody>
</table>

キー列の幅は --hc-table-kv-key-width(デフォルト 10rem)で上書きします。キーには <th scope="row"> を使ってください — それがこの変種のスタイル対象で、ペアを読み上げ可能に保ちます。

レスポンシブ — 横スクロール

データテーブルは列のコンテンツ幅より縮められないため、狭い画面の広いテーブルは放っておくとページ全体を横に押し広げます。 .hc-table-scroll で包んで、オーバーフローをスクロール可能な帯に閉じ込めてください。

帯はスクロールするため、キーボードで到達可能でなければなりません — ラッパーをフォーカス可能でラベルつきの領域(role="region"、 aria-label、tabindex="0")にします:

<div class="hc-table-scroll" role="region" aria-label="Orders" tabindex="0">
  <table class="hc-table">
    …
  </table>
</div>

広いビューポートではラッパーは見えません。テーブルが幅を超えたときだけスクロールします。

htmx での利用

インラインの行更新には、<tr> 自体をスワップします。

<tr id="item-123">
  <td>Order #123</td>
  <td><span class="hc-badge" data-variant="success">Active</span></td>
  <td>
    <button
      class="hc-button"
      type="button"
      data-variant="error"
      data-hc-confirm="Delete this item?"
      data-hx-delete="/items/123"
      data-hx-trigger="hc:confirmed"
      data-hx-target="closest tr"
      data-hx-swap="outerHTML">
      Delete
    </button>
  </td>
</tr>

これは計画 §24 のまさにそのパターンです。 confirm-action レシピを参照。

アクセシビリティ

列ヘッダーには常に <thead> と <th scope="col"> を用意してください。行に行ヘッダーがあるときは、最初のセルに <th scope="row"> を使います。
セル内のアクションボタンには説明的なラベルを — aria-label を含まない限り、アイコンのみのボタンは避けてください。
長いテーブルのレスポンシブ対応で、<table>、<thead>、 <tbody> に display: block を適用しないでください。スクリーンリーダーのセマンティクスが壊れます。代わりにテーブルを横スクロール可能なコンテナで包みます。

テーマ用トークン

トークンパス	用途
`table.border`	セルの区切り線の色。
`table.fg`	本文テキストの色。
`table.font-size`	本文のフォントサイズ。
`table.header-bg`	ヘッダー行の背景。
`table.header-fg`	ヘッダーテキストの色。
`table.header-weight`	ヘッダーのフォントウェイト。
`table.row-hover-bg`	行ホバーの背景。
`table.cell-padding-x`	セルのインラインパディング。
`table.cell-padding-y`	セルのブロックパディング。
`table.kv-key-width`	キー列の幅(`data-variant="kv"`)。
`table.kv-key-fg`	キーテキストの色(`data-variant="kv"`)。

CSS 変数

生成される CSS 変数を表示

--hc-table-border | -fg | -font-size
--hc-table-header-bg | -header-fg | -header-weight
--hc-table-row-hover-bg
--hc-table-cell-padding-x | -cell-padding-y
--hc-table-kv-key-width | -kv-key-fg