Using tables

Misty Flowers

November 05, 2020 00:32

Composer's table feature lets you organize data in a Content element, with settings for structure, styling, and accessibility. For best results on mobile, copy a pre-styled responsive table from your Style Guide rather than inserting a bare table from the toolbar.

💡Quick answers

Why copy a table from the Style Guide instead of using the toolbar icon? Style Guide tables are responsive and school-branded, designed to stack correctly on mobile; toolbar tables have no styling and may break on small screens.
What is the most important Table Properties setting for mobile? Set Width to 100% so the table shrinks or grows to fit any screen size instead of overflowing at a fixed pixel width.
What is the difference between Table Properties and Cell Properties? Table Properties control the overall grid (headers, width, alignment); Cell Properties fine-tune individual cells (row/col span, background color, word wrap).
How do you merge cells horizontally or vertically? Use Col Span in Cell Properties to span across columns, or Row Span to span across rows.
Must-do steps for an ADA-accessible table? Set Headers (first row, first column, or both) in Table Properties, add a Caption, avoid empty cells, and ensure sufficient text-to-background color contrast.

The Table feature within the editor allows you to organize data clearly. For the best results on mobile devices, we recommend using pre-styled responsive tables from your site's Style Guide rather than building them from scratch.

The 100% rule: Ensure your Table Properties width is set to 100% (not a fixed pixel number like 800px) so it stretches to fit the user's screen.
Table alternatives: For complex data, consider using a Layout Element with multiple columns or the Resources Module, which is natively responsive. Check out our Support Blog for an Extreme Site Makeover: Tables Edition to see how to turn messy tables into beautiful, responsive layouts.

Step 1: Copy a responsive table from your Style Guide

Instead of inserting a new table into your Content element,

Navigate to your Production Branch and locate your Style Guide page.
Find the Tables section and enter Compose or Edit mode.
Hover over the element holding the responsive table and click the Clone button to copy the element holding the table(s).
Navigate to the page where you'd like to insert your table.

Step 2: Paste your responsive table into a Content element

Now that you have located and grabbed your responsive table(s), now you are ready to paste and customize it!

Click Add Element on this new page.
Look for the element with the Tables in your clipboard. Click Paste this Element.
Click Edit Content to start editing this table.

Step 3: Customize your table and cell properties

Once the table is added, you can right-click anywhere on the table or click on the Tables button in the editing toolbar.

Table properties allows you to add or delete cells, rows, and columns, and so much more! You might wonder when to use Table properties vs Cell properties?

Table and Cell Properties compared

Feature	Menu location	Best used for...
Headers	Table Properties	Designating the first row or column as a "label" for accessibility.
Width	Table Properties	Setting the overall table size (always use 100% for mobile).
Alignment	Table Properties	Centering or shifting the entire table on the page.
Row span	Cell Properties	Stretching a single cell vertically to cover multiple rows.
Col span	Cell Properties	Stretching a single cell horizontally across multiple columns.
Background color	Cell Properties	Highlighting a specific cell or row with a brand color.
Word wrap	Cell Properties	Forcing text to stay on one line or wrap within a specific cell.

Customize table properties

Once you have pasted your table, you can adjust the overall structure and behavior using the Table Properties window.

How to access table properties:

For a new table: The properties window will pop up automatically after you click the Table icon in the editing toolbar.
For an existing table: Right-click anywhere on the table and select Table Properties from the menu. This right-click menu also allows for quick changes like adding or deleting cells, rows, and columns.

Key settings to adjust:

Headers: Use the dropdown menu to designate the first row, the first column, or both as headers. This is a critical step for ADA accessibility.
Width: Ensure the width is set to 100%. This is the most important setting for responsiveness, as it allows the table to stretch or shrink to fit any screen size.
Alignment: Use this to center the entire table or align it to the left or right of your content element.

After making your adjustments, click OK to apply the changes to your content element.

Customize cell properties

While table properties control the entire grid, cell properties allow you to fine-tune individual areas of your table. This is where you handle advanced layouts like merging cells and adding background colors.

How to access cell properties:

Right-click the specific cell you wish to edit.
Navigate to Cell > Cell Properties in the pop-up menu

Key settings to adjust:

Row span: Enter a number (e.g., 2) to stretch a cell vertically across multiple rows. This is the professional way to "merge" cells vertically.
Column span: Enter a number to stretch a cell horizontally across multiple columns (perfect for table titles).
Word wrap: Use this to force text to stay on one line or allow it to wrap naturally within the cell.
Background color: Apply a specific hex code or brand color to highlight a specific row or individual cell for emphasis.

⚠️ Important Note

Every site has its own custom table styling, found in the Styles dropdown. This styling can be added within the Table Properties window.

Accessibility checklist: ADA-compliant tables

To ensure all members of your community can access the information in your tables, including those using screen readers, follow these "must-do" steps:

Define headers: Always go to Table Properties and set the Headers dropdown to First Row, First Column, or Both. This tells a screen reader which cell is a "label" and which is "data."
Add a caption: In Table Properties, provide a brief "Caption" (e.g., 2026 Varsity Basketball Schedule). This acts like an Alt-Text for the entire table.
Avoid empty cells: If a cell has no data, type "N/A" or "None" instead of leaving it blank. Screen readers can sometimes skip over entire rows if they encounter a string of empty cells.
Use row span sparingly: While Row Span is great for organization, complex "nested" tables with multiple spans can be confusing for assistive technology. If your table has more than 2-3 spans, consider breaking it into two smaller, simpler tables.
Check color contrast: If you use Cell Properties to change the background color of a row, ensure the text color remains high-contrast (e.g., do not use light gray text on a white background).

FAQs

Q: My table looks great on my desktop but is cut off on my iPhone. How do I fix it?
A: Right-click the table, go to Table Properties, and check the Width. If it is set to a specific number (like 800px), change it to 100%. This forces the table to shrink or grow based on the screen size.

Q: I tried to "Merge" cells but don't see the option.
A: Use the Row Span or Col Span feature in Cell Properties. Entering a "2" in Row Span will "merge" that cell with the one directly below it.

Q: Why should I copy from the Style Guide instead of using the Toolbar icon?
A: The Toolbar creates a "Basic" HTML table with no styling. The Style Guide contains "Responsive" code specifically designed by our designers to handle mobile stacking and school-specific branding automatically.

Q: How do I remove the strange formatting (fonts/colors) after pasting from Excel?
A: When you paste data from external spreadsheets, it often brings over hidden code. Highlight the affected cells and click the Remove Format (Tx icon) in the editor toolbar. This will strip out the "junk" code and force the text to follow your site’s clean, responsive styling.

Q: Can I add links or images inside a table cell?
A: Yes! You can treat a table cell just like the rest of the editor. Simply click inside a cell and use the Link or Image icons in the toolbar to insert your content. Just be mindful of the cell's width on mobile when adding large images.

Q: I accidentally deleted a row. Can I get it back?
A: If you haven't saved the element yet, you can use the Undo button in the editor toolbar (or Ctrl+Z / Cmd+Z). If you have already saved, you may need to go to your Element History to restore a previous version of that content element.

Q: Why is there so much extra space inside my cells?
A: This is usually caused by "Cell Padding." You can adjust this by right-clicking the table, going to Table Properties, and looking for the Cell Padding field. Decreasing this number will make your table more compact.

Q: How do I make a specific row stand out as a secondary header?
A: While the "Headers" setting in Table Properties handles the main labels, you can use Cell Properties to apply a Background Color to a specific row to create a visual "break" or secondary category header.