Tables

Tables receive extensive default styling including alternating row backgrounds, a black header bar with white text, and red-bordered captions. Wrap tables in .util-scrollable-content for horizontal scrolling on narrow viewports.

Basic Table

Table Caption
Phase	Weeks	Learner Role	Instructor Role
1	1 to 2	Newcomer	Social Negotiator
2	3 to 4	Cooperator	Structural Engineer
3	5 to 6	Collaborator	Facilitator
4	Beyond	Initiator/Partner	Challenger/Partner

<div class="util-scrollable-content">
  <table>
    <caption>Table Caption</caption>
    <thead>
      <tr>
        <th>Phase</th>
        <th>Weeks</th>
        <th>Learner Role</th>
        <th>Instructor Role</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>1 to 2</td>
        <td>Newcomer</td>
        <td>Social Negotiator</td>
      </tr>
      <tr>
        <td>2</td>
        <td>3 to 4</td>
        <td>Cooperator</td>
        <td>Structural Engineer</td>
      </tr>
      <tr>
        <td>3</td>
        <td>5 to 6</td>
        <td>Collaborator</td>
        <td>Facilitator</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Beyond</td>
        <td>Initiator/Partner</td>
        <td>Challenger/Partner</td>
      </tr>
    </tbody>
  </table>
</div>

Sortable Table

Tables with sortable columns use the .cmp-sortable-cell component for header buttons.

Course	Course Title	Instructor	Credit Hours
HDFS 3930E	21st-Century Intimate Relation	Jennifer Gonyea	3
EPSY 4240E	Abnormal Child Psychology	A Lease	3
PSYC 3230E	Abnormal Psychology	Trina Cyterski	2

<div class="util-scrollable-content">
  <table>
    <thead>
      <tr>
        <th scope="col">Course</th>
        <th scope="col">
          <span class="cmp-sortable-cell">
            Course Title
            <button
              class="cmp-sortable-cell__icon cmp-sortable-cell__icon--down cmp-sortable-cell__icon--active"
            >
              Sort Descending
            </button>
          </span>
        </th>
        <th scope="col">Instructor</th>
        <th scope="col">Credit Hours</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">HDFS 3930E</th>
        <td>21st-Century Intimate Relation</td>
        <td>Jennifer Gonyea</td>
        <td>3</td>
      </tr>
      <tr>
        <th scope="row">EPSY 4240E</th>
        <td>Abnormal Child Psychology</td>
        <td>A Lease</td>
        <td>3</td>
      </tr>
      <tr>
        <th scope="row">PSYC 3230E</th>
        <td>Abnormal Psychology</td>
        <td>Trina Cyterski</td>
        <td>2</td>
      </tr>
    </tbody>
  </table>
</div>

Styling Details

Element	Style
`thead tr`	Black background, white text
`caption`	Left-aligned, red left border (0.375rem)
Even rows	Light gray background
Odd rows	White background
Cell padding	0.5rem
Column dividers	Subtle inset box-shadow

Accessibility

Use <caption> to give each table an accessible name that describes its content.
Use scope="col" on column headers and scope="row" on row headers so assistive technology can associate cells with their headings.
For sortable columns, the sort button should have a clear accessible name (e.g., “Sort Descending”). Use aria-sort="ascending", aria-sort="descending", or aria-sort="none" on the <th> to communicate the current sort state.
Wrap tables in .util-scrollable-content for horizontal scrolling, but ensure keyboard users can still reach all cells. The scrollable container should be focusable (tabindex="0") with an accessible label when content overflows.
Avoid using tables for layout — reserve them for tabular data only.

Print Styles

In print mode, tables use black borders, transparent backgrounds, and black text for maximum readability.