Table Formatting dialog
The Table Formatting dialog defines how a table looks. Note that the settings are applied to the table as a whole. For example, when you change the border of the table, the borders of cells inside the table will not be changed. For more information see Styling a table.
All settings in this dialog are in fact CSS properties. Cascading Style Sheets (CSS) were originally designed for use with web pages: HTML files. Since Designer templates are HTML files, they are styled with CSS. To learn how to use CSS in the Designer, see Styling and formatting and Styling templates with CSS files. For information about specific properties and their options, see MDN Web Docs - CSS Reference.
Note: Using viewport based units (vw, vh, vmin, vmax) in Print sections is not recommended. This may cause differences between the preview in the Designer and the printed output.
Table Tab
-
General group:
-
Width: Set the width of the table in measure or percentage. Equivalent to the CSS
width
property. -
Height: Set the height of the table in measure or percentage. Equivalent to the CSS
height
property. -
Angle: Set the rotation angle of the table in clockwise degrees. Equivalent to the CSS
transform:rotate
property. -
Corner radius: Set the radius of rounded border corners in measure or percentage. Equivalent to the CSS
border-radius
property. -
Display: Use the drop-down or type in the value for how to display the table. Equivalent to the CSS
display
property. -
Overflow: Use the drop-down or type in the value for how to handle overflow (text that does not fit in the current size of the box). Equivalent to the CSS
overflow
property.
-
-
Text wrap group:
-
Float: Use the drop-down or type in the value for how to float the table, if the table is not in an absolute position. Equivalent to the CSS
float
property. -
Clear: Use the drop-down or type in the value for clearing pre-existing alignments. Equivalent to the CSS
clear
property.
-
-
Positioning:
-
Position: Use the drop-down or type in the value for the type of positioning for the table. Equivalent to the CSS
position
property. -
Top: Set the vertical offset between this table and its parent's top position. Equivalent to the CSS
top
property. -
Left: Set the horizontal offset between this table and its parent's left position. Equivalent to the CSS
left
property. -
Bottom: Set the vertical offset between this table and its parent's bottom position. Equivalent to the CSS
bottom
property. -
Right: Set the horizontal offset between this table and its parent's left position. Equivalent to the CSS
right
property. -
Z-index: Set the z-index of the table. The z-index defines in which order elements appear. Equivalent to the CSS
z-index
property.
-
-
Breaks group:
-
Before: Specifies how to handle page breaks before the table. Equivalent to the CSS
page-break-before
property. -
Inside: Specifies whether to accept page breaks within the table. Equivalent to the CSS
page-break-inside
property. -
After: Specifies how to handle page breaks after the table. Equivalent to the CSS
page-break-after
property. -
Widows: Specifies how to handle widows within the table (rows appearing alone on the next page if the table does not fit on the current one). Equivalent to the CSS
widows
property. Widows and orphans are ignored if thepage-break-inside
property is set toavoid
. -
Orphans: Specifies how to handle orphans within the tables (rows appearing alone at the end of a page if the table does not fit on the current one). Equivalent to the CSS
orphans
property.
-
-
Padding group: Defines padding (spacing inside the element) in measure or percentage:
-
All sides: Check to set all padding to use the Top value. Equivalent to the CSS
padding
property. -
Top, Left, Bottom, Right: Set padding for each side. Equivalent to the CSS
padding-left
,padding-top
,padding-right
andpadding-bottom
properties.
-
-
Margin group: Defines margins (spacing outside the element) in measure or percentage:
-
All sides: Check to set all margins to use the Top value. Equivalent to the CSS
margin
property. -
Top, Left, Bottom, Right: Set the margin for each side. Equivalent to the CSS
margin-left
,margin-top
,margin-right
andmargin-bottom
properties.
-
-
Same for all sides: Defines the border properties for all sides using the Top properties. Equivalent to the CSS
border
property. -
Top, Left, Bottom, Right: Each group defines the following properties:
-
Width: Specify the thickness of the border. Equivalent to the CSS
border-width
property. -
Style: Specify the style of the border such as
solid
,dashed
ordotted
. Equivalent to the CSSborder-style
property. -
Color: Specify the color of the border: select a named color (defined in the Colors Properties) from the drop-down, or click the colored square to open the Color Picker dialog (Color Picker). Alternatively you could type a name or value in the Color field directly. It must be valid color name (see MDN Web Docs - named color), a hexadecimal color code (HTML Hex Color), an RGB color value, for example
rgb(216,255,170)
or a CMYK color value, for examplecmyk(15%, 0%, 33%, 0%)
.
Equivalent to the CSSborder-color
property.
-
- General group:
- Color: Specify the color of the table background:select a named color (defined in the Colors Properties) from the drop-down, or click the colored square to open the Color Picker dialog (Color Picker). Alternatively you could type a name or value in the Color field directly. It must be valid color name (see MDN Web Docs - named color), a hexadecimal color code (HTML Hex Color), an RGB color value, for example
rgb(216,255,170)
or a CMYK color value, for examplecmyk(15%, 0%, 33%, 0%)
.
Equivalent to the CSSbackground-color
property.
- Color: Specify the color of the table background:select a named color (defined in the Colors Properties) from the drop-down, or click the colored square to open the Color Picker dialog (Color Picker). Alternatively you could type a name or value in the Color field directly. It must be valid color name (see MDN Web Docs - named color), a hexadecimal color code (HTML Hex Color), an RGB color value, for example
- Background image group:
-
Source: Click the Select Image button to select an image via the Select Image dialog. Equivalent to the CSS
background
property. -
Size: Select
auto
,cover
orcontain
(for an explanation see MDN Web Docs - background-size), or type the width and height of the image in a measure (e.g.80px 60px
) or as a percentage of the parent element's size (e.g.50% 50%
). Equivalent to the CSSbackground-size
property. -
Position: Select the position for the background-image. Equivalent to the CSS
background-position
property.
For information about spacing see Spacing.
For information about borders see Border.
For information about backgrounds see Background color and/or image.