Creating and Styling Tables

Data tables present tabular information in a grid. They are made up of columns and rows that communicate the meaning of the information. There are several options for styling your data in tables to allow for a clean, visually appealing look.

The use of HTML tables is reserved for displaying data in an organized manner. It is not proper to use table code to control webpage layout or design. To display content on your webpage in multiple columns, please refer to the Boxed Sections Snippets or the List Spread Buttons Snippet

Insert Table

From the table icon table icon in the editor go to Insert Table and select the number of rows and columns for the table. Insert the data into the appropriate fields.

General Table Properties

Using the table icon or right clicking on the table, go to Table Properties.

screen shot of the general tab of table properties

Field Purpose
Width Used to scale the width of the table, defined in percentage (e.g. use 50% to reduce the width of the table by half). This would evenly size all columns. A better option is to use min-width in the Style field of the Advanced Table Properties (see below) so that your tables look good both a desktop and mobile devices.
Height Used to scale the height of the table, defined in percentage (e.g. use 50% to reduce the height of the table by half). We do not recommend using this property.
Cell Spacing Defines spacing between cells. Typically the default is sufficient.
Cell Padding Defines padding within the cell between the border and the text. Typically the default is sufficient.
Border Defines the thickness of cell border. This property is not required when using the “auto striped” CSS class.
Caption Adds a caption field above the table. This field is used for a table heading. All tables are required to have a heading.
Alignment Aligns the page on the table; options are Left, Center, and Right
Class Applies CSS from the Styles drop-down to the table. In order to create a striped table you can select “(custom)” then type “auto striped” or “striped” (without quotation marks) in the blank field below it. Auto striped will automatically alternate stripes on the rows in the table and is recommended. If you use striped you must designate the alternate rows in the code view by adding class=”alt” to the <tr>.

 Advanced Table Properties

In the Table Properties window, select the Advanced tab.

Screen shot of the advanced tab of table properties

Field Purpose
Style Can be used to set a minimum width for the table. This option would allow the individual columns to adjust their width to fit the content. To use this option type “min-width: x%” (without quotation marks) in the field where x is the table width.
Border Color Enter a hex code (e.g. #000EEE) to color the borders of your table. This property is typically not needed.
Background Color Enter a hex code (e.g. #000EEE) to color the background of your table. This property is typically not needed.

Cell Properties

When you have one or more cells selected, right click or go to the table icon, go to Cell and choose Cell Properties.
Screen shot of the general tab of cell properties.

Field Purpose
Width Used to set the width of the cell, defined in percentage (e.g. use 50% to have this cell be half of the table width). The sum of the widths of each cell within a row must equal 100%.
Height Used to scale the height of the cell, defined in percentage (e.g. use 50% to reduce the height of the cell by half). This property is typically not needed.
Cell Type If the content in the cell is a heading, select Heading from this dropdown. You must then select the scope.
Scope When a cell is a heading, you must define whether it is a heading for the row or the column. Select the appropriate choice from the dropdown.
H Align Sets the horizontal alignment of the content in the cell. This property is typically not needed.
V Align Sets the vertical alignment of the content in the cell. This property is typically not needed.
Class Applies CSS from the Styles drop-down to the cell. If you want to create a white row in an auto striped table you can merge the cells in the row, then select (custom) here and type “spacer” (without quotation marks) in the blank field beneath it. This field could still have content in it.

General Row Properties

With your cursor in a cell in the row or the entire row selected, right click or go to the table icon, go to Row and choose Row Properties.

Screen shot of the general tab of row properties

Field Purpose
Row Type If you are including a row at the bottom of your table for notes or references, select Footer from this dropdown. This will automatically style the content as notes. Do not use the Header option. Instead, select the appropriate Cell Properties for headers as described previously.
Alignment Choose the alignment of the content in the row.
Height Used to scale the height of the row, defined in percentage (e.g. use 50% to reduce the height of the row by half). This property is typically not needed.

Advanced Row Properties

In the Table Properties window, select the Advanced tab.

screen shot of the advanced tab of row properties

Field Purpose
Style Can be used to bold the entire row of content by entering “font-weight: bold” (without quotation marks) in the field.
Border Color Enter a hex code (e.g. #000EEE) to color the borders of your row. This property is typically not needed.
Background Color Enter a hex code (e.g. #000EEE) to color the background of your row. This property is typically not needed.