Tables

---

Tables can be used to convey a relationship between two or more items, represented by row and column headings. Tables should not be used to layout content within the CMS. If you need columns on your page, we suggest using the Column Snippet instead.

By default, tables inserted using the WYSIWYG editor will not be styled using the WKU theme. Default tables are also not responsive, meaning they could cause overflow issues on small devices. Additional steps must be taken to select the responsive style you want to use, as well as define which cells are table headings.

Step-by-Step Instructions

 

Table Styles

There are many different table styles to chose from, and several combine different design elements. The labels of the table style classes, available in the class dropdown, will indicate which styles to apply to the table.

There are base styles and additional configurations, such as borders, row striping, and row hover styles. Some examples are displayed below, but there are more combinations possible using the available styles.

• WKU Table
• WKU Table - Bordered/Striped/Hover
• WKU Table - Bordered
• WKU Table - Bordered & Striped
• WKU Table - Bordered & Hover Rows
• WKU Table - Striped
• WKU Table - Striped & Hover Rows
• WKU Table - Hover Rows

 

WKU Table

Applies our base table styles, making the table responsive and adding spacing to the cells. 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.

Movie Title	Date	Time
The Matrix	October 10th	2:00 PM
Blade Runner	October 11th	2:00 PM
Ex Machina	October 12th	5:00 PM
Her	October 13th	3:00 PM

 

WKU Table - 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
The Matrix	October 10th	2:00 PM
Blade Runner	October 11th	2:00 PM
Ex Machina	October 12th	5:00 PM
Her	October 13th	3:00 PM

 

WKU Table - 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
The Matrix	October 10th	2:00 PM
Blade Runner	October 11th	2:00 PM
Ex Machina	October 12th	5:00 PM
Her	October 13th	3:00 PM

 

WKU Table - 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
The Matrix	October 10th	2:00 PM
Blade Runner	October 11th	2:00 PM
Ex Machina	October 12th	5:00 PM
Her	October 13th	3:00 PM

 

WKU Table - 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
The Matrix	October 10th	2:00 PM
Blade Runner	October 11th	2:00 PM
Ex Machina	October 12th	5:00 PM
Her	October 13th	3:00 PM