Table Wizard Guide for Advanced Formatting

New! Table Wizard: The table wizard component allows you to use advanced table formatting for custom tables.

Area

Description & Images

Good to Know!

Area

Description & Images

Good to Know!

Locating the table wizard:

If you need to use formatting from the table wizard click on the table wizard icon, as shown below. Once you click on the icon, you will see the wizard with 3 tabs, as shown to the right.

 The table wizard formatting can be applied to the table, cell, and for accessibility. You can navigate the different tabs to save these settings from both templates and funder reports.

Table formatting is available when using the table wizard, these options would apply to the whole table.

Table options:

  • Width—Changes the width of the table (in pixels, em, or percent).

  • Height—Changes the height of the table (in pixels, em, or percent).

  • Cell Spacing—Specifies the space between the cells

  • Cell Padding—Specifies the padding in the cells

  • Alignment—Specifies the text alignment in the cells.

  • Background—Specifies the background color of the table.

  • CSS Class—Defines the class names for the table element.

  • ID—Defines the id of the table element.

  • Border—Defines the border size (in pixels only) and color.

  • Border Style—Defines the border style (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, and inherit).

  • Collapse borders—Adds an inline style to that table element with the border-collapse: collapse rule (border-collapse property).

 

Cell formatting is available when using the wizard, these options would apply to the individual cell(s) selected prior to saving the formatting.

 

Cell Options:

  • Select All Cells—Applies the changes to all cells in the table.

  • Width—Changes the width of the cell or cells (in pixels, em, or percent).

  • Height—Changes the height of the cell or cells (in pixels, em, or percent).

  • Cell Margin—Defines the margin of the cell or cells.

  • Cell Padding—Defines the padding of the cell or cells.

  • Alignment—Specifies the text alignment of the cell or cells.

  • Background—Specifies the background color of the cell or cells.

  • CSS Class—Defines class names for the cells.

  • ID—Defines the id of the cells.

  • Border—Defines the border size (in pixels only) and color of the cells.

  • Border Style—Defines the border style (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, and inherit).

  • Wrap text—When unchecked, applies a white-space: nowrap style to the cells (white-space property).

 

Accessibility formatting is available when using the wizard, these options would apply to users accessibility to the table feature.

Accessibility options for non-standard browsing like screen readers, accessibility plugins, etc:

  • Header Rows—Allows the user to specify the number of rows in the table that should belong to header and should render <th> cell elements instead of <td>. When creating a new Table, those rows will be placed within a <thead> element.

  • Header Cols—Allows the user to specify the number of columns in the table that would be headers for their respective rows. The cells will be rendered as <th> elements instead of <td>.

  • Caption—Adds a caption element for the table with the respective text.

  • Alignment—Defines the text alignment of the caption.

  • Summary—Adds a summary attribute to the table using value defined. The summary attribute has been deprecated in HTML5 and its use should be avoided when possible.

  • Associate headers—Allows the user to specify the mode in which content cells should be associated with their header cells. it provides the following three options:

    • None - Will not explicitly associate cells. That is the default option and it is appropriate for tables with simple structure (no merged cells).

    • Associate using 'scope' attribute - The wizard will add the appropriate scope attribute to all header cells.

    • Associate using Ids - The wizard will assign IDs to all header cells and will inject headers attribute with the appropriate value to all data (and header, if needed) cells.

 

Â