Content blocks

Table

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

Block: .hs-table
CSS: components/table.css (in /brand.css)
JS: None
Status: Decided
Decided in: Components round 2b
Markdown: /components/table.md

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.
Two or three headline figures: use the Stat.
One member’s facts: use the facts list of the Credential card.

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.

Preview on white

Member scholarships and their next deadline
Scholarship	Award	Next deadline
Core Values Scholarship	$1,000	Oct 28, 2026
Undergraduate Achiever Scholarship	$2,000	Nov 14, 2026
Graduate Student Achiever Scholarship	$2,000	Nov 14, 2026
Society Involvement Award	$1,000	Oct 28, 2026

<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.

Preview on white

Benefits by membership tier
Benefit	Free	Bronze	Silver	Gold (this page)	Signature
Apply to scholarships	Included	Included	Included	Included	Included
Career guides by Vault.com	Not included	Included	Included	Included	Included
Restaurant.com gift card	Not included	$50	$150	$250	$250
Roadside assistance	Not included	Not included	Included	Included	Included
Priority support	Not included	Not included	Not included	Included	Included
Sterling silver class ring ($599 value)	Not included	Not included	Not included	Not included	Included

<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>