UMBC Table Layouts

Basic Table Structure

Use this as your foundation for any table layout:

<p id="example-table-description" class="screen-reader-text">
   Table with two columns: Column One with two rows and Column Two with two rows
</p>
<table class="umbc-table" role="table"
       summary="Table with two columns: Column One with two rows and Column Two with two rows."
       aria-label="Example Table"
       aria-describedby="example-table-description">
  <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:

<p id="example-table-description" class="screen-reader-text">
  Table with three columns and three rows. The first column contains row headers.
</p>
<table class="umbc-table" role="table"
       summary="Table with three columns and three rows. The first column contains row headers."
       aria-label="Example Table"
       aria-describedby="example-table-description">
  <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>

Alternating Row Background Table

<p id="example-table-description" class="screen-reader-text">
  Table with four columns and three rows displaying sample data with an alternating row background.
</p>
<table class="umbc-table" role="table"
       summary="Table with four columns and three rows displaying sample data with an alternating row background."
       aria-label="Example Table"
       aria-describedby="example-table-description">
  <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

<p id="example-table-description" class="screen-reader-text">
  Table with four columns and three rows displaying sample data with no alternating row background and a highlighted column.
</p>
<table class="umbc-table nostripes" role="table"
       summary="Table with four columns and three rows displaying sample data with no alternating row background and a highlighted column."
       aria-label="Example Table"
       aria-describedby="example-table-description">
  <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

<p id="example-table-description" class="screen-reader-text">
  Table with four columns and three rows displaying sample data with an alternating row background and the first column highlighted.
</p>
<table class="umbc-table highlight-col-1" role="table"
       summary="Table with four columns and three rows displaying sample data with an alternating row background and the first column highlighted."
       aria-label="Example Table"
       aria-describedby="example-table-description">
  <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.
The summary attribute on the <table> element provides a brief description of the table's purpose and structure. While deprecated in HTML5, it is still recognized by older screen readers and assistive technologies, offering an additional layer of context for users who rely on them.
The aria-describedby attribute links the table to a hidden <p> element (visually hidden using the screen-reader-text class) that contains a longer, plain-language description of the table's content and layout. Screen readers announce this description when the user focuses on the table, helping them decide whether to navigate into it.
The aria-label attribute provides a concise accessible name for the table. This is announced by screen readers before the table content, giving users an immediate understanding of what the table represents — particularly useful when multiple tables appear on the same page.
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 https://sites.umbc.edu/newtableclass/