# Table

> A data table, or a tier comparison table, in a white panel that scrolls sideways on its own.

- Block class: `.hs-table`
- CSS: `components/table.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-2b.html
- Variants: Data table, Comparison table
- HTML page: https://brand.honorsociety.org/components/table/

## What it is

A white panel with a 1px line and 8px radius. Navy 600 heads, ink cells, tabular numbers. The wrapper scrolls sideways, never the page.

## When to use

- Rows of data with shared columns, such as scholarships with their award and next deadline.
- `--compare`: benefits by tier on `/membership-tiers` and the four tier pages.
- A plan comparison with more than five features.

## When not to use

- Two plans with a short list of features: use [Plan compare](/components/plan-compare/).
- Two or three headline figures: use the [Stat](/components/stat/).
- One member’s facts: use the facts list of the [Credential card](/components/credential/).

## Rules

- Wrap every table in `.hs-table-wrap` with `role="region"`, `tabindex="0"` and an `aria-label`.
- Give every head cell a scope: `th scope="col"` in the head, `th scope="row"` for the row label.
- Add `.hs-table__num` to the head and the cells of a number column.
- `--compare`: mark every cell of the current column `.is-current`, and add a visually hidden “(this page)” to its head. Never gold.
- In a `--compare` head, put `.hs-table__dot--{tier}` before the tier name, with `aria-hidden="true"`.
- On a phone, scroll the wrapper to the current column on load. The site’s `tier-comparison.js` does this today.

## Accessibility

- The wrapper takes keyboard focus, so a keyboard user can scroll it.
- Give every table a `<caption>`. It can be visually hidden with `.hs-visually-hidden`.
- Every ✓ (`.hs-table__yes`) and — (`.hs-table__no`) has `aria-hidden="true"` plus hidden text: “Included” or “Not included”.
- Contrast: cell ink 13.0:1; current head white on navy 12.4:1; tick success 5.4:1 on white, 4.7:1 on the current column; dash slate 500 3.7:1.
- Reduced motion: the link transition is removed.

## Variants

### Data table

`.hs-table__num` ends a number column.

```html
<div class="hs-table-wrap" role="region" aria-label="Scholarship deadlines" tabindex="0">
  <table class="hs-table">
    <caption>Member scholarships and their next deadline</caption>
    <thead>
      <tr><th scope="col">Scholarship</th><th scope="col" class="hs-table__num">Award</th><th scope="col">Next deadline</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row"><a href="/core-values-scholarship">Core Values Scholarship</a></th><td class="hs-table__num">$1,000</td><td>Oct 28, 2026</td></tr>
      <tr><th scope="row"><a href="/undergraduate-achiever-scholarship">Undergraduate Achiever Scholarship</a></th><td class="hs-table__num">$2,000</td><td>Nov 14, 2026</td></tr>
      <tr><th scope="row"><a href="/graduate-achiever-scholarship">Graduate Student Achiever Scholarship</a></th><td class="hs-table__num">$2,000</td><td>Nov 14, 2026</td></tr>
      <tr><th scope="row"><a href="/society-involvement-award">Society Involvement Award</a></th><td class="hs-table__num">$1,000</td><td>Oct 28, 2026</td></tr>
    </tbody>
  </table>
