Table, Striped

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.
• Tables size their columns by the longest amount of unbroken text in either the column header or the column.
• 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="userColumn" aria-labelledby="user">
        <button type="button" class="btn btn-link py-0" aria-labelledby="userSort">
          <span class="icon fas fa-sort me-1" aria-hidden="true"></span>
          <span id="user">User</span>
          <span class="visually-hidden" id="userSort">Sort the table by User</span>
        </button>
      </th>
      <th scope="col" id="roleColumn" aria-labelledby="role">
        <button type="button" class="btn btn-link py-0" aria-labelledby="roleSort">
          <span class="icon fas fa-sort me-1" aria-hidden="true"></span>
          <span id="role">Role</span>
          <span class="visually-hidden" id="roleSort">Sort the table by Role</span>
        </button>
      </th>
      <th scope="col" id="trainingColumn" aria-labelledby="training">
        <span id="training">Training Complete</span>
      </th>
      <th scope="col" id="teamColumn" aria-labelledby="team">
        <button type="button" class="btn btn-link py-0" aria-labelledby="teamSort">
          <span class="icon fas fa-sort me-1" aria-hidden="true"></span>
          <span id="team">Team</span>
          <span class="visually-hidden" id="teamSort">Sort the table by Team</span>
        </button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="John">John</th>
      <td headers="roleColumn John">Boss</td>
      <td headers="trainingColumn John">No</td>
      <td headers="teamColumn John">OTS</td>
    </tr>
    <tr>
      <th scope="row" id="Susan">Susan</th>
      <td headers="roleColumn Susan">Developer</td>
      <td headers="trainingColumn Susan">No</td>
      <td headers="teamColumn Susan">EA</td>
    </tr>
    <tr>
      <th scope="row" id="Deborah">Deborah</th>
      <td headers="roleColumn Deborah">Business Analyst</td>
      <td headers="trainingColumn Deborah">Yes</td>
      <td headers="teamColumn Deborah">OTS</td>
    </tr>
    <tr>
      <th scope="row" id="Rick">Rick</th>
      <td headers="roleColumn Rick">Business Analyst</td>
      <td headers="trainingColumn Rick">Yes</td>
      <td headers="teamColumn Rick">DOC</td>
    </tr>
    <tr>
      <th scope="row" id="AlexanderConstantine">AlexanderConstantine</th>
      <td headers="roleColumn AlexanderConstantine">Product Owner</td>
      <td headers="trainingColumn AlexanderConstantine">No</td>
      <td headers="teamColumn AlexanderConstantine">OJJ</td>
    </tr>
    <tr>
      <th scope="row" id="José">José</th>
      <td headers="roleColumn José">Tester</td>
      <td headers="trainingColumn José">No</td>
      <td headers="teamColumn José">OMV</td>
    </tr>
    <tr>
      <th scope="row" id="Bob">Bob</th>
      <td headers="roleColumn Bob">Business Analyst</td>
      <td headers="trainingColumn Bob">Yes</td>
      <td headers="teamColumn Bob">OMV</td>
    </tr>
    <tr>
      <th scope="row" id="Jane">Jane</th>
      <td headers="roleColumn Jane">Database Administrator</td>
      <td headers="trainingColumn Jane">No</td>
      <td headers="teamColumn Jane">DOC</td>
    </tr>
    <tr>
      <th scope="row" id="Todd">Todd</th>
      <td headers="roleColumn Todd">Developer</td>
      <td headers="trainingColumn Todd">No</td>
      <td headers="teamColumn Todd">DOC</td>
    </tr>
    <tr>
      <th scope="row" id="Frank">Frank</th>
      <td headers="roleColumn Frank">Developer</td>
      <td headers="trainingColumn Frank">No</td>
      <td headers="teamColumn Frank">OTS</td>
    </tr>
  </tbody>
</table>

Resources

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