CQ SupportUniversity of CincinnatiCQ Support HomeUniversity of Cincinnati

CQ Support

Tables

Summary:

HTML tables should only be used to display data in tabular form. There are not to be used for positioning of elements within the page's layout.

Getting Started:

Tables can be added to the page from within Text and Text & Image.

Basics:

  • Drag and drop the Text component off the side-kick onto the page. Select the "Table Button"
  • Complete the dialogs as needed.

Designing Tables for Data:

Tables which are populated with tabular data require table headers for accessibility purposes. Table headers define the contents of the column below.

Notes: table rows will alternate white/grey to improve readability in newer browsers.

New Table
  • Select the appropriate option within the dialog labeled "Header".
Existing Table
  • Right-click within the cell and select "Cells > Cell Properties". (Note: this does not function properly in Chrome)
  • Change the Cell Type to "Header". 
  • For Apply To…, select "Entire Row". 
  • Hit "OK" and it will convert that row into a Header.

Related Resources:

Sample Tables:

Note: This table is a reference from an actual site.