Open navigation menu

Accessible Data Table

Creates an accessible data table with proper scope attributes, captions, column groups, and responsive design for tabular data presentation.

HtmlData Fetching

Code

snippet
<table>
  <caption>
    Employee Directory - Q1 2025
  </caption>

  <colgroup>
    <col class="name-col">
    <col class="dept-col">
    <col class="role-col">
    <col class="salary-col">
  </colgroup>

  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Department</th>
      <th scope="col">Role</th>
      <th scope="col" class="numeric">Salary</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Alice Johnson</th>
      <td>Engineering</td>
      <td>Senior Developer</td>
      <td class="numeric">$95,000</td>
    </tr>
    <tr>
      <th scope="row">Bob Smith</th>
      <td>Marketing</td>
      <td>Manager</td>
      <td class="numeric">$85,000</td>
    </tr>
    <tr>
      <th scope="row">Carol Davis</th>
      <td>Engineering</td>
      <td>Team Lead</td>
      <td class="numeric">$110,000</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row" colspan="3">Average Salary</th>
      <td class="numeric">$96,667</td>
    </tr>
  </tfoot>
</table>

<style>
  table { border-collapse: collapse; width: 100%; }
  th, td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #ddd; }
  .numeric { text-align: right; }
  caption { font-weight: bold; margin-bottom: 0.5rem; }
</style>

Related Examples