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.
|Fees & Capacity||MAY 3-MAY 30||MAY 31-FEB 8||FEB 9-APR 30||RACE WEEK (IF AVAILABLE)||CAPACITY||STATUS|
|GORE-TEX® 50 MILE||$90||$95||$110||$125||650||OPEN|