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.
In HTML email, Tables are the most reliable way to position text and images; see Designing an Email template. In web pages, on the other hand, Inline Boxes are the preferred way to position elements. Tables should only be used to display data in a tabular format, not to position text and images. Tables used in web pages to position elements make those pages less accessible to users with disabilities and to viewers using smaller devices.
In print, Tables can be used for both purposes.

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 http://www.w3schools.com/html/html_tables.asp.

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. 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>).*

   * 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 until the root of the body.

4. Click Next and select which fields should show up in the Dynamic Table.

   The order of the fields indicates in which order columns are displayed in the dynamic table, from left to right. Select a line and then use the Up and Down buttons to change the order of the columns.

   You could change the placeholder for each data field as well; just click a placeholder to edit it.

5. Click Next and use the drop-down to select the desired table style.

6. Uncheck the box Resizable columns if the columns should not be resizable from the Design and Preview modes in the workspace. This is useful if the column size is determined in the Source mode or in a style sheet.

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

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.

Styling a Table

Tables can be styled using the Format > Table menu item, while individual selected cells can be styled using the Format > Table Cell menu item.

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.