Tables

Semantic <table> — no classes, no wrappers. Styled by default.

ASW styles every <table> element automatically. No class required. Column headers in <thead> render in accent monospace. Rows stripe on hover. The table is horizontally scrollable on narrow viewports without any wrapper.

Basic table

Name Type Default Description
data-text string — Text utility — mono, dim, accent, small
data-layout string — Layout pattern — prose, grid-2, docs, etc.
data-callout string — Callout type — note, tip, warning, error 
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>data-text</code></td>
      <td><code>string</code></td>
      <td>Text utility</td>
    </tr>
  </tbody>
</table>

Caption

A <caption> element above the header row provides a title for the table. Useful for accessibility — screen readers announce the caption before reading the table.

ASW nav patterns and their data attributes
Pattern Attribute Active state
Top nav (none) aria-current="page"
Sub-nav data-subnav aria-current="page"
Sidebar nav data-nav="sidebar" aria-current="page"
TOC nav data-nav="toc" aria-current="true" 
<table>
  <caption>Table title</caption>
  <thead> … </thead>
  <tbody> … </tbody>
</table>

Overflow handling

Wide tables scroll horizontally on narrow viewports. No wrapper needed — ASW applies overflow-x: auto and a scrollbar style directly on <table>.

Token Value (dark) Value (light) Usage CSS variable Notes
--asw-bg #0d1117 #ffffff Page background background-color: var(--asw-bg) Root surface
--asw-text #e6edf3 #1f2328 Body text color: var(--asw-text) High contrast
--asw-accent #3fb950 #1a7f37 Interactive, active color: var(--asw-accent) GitHub green