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