Setup
The maximum width is set and the layout type selected - fixed or auto. There is a checkbox for turning on the option to give the table a name.
The headings are turned on as required and their names entered.
The rows are added using the EverWeb widget API Assets List and the data for each cell is entered in the boxes below it. This allows row data to be entered quickly by tabbing down the boxes.
To add a row, click the Add button and select the entry that appears in the list.
Enter the label text and data for each cell in the row. The label text is the same as the corresponding heading and is required for the mobile version.
Once the data has been entered, select the item in the list again and will be editable. Give it a number or name to make it easy to identify if changes need to be made at a later date.
Add more rows as required.
Testing
After adding a couple of rows, it's a good idea to test the page in the browser using EverWeb's Preview mode or by publishing to a local folder.
Reduce the browser width to below the break point setting to see if the mobile version has turned out as planned.
The break point is the width at which the layout changes from one type to another. The actual break point is chosen from a drop down list in the widget settings and should be selected to suit the amount of content per cell and the number of columns used.
Styles
The widget can use a web safe font or a non web safe font or a Google hosted one with a web safe fallback and both the cells and the table itself can have borders if required.
The header can have a contrasting background and font color.
The cell border and the table's overall border can be set separately - each having a control for border width and color.
Container
The table's container has adjustable background color and opacity and a control for setting the vertical spacing from the items abve and below it.