Table Alpha

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.

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.

• 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.