Tables

Base styling for HTML tables, plus the ln-table block for enhanced tables with sorting, selection, striping, and responsive stacking.

Base element defaults

Plain <table>, <th>, and <td> elements receive sensible defaults from @layer base. Tables are full-width with collapsed borders. Cells use box-shadow instead of real borders to stay on the 24px rhythm grid.

<table>
  <caption>Base table — no classes needed</caption>
  <thead>
    <tr>
      <th>Token</th>
      <th>Value</th>
      <th>Purpose</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>--s1</code></td>
      <td>0.5rem</td>
      <td>Tight spacing</td>
    </tr>
    <tr>
      <td><code>--s2</code></td>
      <td>1rem</td>
      <td>Default gap</td>
    </tr>
    <tr>
      <td><code>--s3</code></td>
      <td>1.5rem</td>
      <td>Section gap</td>
    </tr>
  </tbody>
</table>

Base table — no classes needed
Token	Value	Purpose
`--s1`	0.5rem	Tight spacing
`--s2`	1rem	Default gap
`--s3`	1.5rem	Section gap

Striped table

<div class="ln-table ln-table--striped">
  <table class="ln-table__grid">
    <thead>
      <tr>
        <th class="ln-table__header">Product</th>
        <th class="ln-table__header ln-table__header--numeric">SKU</th>
        <th class="ln-table__header ln-table__header--numeric">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr class="ln-table__row">
        <td class="ln-table__cell">Wireless Headphones</td>
        <td class="ln-table__cell ln-table__cell--numeric ln-table__cell--mono">WH-1042</td>
        <td class="ln-table__cell ln-table__cell--numeric">$89.00</td>
      </tr>
      <tr class="ln-table__row">
        <td class="ln-table__cell">USB-C Hub</td>
        <td class="ln-table__cell ln-table__cell--numeric ln-table__cell--mono">UC-3391</td>
        <td class="ln-table__cell ln-table__cell--numeric">$45.00</td>
      </tr>
      <tr class="ln-table__row">
        <td class="ln-table__cell">Mechanical Keyboard</td>
        <td class="ln-table__cell ln-table__cell--numeric ln-table__cell--mono">MK-7780</td>
        <td class="ln-table__cell ln-table__cell--numeric">$129.00</td>
      </tr>
    </tbody>
  </table>
</div>

Product	SKU	Price
Wireless Headphones	WH-1042	$89.00
USB-C Hub	UC-3391	$45.00
Mechanical Keyboard	MK-7780	$129.00

Table block — full-featured

The ln-table block wraps enhanced tables with modifiers for divided rows, sortable headers, row selection, and pagination. Modifiers include --divided, --striped, --bordered, --compact, --spacious, --sticky-header, and --sticky-first.

<div class="ln-table ln-table--divided">
  <table class="ln-table__grid">
    <thead>
      <tr>
        <th class="ln-table__header ln-table__select">
          <input type="checkbox" class="ln-choice__input">
        </th>
        <th class="ln-table__header">
          <button class="ln-table__sort" aria-sort="ascending">Name</button>
        </th>
        <th class="ln-table__header">Role</th>
        <th class="ln-table__header">Status</th>
        <th class="ln-table__header ln-table__header--numeric">Hours</th>
      </tr>
    </thead>
    <tbody>
      <tr class="ln-table__row" aria-selected="true">
        <td class="ln-table__cell ln-table__select">
          <input type="checkbox" class="ln-choice__input" checked>
        </td>
        <td class="ln-table__cell">
          <span class="d-flex align-items-center gap-2">
            <span class="ln-avatar ln-avatar--sm">AJ</span>
            Alice Johnson
          </span>
        </td>
        <td class="ln-table__cell">Engineer</td>
        <td class="ln-table__cell">
          <span class="ln-badge ln-badge--success">Active</span>
        </td>
        <td class="ln-table__cell ln-table__cell--numeric">142</td>
      </tr>
      <tr class="ln-table__row" aria-selected="true">
        <td class="ln-table__cell ln-table__select">
          <input type="checkbox" class="ln-choice__input" checked>
        </td>
        <td class="ln-table__cell">
          <span class="d-flex align-items-center gap-2">
            <span class="ln-avatar ln-avatar--sm">BS</span>
            Bob Smith
          </span>
        </td>
        <td class="ln-table__cell">Designer</td>
        <td class="ln-table__cell">
          <span class="ln-badge ln-badge--warning">Away</span>
        </td>
        <td class="ln-table__cell ln-table__cell--numeric">98</td>
      </tr>
      <tr class="ln-table__row">
        <td class="ln-table__cell ln-table__select">
          <input type="checkbox" class="ln-choice__input">
        </td>
        <td class="ln-table__cell">
          <span class="d-flex align-items-center gap-2">
            <span class="ln-avatar ln-avatar--sm">CL</span>
            Carol Lee
          </span>
        </td>
        <td class="ln-table__cell">Manager</td>
        <td class="ln-table__cell">
          <span class="ln-badge ln-badge--success">Active</span>
        </td>
        <td class="ln-table__cell ln-table__cell--numeric">160</td>
      </tr>
      <tr class="ln-table__row">
        <td class="ln-table__cell ln-table__select">
          <input type="checkbox" class="ln-choice__input">
        </td>
        <td class="ln-table__cell">
          <span class="d-flex align-items-center gap-2">
            <span class="ln-avatar ln-avatar--sm">DK</span>
            David Kim
          </span>
        </td>
        <td class="ln-table__cell">Developer</td>
        <td class="ln-table__cell">
          <span class="ln-badge ln-badge--danger">Offline</span>
        </td>
        <td class="ln-table__cell ln-table__cell--numeric">72</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="5">
          <div class="ln-table__foot">
            <span data-select-count>2 of 4 selected</span>
            <div class="ln-table__actions">
              <button class="ln-button ln-button--outline ln-button--sm" disabled>Previous</button>
              <span>Page 1 of 3</span>
              <button class="ln-button ln-button--outline ln-button--sm">Next</button>
            </div>
          </div>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

		Role	Status	Hours
	AJAlice Johnson	Engineer	Active	142
	BSBob Smith	Designer	Away	98
	CLCarol Lee	Manager	Active	160
	DKDavid Kim	Developer	Offline	72
2 of 4 selected Page 1 of 3

Reference

Class	Description	Responsive
`.ln-table`	Table block container	No
`.ln-table__grid`	The `<table>` element	No
`.ln-table__header`	Header cell (`<th>`)	No
`.ln-table__cell`	Body cell (`<td>`)	No
`.ln-table__row`	Body row (`<tr>`)	No
`.ln-table__foot`	Footer cell with pagination/selection count	No
`.ln-table__select`	Checkbox column cell	No
`.ln-table__sort`	Sortable header button	No
`.ln-table--divided`	Row dividers between cells	No
`.ln-table--striped`	Alternating row backgrounds	No
`.ln-table--bordered`	Borders on all cells	No
`.ln-table--compact`	Reduced cell padding	No
`.ln-table--spacious`	Increased cell padding	No
`.ln-table--sticky-header`	Sticky column headers	No
`.ln-table--sticky-first`	Sticky first column	No
`.ln-table--stack`	Card layout below md breakpoint	No