Facebook Pixel Tables | Western Kentucky University Skip to main content

Tables


Tables can take one of two forms: layout tables and data tables. Layout tables are used to position elements on a Web page and have largely been replaced by the use of Cascading Style Sheets (CSS) to control positioning/layout. Data tables convey a relationship between two or more items, represented by row and column headings. In this case, we will be showing examples of data tables. Tables should not be used to layout content within OU Campus. If you need columns on your page, we suggest using the Column Snippet instead.

 

Table Style Basics

Typically, data tables have two sections: the table head and table body. The table head is typically where column or row headers are specified. The table body contains the related content. It is best practice to use both.

When a table is added using the WYSIWYG editor in OU Campus, it is inserted as the table body only. To use the styles shown below, you will need to edit some of the table, row and cell properties first.

 

Table Headers

To setup a row as a header row, after placing the table on your page, right click the row you want to be a table header row. Select Row > Row Properties from the pop-up menu.

Right-click menu showing Row Properties option

Next, in the Row Properties dialog, change the Row Type to Header and click OK.

Row Properties dialog

Now, you will need to highlight all the cells in your header row and right-click in one of them. Select Cell > Cell Properties from the pop-up menu.

Right-click menu showing Cell Properties option

The last step is to, in the Cell Properties dialog, change Cell Type to Header Cell and click OK. Your table now has a properly configured header row.

Cell Properties Dialog

 

Table Styles

Tables are inheirently not very responsive, and in turn may not display as expected on mobile devices, or devices with smaller screen sizes. However, we have provided some table styles for you, to make them them both stand out a little more, and behave more responsively.

To apply a table style, simply right-click anywhere inside your table and choose Table Properties from the pop-up menu.

 Right-click pop-up menu Table Properties option

From the Table Properties dialog, select a WKU Table class from the Class dropdown list. When you have one selected, click OK. Examples of each style are shown below.

Table Properties dialog

 

Table Style Examples

There are many different table styles to chose from, and several combine different design elements, such as borders, row striping, and hover styles. The labels of the table style classes will indicate which styles to apply to the table.

WKU Table
Applies our base table styles. Header rows will have a red backround with white text, and each table body row will be displayed with a thin gray border under them.

Bordered
Applies a border to the sides of the table and each data cell.

Striped
Applies gray row backgrounds (stripes) to every other row in the table.

Hover
Applies a gray background to each row in the table while hovering over them.

 

Example #1 (WKU Table)

The base WKU Table styles are applied. Header rows are shown with a red backround and white text, and each table body row will be displayed with a thin gray border under them.

Movie Title Date Time
Space Monkey Baby 9/14/2017 2:00 PM
Zoo Howler Spider 9/15/2017 2:00 PM
Capuchin Tree 9/16/2017 5:00 PM
Monkey Banana Baby 9/17/2017 3:00 PM

 

 

Example #2 (Striped)

The base WKU Table styles are applied, see above, as well as a gray row background (stripe) to every other row.

Movie Title Date Time
Space Monkey Baby 9/14/2017 2:00 PM
Zoo Howler Spider 9/15/2017 2:00 PM
Capuchin Tree 9/16/2017 5:00 PM
Monkey Banana Baby 9/17/2017 3:00 PM

 

Example #3 (Hover Rows)

The base WKU Table styles are applied, see above, and when hovering over a row, its background will display gray.

Movie Title Date Time
Space Monkey Baby 9/14/2017 2:00 PM
Zoo Howler Spider 9/15/2017 2:00 PM
Capuchin Tree 9/16/2017 5:00 PM
Monkey Banana Baby 9/17/2017 3:00 PM

 

Example #4 (Bordered)

The base WKU Table styles are applied, see above, and a border is applied to the table sides and data cells.

Movie Title Date Time
Space Monkey Baby 9/14/2017 2:00 PM
Zoo Howler Spider 9/15/2017 2:00 PM
Capuchin Tree 9/16/2017 5:00 PM
Monkey Banana Baby 9/17/2017 3:00 PM

 

Example #5 (Hover/Striped/Bordered)

The base WKU Table styles are applied, see above, as well as all the styles from the previous examples. Every other row has a gray background (stripe) applied; when hovering over a row its background is displayed a slightly darker gray than the stripes; a border is applied around the sides of the table and each data cell.

Movie Title Date Time
Space Monkey Baby 9/14/2017 2:00 PM
Zoo Howler Spider 9/15/2017 2:00 PM
Capuchin Tree 9/16/2017 5:00 PM
Monkey Banana Baby 9/17/2017 3:00 PM

 




Need Assistance?

The WKU ITS Service Desk is here to help. Give us a call, chat with a representative online, use the Self-Help Knowledge Base and more.

Get Help



Some of the links on this page may require additional software to view.

 Last Modified 9/14/18