Table

Best Practice

• Tables allows the user to compare data.
• Use accessible Table markup, like what’s provided.
• Pagination goes below a table if you need it.
• Use Tables to display tabular data, not for layout.
  • Use Cards for browsing content.
• Use Tables for comparing data.

Usage

<table class="table table-striped">
  <caption class="visually-hidden">Table caption describes the data presented.</caption>
  <thead>
    <tr>
      <th scope="col" id="user">
        <a href="#" role="button">
          <span class="icon fas fa-sort me-1" aria-hidden="true"></span>User
          <span class="visually-hidden">Sort the table by user</span>
        </a>
      </th>
      <th scope="col" id="role">
        <a href="#" role="button">
          <span class="icon fas fa-sort me-1" aria-hidden="true"></span>Role
          <span class="visually-hidden">Sort the table by role</span>
        </a>
      </th>
      <th scope="col" id="figma">
        Figma Trained
      </th>
      <th scope="col" id="team">
        <a href="#" role="button">
          <span class="icon fas fa-sort me-1" aria-hidden="true"></span>Team
          <span class="visually-hidden">Sort the table by team</span>
        </a>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="John">John</th>
      <td headers="role John">Boss</td>
      <td headers="figma John">No</td>
      <td headers="team John">OTS</td>
    </tr>
    <tr>
      <th scope="row" id="Susan">Susan</th>
      <td headers="role Susan">Developer</td>
      <td headers="figma Susan">No</td>
      <td headers="team Susan">EA</td>
    </tr>
    <tr>
      <th scope="row" id="Deborah">Deborah</th>
      <td headers="role Deborah">Business Analyst</td>
      <td headers="figma Deborah">Yes</td>
      <td headers="team Deborah">OTS</td>
    </tr>
    <tr>
      <th scope="row" id="Rick">Rick</th>
      <td headers="role Rick">Business Analyst</td>
      <td headers="figma Rick">Yes</td>
      <td headers="team Rick">DOC</td>
    </tr>
    <tr>
      <th scope="row" id="Kevin">Kevin</th>
      <td headers="role Kevin">Product Owner</td>
      <td headers="figma Kevin">No</td>
      <td headers="team Kevin">OJJ</td>
    </tr>
    <tr>
      <th scope="row" id="José">José</th>
      <td headers="role José">Tester</td>
      <td headers="figma José">No</td>
      <td headers="team José">OMV</td>
    </tr>
    <tr>
      <th scope="row" id="Bob">Bob</th>
      <td headers="role Bob">Business Analyst</td>
      <td headers="figma Bob">Yes</td>
      <td headers="team Bob">OMV</td>
    </tr>
    <tr>
      <th scope="row" id="Jane">Jane</th>
      <td headers="role Jane">Database Administrator</td>
      <td headers="figma Jane">No</td>
      <td headers="team Jane">DOC</td>
    </tr>
    <tr>
      <th scope="row" id="Todd">Todd</th>
      <td headers="role Todd">Developer</td>
      <td headers="figma Todd">No</td>
      <td headers="team Todd">DOC</td>
    </tr>
    <tr>
      <th scope="row" id="Frank">Frank</th>
      <td headers="role Frank">Developer</td>
      <td headers="figma Frank">No</td>
      <td headers="team Frank">OTS</td>
    </tr>
  </tbody>
</table>

Resources

• Bootstrap Documentation - Tables
• Mozilla Developer Network - HTML Table Advanced Features and Accessibility