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.

 

Table Headers

When creating tables in the WYSIWYG editor, it's important to ensure that header rows and columns are clearly designated. Headers define the structure of the table, helping to label the data they represent—like identifying columns as "Name," "Date," or "Status."

Why It Matters

1. Accessibility: Properly formatted headers ensure screen readers can associate data cells with the correct labels, making the table usable for people with disabilities.
   • Note: Tables without headers may trigger Final Check errors, which must be resolved before publishing.
2. Readability: Clear headers make tables easier to understand for all users and improve the overall presentation of your content.
3. Consistency: Structured tables look more professional and adhere to web best practices.

How to Format Table Headers

 

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. Remember to format table headers first, or they will not pick up the correct red background header styling.

How to Style Tables

 

Style Options

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