Wilmington University

Wilmington University Design System

Tables

Tables should be used for displaying a structured set of data (Tabular Data). When you have structured data it fits perfectly into a table because it is rigid and rows and columns make it easy to identify and interpret information. When using tables properly you improve the accessibility and overall user experience of a website. Tables are helpful for screen readers and visually impaired individuals to easily tab through data on a webpage.

The downfall to tables is they are often not used properly on a website. Tables present a huge accessibility risk when not used appropriately on the website. You should NEVER use a table strictly for layout purposes. This hinders accessibility for the visually impaired and screen readers. The content in a table is not interpreted correctly due to complex markup which will confuse readers. Using tables for simple layout purposes can make maintaining and debugging code harder. Also, tables are not easily made responsive so content could potentially push off the web page and not break down properly as the screen size changes. This is why you should ONLY use tables for tabular data. To properly layout content that is not tabular data on a webpage you should refer to our Layout Grid.

For more complex tables requiring unique layouts or large quantities of data, a Web Communications team member will need to assist in structuring and developing the table. Please reach out to a team member when these circumstances arise.

Table Markup

The example below is markup for a simple table of structured data. You can easily add the .Table class to any table to have predefined styling for a simple table. You should always include a caption for your table and a row of header cells at the top to label your columns. Table headings and data can be broken up with a thead and tbody tag.

Simple Table

F-1 eligible degree programs.
Academic Program Major/Concentration
Accounting & Finance (Integrated Degree), B.S. General (ACFN-BS)
Accounting, B.S. General (ACCT-BS)
Applied Business, B.S. General (BS-BU-APBU)
Applied Mathematics, B.S. General

See the Pen Simple Table by Wilmington University (@WilmU01) on CodePen.

Table Column Width

By default a table applies an auto width to each column to fill the available space. This may not always result in the best visual layout based on how much data will be included in different columns. You can add additional columns and apply classes to clearly define the desired width of each column. You will add the classes to the header cells, which will dictate the width for every cell in that column.

The example below uses 40%, 40%, 20%, for each of the three column widths, respectively. The total width for all columns cannot exceed 100% or it will break the layout on the webpage. A full list of width options can be found below.