Chart

A bar chart that is a plain <table>. No wrapper elements, no SVG, no JavaScript.

Default

Each category is one <tr> holding a <th scope="row"> label and a single <td> value. grid-auto-flow: column turns those rows sideways so each renders as a vertical bar, and a screen reader still walks them row by row. Set --v on each <td> to its value as a percentage of --chart-height.

The y-axis is a <ul> inside <caption>, the one place a table allows content outside its rows. The column headers are redundant once every row is labelled, so they stay in the markup but are hidden visually.

<table class="chart">
  <caption>
    Signups by month
    <ul class="chart-y-axis" aria-hidden="true">
      <li>60</li>
      <li>40</li>
      <li>20</li>
      <li>0</li>
    </ul>
  </caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Signups</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">01</th>
      <td style="--v: 29"><span>29</span></td>
    </tr>
    <tr>
      <th scope="row">02</th>
      <td style="--v: 52"><span>52</span></td>
    </tr>
  </tbody>
</table>