Table Alpha


An accessible, HTML5-compliant table.

Table Alpha
Available for:
Buy Frames
Back to library


Table Alpha is a great frame for any situation where an HTML5-compliant table is required. A big mistake modern developers make is using techniques like flexbox and grid for tabular data. While we don’t use table elements for layout anymore, they’re still essential for displaying tabular data.

The structure of Table Alpha is as follows:

  • Table Wrapper div
    • Table table
      • Caption caption
      • Table Head thead
        • Header Row tr
          • Header Data th
            • Header Text span
      • Table Body tbody
        • Table Row tr
          • Table Data td
            • Data span

It’s important that you maintain this structure at all times as you populate your table.

When using a query loop, place the loop on the table row tr element in the table body.

Header Data on Mobile

On mobile devices, the header row of the table is hidden. This is a classic approach to creating responsive tables, but it leaves all of the data cells with no header context.

To account for this, each data cell has a data attribute attached to it called data-cell.

Data Cell Attributes

The value of this data attribute should coincide with the column header. This will be output above the data on mobile devices to give the data a contextual heading.

Query Loop Compatible


This frame uses the following locally scoped variables to make it easier for you to edit the style or behavior of this frame. Variables can be viewed or edited from the CSS tab.

Accessibility Notes

  • Tables must contain specific HTML in a specific structure in order to be HTML5 compliant. Be careful when dragging elements to new positions. Make sure you maintain proper structure at all times.
  • The table, header, body, rows, and cells all have role attributes. These should not be removed, nor should additional elements of this type be added without the proper attributes. The safest way to create more of these elements is to duplicate the existing elements.

Related Frames

No related frames.

Related Components

No related components.


    Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.