Styling Dynamic Tables

The Insert Dynamic Table wizard lets you select a style for the table.

Tables are styled via CSS: when the wizard adds a Table, the chosen theme's class is added to the <table> element, and, if it doesn't exist yet, the default_table_styles.css file is added to the resources of the template. This CSS file contains the CSS rules for all table themes. (See: Styling templates with CSS files.)

To change the theme, you could simply select the table and change its class on the Attributes pane.
The available theme classes are: table--grid, table--colgrid, table--minimalist, table--dark, table--light, table--striped, table--topbar, table--portfolio. (Note the double dash in the class name.)

The default_table_styles.css file is read-only, but of course you could overwrite styles and create your own theme, using your own style sheets.
Regardless, you can change the font, font size and color, the borders, the cell padding (the distance between the edge of the cell and its content), and the background color or image of the table and its cells, via the Formatting dialog.

Both approaches are explained in the topic: Styling a table.

Dynamic Tables are best styled via CSS (see Via a style sheet), for two reasons:

  • With local formatting, all rows that are added on the fly (in Preview mode and in output) will look exactly the same as the first one. Alternating row colors, for example, in dynamically added rows can only be done via CSS.

  • When generating output from a template, a Dynamic Table is created slightly faster when it's styled via Cascading Style Sheets than when it's styled with local formatting.

Here are a few tips on how to target rows and cells in a Dynamic Table.

  • There are CSS selectors with which you can target every so-maniest row (see Styling the first, last and nth rows).

  • In the output, Dynamic Table rows are repeated including any classes that are set on the row and on its contents.

  • Dynamic Tables and their rows and cells have some special attributes that can be used as selector. See: A Dynamic Table's data- attributes.

Tip: Styling Dynamic Tables with scripts is demonstrated in this howto: How to script the appearance of data in a Dynamic Table

Utility classes for text in a Dynamic Table

In order to style text in a Dynamic Table, you could use some classes for which there are style rules in the default style sheet for Dynamic Tables (default_table_styles.css). The classes are:

  • .u-text-left

  • .u-text-center

  • .u-text-right

  • .u-text-bold

  • .u-text-normal

  • .u-text-italic

These classes will be applied when you choose Use CSS utility classes as Text Alignment mode when creating a table. To change the alignment after the table has been created, select the cell (see Selecting an element) and then type the desired class in the Attributes pane.

Note that if you selected Via inline styles as Text Alignment mode when creating the table, the utility classes won't work, unless you remove the inline style first. Inline styles always get applied since they are more specific. (For an explanation see Using a more specific CSS rule.)

Changing styles based on a data field value

Changing the styles of a row or cell in a Dynamic Table, based on the value of a data field, requires a script. See Using scripts in Dynamic Tables.

Resizing a Dynamic Table

To change the width of a Dynamic Table or of a column in a Dynamic Table, select it (see Selecting an element) and type the desired width as a percentage in the respective field on the Attributes pane.
It is also possible to resize colums via drag-and-drop (in Design mode only). To allow for this, select the table and check the option Allow Resizing on the Attributes pane.

The height of the Dynamic Table is adjusted automatically to the amount of data added to it in Preview mode or when generating output.
It is however possible to change the height of the rows: click in the row and type the desired height in the respective field on the Attributes pane. All line item rows will have the same height.

Adding leading and trailing space to a Dynamic Table

The best way to add extra space at the top or bottom of a Dynamic Table is to set the Table's top or bottom margin, respectively (see Styling a table).
Do not use empty lines (<br>) or paragraphs (<p>) to add trailing space to a table. In Print output they might end up on a next page without any other visible content, which would still be printed because lines and paragraphs must be treated as content, even when they are empty.