Table

When to use it

• Five or more rows of comparable figures: equities, state prices, seat results.
• When the reader will scan a column rather than read a row.

• Do not use a table for layout. It is for data with a header.
• Do not use it for three figures. That is a row of tiles.

<table class="p234-table">
  <thead><tr><th>Equity</th><th>Last</th><th>Change</th></tr></thead>
  <tbody>
    <tr><td>UBA</td><td>38.50</td><td><span class="p234-delta" data-direction="up">1.20</span></td></tr>
    <tr><td>BUA Foods</td><td>412.00</td><td><span class="p234-delta" data-direction="down">6.50</span></td></tr>
    <tr><td>Dangote Cement</td><td>505.90</td><td><span class="p234-delta">0.00</span></td></tr>
    <tr><td>Zenith Bank</td><td>44.15</td><td><span class="p234-delta" data-direction="up">0.65</span></td></tr>
    <tr><td>MTN Nigeria</td><td>268.00</td><td><span class="p234-delta" data-direction="down">2.00</span></td></tr>
  </tbody>
</table>

Alignment

The first column is text and stays left. Every other column is right-aligned and tabular, so digits of different magnitudes stack and the eye can run down the column. This is handled by the component; individual cells need no classes.

Rules, not stripes

A thick rule under the header and hairlines between rows. No zebra striping and no cell borders: on an editorial page the rule is enough, and stripes add noise to the thing a reader is trying to scan.

On a phone

Most readers are on a phone, so a table with more than three columns needs a plan: either drop columns at narrow widths, or let the table scroll horizontally inside a wrapper with a visible edge. Never shrink the type below the floor to make columns fit.

Accessibility

• Use real <thead> and <th> elements so the header is announced with each cell.
• Add a <caption> saying what the table covers and as of when.
• Give a horizontally scrolling wrapper tabindex="0" so a keyboard can reach it.