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

Items marked with * are required for accessibility.

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 using either this caption or a regular heading immediately before the table.
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>.

You can also begin creating a sortable table by typing “striped table-sortable data” (without quotation marks) in the custom class field. More instructions for completing this type of table setup is at the end of this post.

One other class you can use is “lines” (without quotation marks) to show the cell borders as an alternative to the Border field.

 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.

Sortable Tables

A sortable table allows the user to sort the table by any of the columns. Creating this type of table does require code editing. You can also add caption or footer content to these tables, but not spacer rows.

  1. In the General Table Properties select “(custom)” from the Class dropdown.
  2. In the blank field that appears, enter “striped table-sortable data” (without quotation marks) and click OK.
  3. Enter your content in the fields as needed.
  4. Change to the code view. Code view icon in the toolbar.
  5. Find the table code. It should begin with <table class=”striped table-sortable data” . . .
  6. The first row of the table must be designated as a header row. If it is not already, change the code to make the header row (<thead> and </thead> around the cells). After the <table> tag it should look like:
    <thead>
    <tr>
    <th scope="column">First Column Header</th>
    <th scope="column">Second Column Header</th>
    <th scope="column">Third Column Header</th>
    . . .
    </tr>
    </thead>
    <tbody>
    (the rest of your table content)
  7. Add the class and data-parser attributes to the header cells. The column you want the information to be sorted by default should get a class of “table-th-sort header”, the rest should get a class of “header”, and they all need data-parser=”title”. The beginning of your table code should now look something like:
    <table class="striped table-sortable data">
    <thead>
    <tr>
    <th scope="column" class="table-th-sort header" data-parser="title">First Column Header</th>
    <th scope="column" class="header" data-parser="title">Second Column Header</th>
    <th scope="column" class="header" data-parser="title">Third Column Header</th>
    . . .
    </tr>
    </thead>
    <tbody>
    . . .
  8. Each cell in the rest of your table (look for <td> then needs a title attribute that lists the content that will be used for alphabetizing. For example, if you have a field that is their name (first, last) and you want the table to sort by their last name you could designate the content with the last name first in this attribute. Here is an example of what the <tbody> section of your table could look like:
    <tbody>
    <tr>
    <td title="Rockwell, John J.">John J. Rockwell</td>
    <td title="1979, Rockwell">1979</td>
    <td title="Business Administration, Rockwell">Business Administration</td>
    </tr>
    <tr>
    <td title="Bernard, William J."><a href="{{f:18483798}}">William J. Bernard, Jr.</a></td>
    <td title="1969, Bernard">1969</td>
    <td title="Metallurgical and Materials Engineering, Bernard">Metallurgical and Materials Engineering</td>
    </tr>
    <tr>
    <td title="Nowosad, Joseph"><a href="{{f:18484643}}">Joseph M. Nowosad</a></td>
    <td title="1987, Nowosad">1987</td>
    <td title="Metallurgical and Materials Engineering, Nowosad">Metallurgical and Materials Engineering</td>
    </tr>
    </tbody>
  9. Your full table code could look like:
    <table class="striped table-sortable data">
    <thead>
    <tr>
    <th scope="column" class="table-th-sort header" data-parser="title">Name</th>
    <th scope="column" class="header" data-parser="title">Class Year</th>
    <th scope="column" class="header" data-parser="title">Major</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td title="Rockwell, John J.">John J. Rockwell</td>
    <td title="1979, Rockwell">1979</td>
    <td title="Business Administration, Rockwell">Business Administration</td>
    </tr>
    <tr>
    <td title="Bernard, William J."><a href="{{f:18483798}}">William J. Bernard, Jr.</a></td>
    <td title="1969, Bernard">1969</td>
    <td title="Metallurgical and Materials Engineering, Bernard">Metallurgical and Materials Engineering</td>
    </tr>
    <tr>
    <td title="Nowosad, Joseph"><a href="{{f:18484643}}">Joseph M. Nowosad</a></td>
    <td title="1987, Nowosad">1987</td>
    <td title="Metallurgical and Materials Engineering, Nowosad">Metallurgical and Materials Engineering</td>
    </tr>
    </tbody>
    </table>
  10. Click the OK button to save the code changes. Your table should now have arrows next to each column heading and when you save the content in the editor, you should be able to interact with the table in the Preview screen.