Tables
HTML tables are a useful tool for sharing information and data on web pages, but they should never be used for positioning content around a page.
Complex tables
Tables with multiple categories and headings can be a challenge to build accessibly. Table headers that span multiple rows or columns are especially problematic. Where possible, simplify tables by breaking up complicated tables into multiple, smaller and simpler tables.
The Web Accessibility Initiative has an extensive guide to HTML tables.
Sample Table
A properly formatted "default" table is available to insert into pages in Modern Campus CMS using the Snippet tool.
| Table header text A | Table header text B |
|---|---|
| Table snippet |
This is a sample table that has some basic styles applied. |
| Controlling column widths |
You can control column widths by assigning a %-based dimension to the header cell. Right-click the cell with the header text "A" and select "Cell Properties" and you'll see a "25%" in the Width field. You can set that number to any value and the column will then automatically resize to always take up that percentage of the total width of the table. The rest of the columns will expand to fill the remaining space, with their individual widths being based on the content inside the table cells. |