tables.md

Tables

With a A11y friendly title

<table>
  <caption>
    <h2>Top 10 best-selling albums of all time</h2>
  </caption>

  <!-- Table markup -->
</table>

Alternative version using a figure and figcaption:

<figure>
  <figcaption id="caption">Top 10 best-selling albums of all time</figcaption>
  <table aria-labelledby="caption">
    <!-- Table markup -->
  </table>
</figure>

If we want to make the table scrollable, we can use a div to wrap the table. The tabindex is needed for keyboard navigation:

<figure>
  <figcaption id="caption">
    <h2>Top 10 best-selling albums of all time</h2>
  </figcaption>

  <div
    class="table-wrapper"
    role="group"
    aria-labelledby="caption"
    tabindex="0"
  >
    <table><!-- Table markup --></table>
  </div>
</figure>

---

• Accessible front-end patterns for responsive tables
• Pure CSS scrolling shadows