Tables

Creating a table

Use the Insert tab of the editor to draw the number of cells and rows you need. Input information into your table. Then use the Inspector to apply the class table and it will properly space your information and underline each row. It will also make your table responsive, so it will change dimensions depending on the user’s screen size.

ADA Accessibility: Tables are used to create table formatting used on the website (rows are underline). For the table to be ADA accessible for website users of all abilities, you must add: Table Captions, Identify Row and Column Headers, Associate the Data Cells with the Appropriate Headers, and Use Proportional Sizing, Rather than Absolute Sizing | Please review: https://webaim.org/techniques/tables/data

Table CSS Styling: If you'd like to add any table stylings, we have a few classes available:

• table to create table formatting used on the website (rows are underline).

• table-bordered to outline the table cells.

• table-striped to add shading to alternate rows.

• table-hover highlights the row on mouse over.

• Other Class Options: Other table classes can be added such as: See Examples

Table Notes:

• Table Tab - When you are working in a table, the Ektron editor will display an additional Table tab with tools. If you click beside the table, that tab will offer Table Row tools, if you click above it will offer Table Column tools. These tools let you add or remove rows and columns or perform other table functions.

• Case matters – if a class has upper and lower case letters, it must be typed that way to work (these classes are all lowercase)

• Spaces - Remember to add a space in between each class.

• Multiple Classes - You can use more than one class style on the same table by adding a space between each one.
  Example using all options: table table-bordered table-striped table-hover
  HTML Code: <table class="table table-bordered table-striped table-hover">
  View Example: on the SDSMT website

For more information on table stylings, see Table Example on SDSMT Website and Accessibility Requirements

Merging Table Cells

In order to merge cells together, first select multiple cells by selecting a row, column, or using shift select. Then click the "Merge Cells" button in the table menu, this will put all the information into a single large cell.

Splitting Cells

Select the cell you wish to split and select the "Split Cell" button. This is basically an “undo” for when you have previously merged cells together.

Add and Delete Rows and Columns

To add or delete entire rows, select the row and the editor will bring up several new options. These include adding rows, deleting rows, and turning a row into a table header. The same options can be used for columns.

Adding a Table Caption

You can add a caption to the table by clicking the "Table Caption" button in the table menu. The captions will be inserted at the top of the table.