</div>
```

### Comparison table

`--compare`: sticky label column, soft stripe. The current column has a navy head cell and info-surface cells with 2px navy sides. Never gold.

```html
<div class="hs-table-wrap" role="region" aria-label="Benefits by membership tier" tabindex="0">
  <table class="hs-table hs-table--compare">
    <caption class="hs-visually-hidden">Benefits by membership tier</caption>
    <thead><tr><th scope="col">Benefit</th><th scope="col"><span class="hs-table__dot" aria-hidden="true"></span>Free</th><th scope="col"><span class="hs-table__dot hs-table__dot--bronze" aria-hidden="true"></span><a href="/membership-tiers">Bronze</a></th><th scope="col"><span class="hs-table__dot hs-table__dot--silver" aria-hidden="true"></span><a href="/membership-tiers">Silver</a></th><th scope="col" class="is-current"><span class="hs-table__dot hs-table__dot--gold" aria-hidden="true"></span>Gold<span class="hs-visually-hidden"> (this page)</span></th><th scope="col"><span class="hs-table__dot hs-table__dot--signature" aria-hidden="true"></span><a href="/membership-tiers">Signature</a></th></tr></thead>
    <tbody><tr><th scope="row">Apply to scholarships</th><td><span class="hs-table__yes" aria-hidden="true">&#10003;</span><span class="hs-visually-hidden">Included</span></td><td><span class="hs-table__yes" aria-hidden="true">&#10003;</span><span class="hs-visually-hidden">Included</span></td><td><span class="hs-table__yes" aria-hidden="true">&#10003;</span><span class="hs-visually-hidden">Included</span></td><td class="is-current"><span class="hs-table__yes" aria-hidden="true">&#10003;</span><span class="hs-visually-hidden">Included</span></td><td><span class="hs-table__yes" aria-hidden="true">&#10003;</span><span class="hs-visually-hidden">Included</span></td></tr><tr><th scope="row">Career guides by Vault.com</th><td><span class="hs-table__no" aria-hidden="true">&mdash;</span><span class="hs-visually-hidden">Not included</span></td><td><span class="hs-table__yes" aria-hidden="true">&#10003;</span><span class="hs-visually-hidden">Included</span></td><td><span class="hs-table__yes" aria-hidden="true">&#10003;</span><span class="hs-visually-hidden">Included</span></td><td class="is-current"><span class="hs-table__yes" aria-hidden="true">&#10003;</span><span class="hs-visually-hidden">Included</span></td><td><span class="hs-table__yes" aria-hidden="true">&#10003;</span><span class="hs-visually-hidden">Included</span></td></tr><tr><th scope="row">Restaurant.com gift card</th><td><span class="hs-table__no" aria-hidden="true">&mdash;</span><span class="hs-visually-hidden">Not included</span></td><td><span class="hs-table__amount">$50</span></td><td><span class="hs-table__amount">$150</span></td><td class="is-current"><span class="hs-table__amount">$250</span></td><td><span class="hs-table__amount">$250</span></td></tr><tr><th scope="row">Roadside assistance</th><td><span class="hs-table__no" aria-hidden="true">&mdash;</span><span class="hs-visually-hidden">Not included</span></td><td><span class="hs-table__no" aria-hidden="true">&mdash;</span><span class="hs-visually-hidden">Not included</span></td><td><span class="hs-table__yes" aria-hidden="true">&#10003;</span><span class="hs-visually-hidden">Included</span></td><td class="is-current"><span class="hs-table__yes" aria-hidden="true">&#10003;</span><span class="hs-visually-hidden">Included</span></td><td><span class="hs-table__yes" aria-hidden="true">&#10003;</span><span class="hs-visually-hidden">Included</span></td></tr><tr><th scope="row">Priority support</th><td><span class="hs-table__no" aria-hidden="true">&mdash;</span><span class="hs-visually-hidden">Not included</span></td><td><span class="hs-table__no" aria-hidden="true">&mdash;</span><span class="hs-visually-hidden">Not included</span></td><td><span class="hs-table__no" aria-hidden="true">&mdash;</span><span class="hs-visually-hidden">Not included</span></td><td class="is-current"><span class="hs-table__yes" aria-hidden="true">&#10003;</span><span class="hs-visually-hidden">Included</span></td><td><span class="hs-table__yes" aria-hidden="true">&#10003;</span><span class="hs-visually-hidden">Included</span></td></tr><tr><th scope="row">Sterling silver class ring ($599 value)</th><td><span class="hs-table__no" aria-hidden="true">&mdash;</span><span class="hs-visually-hidden">Not included</span></td><td><span class="hs-table__no" aria-hidden="true">&mdash;</span><span class="hs-visually-hidden">Not included</span></td><td><span class="hs-table__no" aria-hidden="true">&mdash;</span><span class="hs-visually-hidden">Not included</span></td><td class="is-current"><span class="hs-table__no" aria-hidden="true">&mdash;</span><span class="hs-visually-hidden">Not included</span></td><td><span class="hs-table__yes" aria-hidden="true">&#10003;</span><span class="hs-visually-hidden">Included</span></td></tr></tbody>
  </table>
</div>
```