Display Accessibility Tools

Accessibility Tools

Grayscale

Highlight Links

Change Contrast

Increase Text Size

Increase Letter Spacing

Readability Bar

Dyslexia Friendly Font

Increase Cursor Size

MICHIGAN STATE UNIVERSITY
College of Natural Science
Digital Experience

Tables

Tables allow you to arrange data into rows and columns on a web page, making it easy to display information like schedules, statistics, or other structured data in a clear format. Tables should never be used for layout, such as to achieve a side-by-side column design. Modern Campus includes a table designer as part of the WYSIWYG toolbar, but it is recommended to use the Table component to achieve better accessibility and mobile usability.

There are 3 different versions (Styled, Striped, Striped and Hover), each with their own unique design elements.

Demo

This is a demo of a styled table.
Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data
This is a demo of a striped table.
Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data
This is a demo of a striped and hover table.
Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data

Instructions for use

While editing a page:

  1. Move your cursor to the area of the page you wish to add the component.
  2. Click the "Insert Snippet" button in the editor toolbar.
  3. Select the Table-Styled, Table-Striped or Table - Striped and Hover snippet from the list.
  4. Add a caption at the top of the table, this should be a short heading to tell users what information is contained within the table.
  5. If you wish to add or remove rows and/or columns, click the table to select it. Use the table editing buttons that appear to add or remove rows and columns as needed.
  6. Enter in the column headings and the table data.
  7. Click the "Save" button.