Section Menu

How to create responsive tables

The tutorial below will explain how to create a table that is properly responsive. By creating tables using the instructions below, tables will be beautiful and functional on all screen sizes and mobile devices. It might be valuable to review the Example Table Styles below to understand and consider the desired look for the table. 

The most critical piece of information needed for creating tables is that they cannot easily be pasted into a page; they should be created from scratch from within the WYSIWYG page editor. Also, note that if repeated content from cell to cell, be sure to copy only the text. Do not select the entire cell.

The following instructions are for creating a table from scratch. However, you may wish to cut/paste from a spreadsheet program such as Excel. While this is a quick way to create a table, the pasted HTML code will contain superfluous formatting which must be removed. Begin with a spreadsheet that has DATA ONLY, no formulas or text/column/row/cell formatting. A quick way to achieve this is to Export from Excel to CSV format, then open the CSV file, and cut/paste from the CSV file.

Please do not use tables to design or layout a page. Tables are only to be used to organize data.

NOTE: All uploading and navigating involved in this tutorial occurs once logged in to OU campus. For instructions on how to log in, watch the Tour video. Be sure to begin log in from the department’s homepage.

  1. Begin by navigating to the page (or creating a new page) needing the table. Choose the Edit button in the upper left corner. Then, click on the green edit button in the content area where the table will appear. This will bring up the WYSIWYG page editor.
    Table instructions: step 1a
    Table instructions: step 1b
  2. Now, click on the Insert/Edit Table icon in the tool bar of the WYSIWYG page editor. This will open the properties window for tables. 
    Table instructions: step 2a
    Table instructions: step 2b
  3. Determine how many columns and rows are necessary for the table and enter those numbers in the corresponding fields. This example will create a three-column, five-row table. Leave the following fields blank: cell padding, cell spacing, width and height. If  anything is entered into these fields, the table will not be responsive. A border can be added to the outside of the table by entering a number in the Border field or a border can be added as part of the class style table-bordered.*  If a caption is needed for the table, click the Table Caption button. This adds an additional cell at the top of the table that can be edited and used for a table title.
    * There is a difference between adding a border and using the class style. Border can control the thickness of the border; the higher the number, the thicker the border and it will have square corners. Using table-bordered will style the border with a thin line that has rounded corners.
    Table instructions: step 3
  4. The last field to address is Class. Class is used to style the table. Click on the drop-down and choose Value. The drop-down will turn into a field. It is recommended that the word table always be entered into this field because it will generate a table that is styled beautifully and will be easier to read. After this, enter the additional style names desired for the table. Note: separate each style with a space. This example will create a table using the condensed, striped, and hover styles so the following is entered into the field: table table-condensed table-striped. Always start by entering just the word table, then follow this with the style name. See below for examples of each style. Complete the table by clicking Insert.
    Table instructions: step 4a
    Table instructions: step 4b
  5. An empty table will appear in the WYSIWYG editor. Take this time to enter the table data into the cells. Notice that additional icons are now available in the toolbar that accommodate adding rows and columns and deleting rows and columns. Hover over each icon to understand its purpose. WARNING: Do not resize the table in the WYSIWYG page editor. This will damage the responsiveness of the table.
    Table instructions: step 5a
    Table instructions: step 5b
  6. After completing the data (and any other content on the page) Save the page. This is the result of the table created in this tutorial.
Color Number Shape
Blue One Circle
Red Two Square
Yellow Three Triangle
Purple Four Octagon

Example Table Styles

These styles can be used in the Class field of the Table Properties window (see step 4 above). As the instructional above illustrates, table styles can be combined to further customize the table, just remember to separate the styles with a space. Test the responsiveness of the table examples below by resizing the browser window.

Default: basic styling, light padding and only horizontal dividers. Enter table in the class field.

Table Heading (appears by clicking the 'Table Caption' button in the properties window)
Color Number Shape
Blue One Circle
Red Two Square
Yellow Three Triangle
Purple Four Octagon

Striped: adds zebra-striping to any table row. Add table-striped in the class field.

Table Heading (appears by clicking the 'Table Caption' button in the properties window)
Color Number Shape
Blue One Circle
Red Two Square
Yellow Three Triangle
Purple Four Octagon

Bordered: adds borders and rounded corners to the table. Add table-bordered in the class field.

Table Heading (appears by clicking the 'Table Caption' button in the properties window)
Color Number Shape
Blue One Circle
Red Two Square
Yellow Three Triangle
Purple Four Octagon

Hover: Enables a hover state on table rows. Add table-hover in the class field.

Table Heading (appears by clicking the 'Table Caption' button in the properties window)
Color Number Shape
Blue One Circle
Red Two Square
Yellow Three Triangle
Purple Four Octagon

Condensed: Makes tables more compact by cutting cell padding in half. Add table-condensed in the class field.

Table Heading (appears by clicking the 'Table Caption' button in the properties window)
Color Number Shape
Blue One Circle
Red Two Square
Yellow Three Triangle
Purple Four Octagon
This is what a table will look like without any classes applied and with a border of 1. Notice that the styling isn't as nice as the tables above.

Color Number Shape
Blue One Circle
Red Two Square
Yellow Three Triangle
Purple Four Octagon

 

Row Highlight Colors: Click in one of the cells in the row you wish to highlight (do not select the entire row). In the Table Row Properties dialog, enter one of the following classes in the class field. These can also be applied to a single cell via Table Cell Properties.

Table Heading (appears by clicking the 'Table Caption' button in the properties window)
Class Color Context
success light green Indicates a successful or positive condition.
error light red Indicates a dangerous or potentially negative condition.
warning light yellow Indicates a warning that might need attention, or as a visible highlight.
info light blue Used as an alternative to the default style, or as a muted highlight.

Options for extremely wide or long data tables

There are more advanced options available to make extremely wide or long data tables fit on smaller screens. Please see Responsive and Searchable Tables in the Advanced section for more information.

©