Tables

Tables should only be used for tabular data, as their responsive behavior is limited to simple scaling. Placing tables within Grid Row/Column components will allow for a more consistent layout structure between mobile and desktop screen sizes. Table styling is provided via Foundation: http://foundation.zurb.com/docs/v/4.3.2/components/tables.html

Tables will partially scale to fit their container, but they are not responsive, and so should not be used for layout. To achieve diffeerent responsive table layouts across breakpoints, multiple tables should created and then displayed using Foundation's visibility classes. Tables will be styled the same regardless of whether they are created using Custom HTML or the Table component. Make sure to set the cell type to <th> instead of <td> to achieve the heading style. Heading tags like <h5> can be used within cells for further styling refinement.

AEM Table Component:

Fees & Capacity MAY 3-MAY 30 MAY 31-FEB 8 FEB 9-APR 30 RACE WEEK (IF AVAILABLE) CAPACITY STATUS
5K $30 $35 $40 $50 400 OPEN
10K $40 $45 $55 $65 700 OPEN
HALF MARATHON $65 $75 $85 $100 900 OPEN
MARATHON RELAY $150 $170 $190 $210 150 OPEN
MARATHON $75 $80 $95 $110 500 OPEN
50K $80 $85 $100 $115 700 OPEN
GORE-TEX® 50 MILE $90 $95 $110 $125 650 OPEN

 

Custom HTML Table:

Fees & Capacity
May 3 - May 30 May 31 - Feb 8 Feb 9 - Apri 30 Race Week (if available) Capacity Status
5K $30 $35 $40 $50 400 Open
10K $30 $35 $40 $50 400 Open