Table Cell Formatting dialog

The Table Cell Formatting dialog defines how a particular cell in a table looks. 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.

Cell Tab

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

  • Vertical Align: Specify how text is vertically aligned in the cell: top, middle, bottom or baseline. With the baseline value all the table data share the same baseline. Often this has the same effect as the bottom value. However, if the fonts are in different sizes, baseline looks better.

Type Tab

  • General group:

    • Font: Select the font used to display text.
      Equivalent to the CSS font-family property.

    • Size: Enter the size in measure, named size or percentage.
      Equivalent to the CSS font-size property.

    • Color: You may 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 a predefined CSS color name (CSS color names), a hexadecimal color code (HTML Hex Color), an RGB color value, for example rgb(216,255,170) or a CMYK color value, for example cmyk(15%, 0%, 33%, 0%).
      Equivalent to the CSS color property.

  • Spacing group:

    • Letter Spacing: Set the space between characters in a text in measure or percentage.
      Equivalent to the CSS letter-spacing property.

    • Word Spacing: Set the space between each word in a text in measure or percentage.
      Equivalent to the CSS word-spacing property.

    • Whitespace: Specify how to handle white spaces inside of an element.
      Equivalent to the CSS white-space property. See MDN Web Docs - white-space for details.

  • Style group: Check any option to apply the selected style to text within the element:

    • Bold: Sets the font-weight to 700.

    • Italic: Sets the font-style to italic.

    • Underline: Sets the text-decoration to underline.

    • Strikethrough: Sets the text-decoration to line-through.

    • Subscript: Sets the vertical-align to super.

    • Superscript: Sets the vertical-align to sub.

    • Capitalize: Sets the text-transform to capitalize.

    • Uppercase: Sets the text-transform to uppercase.

    • Lowercase: Sets the text-transform to lowercase.

    • Small-caps: Sets the font-variant to small-caps.

Spacing Tab

For information about spacing see Spacing.

  • 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 border property.

    • Top, Left, Bottom, Right: Set padding for each side.
      Equivalent to the CSS padding-left, padding-top, padding-right and padding-bottom properties.

Border Tab

For information about borders see Border.

  • Same for all sides: Defines the border properties for all sides using the Top properties. Equivalent to the 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 or dotted.
      Equivalent to the CSS border-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 a predefined CSS color name (CSS color names), a hexadecimal color code (HTML Hex Color), an RGB color value, for example rgb(216,255,170) or a CMYK color value, for example cmyk(15%, 0%, 33%, 0%).
      Equivalent to the CSS border-color property.

Background Tab

For information about backgrounds see Background color and/or image.

  • General group:

    • Color: Specify the color of the table cell 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 a predefined CSS color name (CSS color names), a hexadecimal color code (HTML Hex Color), an RGB color value, for example rgb(216,255,170) or a CMYK color value, for example cmyk(15%, 0%, 33%, 0%).
      Equivalent to the CSS background-color property.

  • Background image group:

    • Source: click the Select Image button to select an image via the Select Image dialog.
      Equivalent to the CSSbackgroundproperty.

    • Size: select auto, cover or contain (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 CSS background-size property.

    • Position: select the position for the background-image.
      Equivalent to the CSS background-position property.