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.
There are two types of tables: standard tables
which are static in nature, and Dynamic Tables which have a variable number of rows depending on a detail
table in the record; see Dynamic table.
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
- On the toolbar, click the Insert table button, or on the menu select Insert > Table > Standard.
- 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 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.
- 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>).*
* 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 , from the current selection point until the root of the body. Tables on a have to have an absolute position, unless they are located inside another element with an absolute position.
-
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.
-
Click Next and use the drop-down to select the desired table style.
-
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.
-
Click Finish to add the table to the .
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.
Resizing and moving a Table
Before you can resize or move a Table:
- Make sure that the position of the Table is absolute. If it's not, 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.
Resizing a Table
- Click in the table and drag the handles to resize it. Press the Shift key while dragging, to scale the table proportionally.
- Select the Table (see Selecting an element) and type the desired width and height in the respective fields 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.
Moving a Table
- Click in the table and then drag the border to move the Table.
- Select the Table (see Selecting an element) and type the desired Y-offset and X-offset in the respective fields on the Attributes pane.
- Select the Table and select Format > Table, on the menu. On the Table tab, change the Y-offset and X-offset of the image.
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.
|
|