Table

Tables serve two different purposes: they are a way to display data in a tabular format, and they are also a way to position elements on a page.

HTML element: table

When you add elements, such as text, images or a table, to the content of a template, you are actually constructing an HTML file. It is possible to edit the source of the HTML file directly in the Designer; see Editing HTML.

The HTML tag of a Table is <table>. Tables are divided into table rows with the <tr> tag. Table rows are divided into table data with the <td> tag. A table row can also be divided into table headings with the <th> tag.

The tags <thead>, <tbody> and <tfoot> can be used to group the header, body, or footer content in a table, respectively.

For information about HTML tables and a list of attributes, see MDN Web Docs - HTML Table element.

Inserting a Table

1. On the toolbar, click the Insert Table button, or on the menu select Insert > Table > Standard.

2. Enter the Table's desired attributes:

   • ID: a unique identifier for the Table. IDs are used to access the Table from scripts and as CSS selectors for style rules.

   • Class: A class identifier for the Table. Classes can be shared between elements and are used to access the Table from scripts and as CSS selectors for style rules.

   • The number of rows for the header, body and footer of the Table.

   • The number of columns

   • The width of the Table.

3. Check the option Absolute to give the Table an absolute position, or use the Location drop-down to select where to insert the Table:

   • At cursor position inserts it where the cursor is located in the template.

   • Before element inserts it before the HTML element in which the cursor is currently located. For example if the cursor is within a paragraph, the insertion point will be before the <p> tag.*

   • After start tag inserts it within the current HTML element, at the beginning, just after the start tag.*

   • Before end tag inserts it within the current HTML element, at the end, just before the end tag.*

   • After element inserts it after the element in which the cursor is currently located. For example if the cursor is within a paragraph, the insertion point will be after the end tag of the paragraph (</p>).*

   • Replace inserts it in place of the currently selected element. (This option is not available when inserting content in a Master Page.)

   * If the current element is located inside another element, use the Elements drop-down to select which element is used for the insertion location. The list displays every element in the breadcrumbs, from the current selection point down to the root of the body.

   Note: HTML has some restrictions as to which types of elements are allowed as children of other elements. For example, a paragraph element is not allowed to have children that are block level elements - like a Div or a Table. If inserting content at the selected location would produce invalid HTML the final result may be different than expected. For example, when you insert a Div into a paragraph, the paragraph gets split in two. This means you end up with two paragraphs with the Div in between.

   Note:

   • Tables with an absolute position are only useful in Print sections.

   • Tables on a Master Page have to have an absolute position, unless they are located inside another element with an absolute position.

4. Click Next and select the desired table style. The top left actually applies no styling to the table. The style can be easily changed afterwards; see Styling a Table.

5. Uncheck the box Allow resizing if the columns should not be resizable in the workspace (in Design mode). This is useful if the column size is determined in the Source mode or in a style sheet.

6. Click Finish to add the Table to the section.

Header and footer

Adding a header or footer

To add a header or footer to an existing Table, right-click the Table and then select Table > Insert thead or Insert tfoot, on the shortcut menu.

Alternatively, click in one of the cells and select Insert > Table > Insert thead or Insert tfoot, on the menu.

Deleting a header or footer

To delete a header or footer, simply right-click the header or footer and select Row > Delete on the shortcut menu.
If the deleted element was targeted by a script, you will be asked if you want to delete the script as well.

Rows and columns

Adding a row or column

To add a row or column to an existing Table, click in a cell. Then click the black triangle next to the Insert Row Above button on the toolbar, and click one of the Insert buttons, or select one of the options in the Insert > Table Elements menu.

Alternatively, right-click the Table and on the shortcut menu, select Row > Insert Above or Insert Below, or select Column > Insert Before or Insert After.

Deleting a row or column

To delete a row or column, simply right-click the row or column and select Row > Delete or Column > Delete on the shortcut menu. If the deleted row was targeted by a script, you will be asked if you want to delete the script as well.

Styling a Table

The Insert 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.

Resizing and moving a Table

Resizing a Table

• Select the Table (see Selecting an element) and type the desired width and height under Geometry on the Attributes pane.

• Select the Table and select Format > Table, on the menu. On the Table tab, change the width and height of the Table.

• Click in the Table and drag the handles to resize it. Press the Shift key while dragging to scale the Table proportionally.
  This option only works in a Print section, with a Table that has an absolute position and for which resizing is allowed.

  • If the position of the Table isn't absolute, right-click the Table and on the shortcut menu, select Convert to absolute. (This option isn't available for Tables on a Master Page, as they must always have an absolute position, or be located inside another element with an absolute position.)

  • Select the Table (see Selecting an element) and then, on the Attributes pane, check the option Allow resizing.

Moving a Table

The easiest way to move a Table in relation to other content is this:

1. Open the Outline pane (next to the Resources pane).

2. Select the Table on the Outline pane.

3. Drag and drop it somewhere else in the outline.

To move a Table with an absolute position, you can also:

• Click in the Table and then drag the border to move the Table.

• Select the Table (see Selecting an element) and type the desired values in the Top and Left fields on the Attributes pane.

• Select the Table and select Format > Table, on the menu. On the Table tab, change the Positioning values.

Hiding the border

When using a Table to position other elements, you will want to hide the borders of the Table. To do this, set the width of the border to 0; see Border.