UMBC Table Layouts

Basic Table Structure

Use this as your foundation for any table layout:

<table class="umbc-table" role="table">
  <thead>
      <tr>
          <th scope="col">Column One</th>
          <th scope="col">Column Two</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Row 1, Cell 1</td>
          <td>Row 1, Cell 2</td>
      </tr>
      <tr>
          <td>Row 2, Cell 1</td>
          <td>Row 2, Cell 2</td>
      </tr>
  </tbody>
</table>

Basic Table Structure with Row Header

Use this as a table with column and row header layout:

<table class="sights-table">
    <thead>
        <tr>
            <th scope="col">Column One</th>
            <th scope="col">Column Two</th>
            <th scope="col">Column Three</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row One</th>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
        </tr>

        <tr>
            <th scope="row">Row Two</th>
            <td>Row 2, Cell 2</td>
            <td>Row 2, Cell 3</td>
        </tr>

        <tr>
            <th scope="row">Row Three</th>
            <td>Row 3, Cell 2</td>
            <td>Row 3, Cell 3</td>
        </tr>
    </tbody>
</table>umn

Alternating Row Background Table

<table class="umbc-table" role="table">
  <thead role="rowgroup">
    <tr role="row">
      <th scope="col" role="columnheader">Column One</th>
      <th scope="col" role="columnheader">Column Two</th>
      <th scope="col" role="columnheader">Column Three</th>
      <th scope="col" role="columnheader">Column Four</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell">Row 1, Cell 1</td>
      <td role="cell">Row 1, Cell 2</td>
      <td role="cell">Row 1, Cell 3</td>
      <td role="cell">Row 1, Cell 4</td>
    </tr>
    <tr role="row">
      <td role="cell">Row 2, Cell 1</td>
      <td role="cell">Row 2, Cell 2</td>
      <td role="cell">Row 2, Cell 3</td>
      <td role="cell">Row 2, Cell 4</td>
    </tr>
    <tr role="row">
      <td role="cell">Row 3, Cell 1</td>
      <td role="cell">Row 3, Cell 2</td>
      <td role="cell">Row 3, Cell 3</td>
      <td role="cell">Row 3, Cell 4</td>
    </tr>
  </tbody>
</table>

Table with No Alternating Row Background and Highlighted Column

<table class="umbc-table nostripes" role="table">
  <thead role="rowgroup">
    <tr role="row">
      <th scope="col" role="columnheader">Column One</th>
      <th scope="col" role="columnheader">Column Two</th>
      <th scope="col" role="columnheader">Column Three</th>
      <th scope="col" role="columnheader">Column Four</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell">Row 1, Cell 1</td>
      <td role="cell">Row 1, Cell 2</td>
      <td role="cell">Row 1, Cell 3</td>
      <td role="cell">Row 1, Cell 4</td>
    </tr>
    <tr role="row">
      <td role="cell">Row 2, Cell 1</td>
      <td role="cell">Row 2, Cell 2</td>
      <td role="cell">Row 2, Cell 3</td>
      <td role="cell">Row 2, Cell 4</td>
    </tr>
    <tr role="row">
      <td role="cell">Row 3, Cell 1</td>
      <td role="cell">Row 3, Cell 2</td>
      <td role="cell">Row 3, Cell 3</td>
      <td role="cell">Row 3, Cell 4</td>
    </tr>
  </tbody>
</table>

Alternating Row Background Table with Highlighted Row

<table class="umbc-table highlight-col-1" role="table">
  <thead role="rowgroup">
    <tr role="row">
      <th scope="col" role="columnheader">Column One</th>
      <th scope="col" role="columnheader">Column Two</th>
      <th scope="col" role="columnheader">Column Three</th>
      <th scope="col" role="columnheader">Column Four</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell">Row 1, Cell 1</td>
      <td role="cell">Row 1, Cell 2</td>
      <td role="cell">Row 1, Cell 3</td>
      <td role="cell">Row 1, Cell 4</td>
    </tr>
    <tr role="row">
      <td role="cell">Row 2, Cell 1</td>
      <td role="cell">Row 2, Cell 2</td>
      <td role="cell">Row 2, Cell 3</td>
      <td role="cell">Row 2, Cell 4</td>
    </tr>
    <tr role="row">
      <td role="cell">Row 3, Cell 1</td>
      <td role="cell">Row 3, Cell 2</td>
      <td role="cell">Row 3, Cell 3</td>
      <td role="cell">Row 3, Cell 4</td>
    </tr>
  </tbody>
</table>

Accessibility Notes

Uses proper table elements (<table>, <thead>, <tbody>, <th>, <td>) to ensure screen readers and assistive technologies can interpret the table structure correctly.
The scope="col" and scope="row" attributes on <th> elements define which cells are headers for columns and rows. This helps users of screen readers understand the relationship between headers and data cells.
The use of ARIA roles such as role="table", role="rowgroup", role="row", role="columnheader", and role="cell" further clarifies the table structure for assistive technologies, improving navigation and comprehension.
Alternating row backgrounds and highlighted columns/rows make it easier for users (including those with cognitive disabilities or visual impairments) to track data across the table.

These practices collectively enhance the accessibility of tables, making them easier to navigate, understand, and use for people with disabilities.

You may visit here to get the table view New Table Class umbc-table