Build and Style Tables

Tables are an effective way to display tabular data on a webpage; in other words, to display data about a number of items with similar properties. As a rule of thumb, any data which is well-suited to display on a spreadsheet would also work well as a table.

Building a Table

In Composer, tables are created and styled using a Content element. To get started, first add a Content element to your page and select the Table icon in the editor.

Screen_Shot_2017-08-11_at_13.45.14.png

The Table icon will open up the Table Properties popup. Here you can set the column and row numbers (required), adjust the table and cell format and apply your table styling. Your table styling will be located under the Class dropdown.

Screen_Capture_on_2017-08-11_at_13-47-51.gif

Editing and Formating Tables

Now that the table is entered into the Content element we can add table data and adjust our table formatting. Enter your data into each of the data cells. Please note that we do not recommend copy-pasting data into the table from another editor, all table data must be entered in the Composer editor. This will ensure that no extraneous formatting is entered into the table and will avoid display errors.

After you enter your data, you can switch to the Table Format editor to edit the table cell format and move rows and columns. To enter click on the Pencil icon.

Screen_Shot_2017-08-11_at_14.30.14.png

Once in the Table Format editor you will see that the top icons have been updated. With these icons you can edit the cell's horizontal and vertical alignment, add/remove/select rows and columns, adjust border styling and change cell background colors.

Adding a Header to Tables

To apply a table header, highlight the top row of the table and click the Rows and Columns icon. Scroll to the bottom of the dropdown to "Toggle as Table Headers".

Screen_Capture_on_2017-08-11_at_15-33-29.gif

Depending on your site build, there may be another method to add the table header styling. Under the Class dropdown in the Table Properties popup you may find a style named "Styled Table with Header". Select this style to add a header to your table. 

Screen_Shot_2017-08-11_at_16.00.58.png

Was this article helpful?
2 out of 5 found this helpful
Have more questions? Submit a request

Comments

0 comments

Please Sign in to leave a comment if you don't see the comment box below.