Element: Table

Use this element to create tables. The respective table contents are set manually or the table element is connected to a DataContainer table in the contentDock® Management System. If you use a DataContainer table, then you can set its fields individually in the table columns and use for each data field separate styles. The possible styles for the DataContainer table fields can be found on the page Elemente & Styles in the section "DataContainer Table fields".

Structure

The table element contains the areas:

  1. The "table", which can be designed individually.
  2. The "Paging area", displayed above or below the table.
  3. The "Active page number", which is in first position in the "Paging area".
  4. The "Delimiter" displayed between the "Active page number" and the "Number of pages".
  5. The "Number of pages", which is last in the "Paging area".

All styles of the five areas are described on this page. Separate styles are used for the columns in the table header and for the table columns .

Sample App

You can test this element with sample styles directly in the public area of the contentDock® Viewer App. You can also load these sample styles from the Template Library into your user account and import them into your app project.

Styles

  • Background
    Color
    Contentdock color help
    Defines the color of the element background. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    #ffffff

    Image
    Contentdock background image help
    Defines the background image for the element. The image is scaled in the element.
  • Border
    Height
    Contentdock table border height help
    Defines the thickness of the border in pixels surrounding the element. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    1

    Radius
    Contentdock table border radius help
    Defines the radius of the border in pixels used in the element corners. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Color
    Contentdock color help
    Defines the color of the element border. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    #636363

    Position
    Contentdock table border position help
    Specify the position of the border. The border always encloses the element, but you can choose in which direction the border will be drawn.

    Possible values are:

    Inside: The border is drawn inside.

    Outside: The border is drawn outside.

    Preset system value

    This value is used if no style is defined for this element.

    outer

  • Title Font
    Name of the font
    Contentdock font family help
    Please note that this style will not used if the text styles are set in the elements "Sub-Element: Table Header / Column" or the "Data Container Table fields".

    In contentDock® there are various fonts from fonts.google.com pre installed. You can also load your own fonts in contentDock® as TTF (TrueType Font) or OTF (OpenType Font).

    Preset system value

    This value is used if no style is defined for this element.

    Open Sans Italic

    Font size
    Contentdock font size help
    Defines the size of the table texts in pixels. The value is selected from the dropdown or can be set individually.

    Please note that this style will not used if the text styles are set in the elements "Sub-Element: Table Header / Column" or the "Data Container Table fields".

    Preset system value

    This value is used if no style is defined for this element.

    16

    Color
    Contentdock color help
    Defines the color of the table texts.

    Please note that this style will not used if the text styles are set in the elements "Sub-Element: Table Header / Column" or the "Data Container Table fields".

    Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    #000000

  • Help
    User information image for usage of the element
    Contentdock help image help
    If the image is displayed in the center, it shows the user, how the table is used.

    The image is displayed until the user touches the element.

    We recommend to create an image with a transparent background.

Paging area

  • Background
    Color
    Contentdock color help
    Defines the color of the element background. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Image
    Contentdock background image help
    Defines the background image for the element. The image is scaled in the element.
  • Border
    Height
    Contentdock table paging area border height help
    Defines the thickness of the border in pixels surrounding the element. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Radius
    Contentdock table paging area border radius help
    Defines the radius of the border in pixels used in the element corners. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Color
    Contentdock color help
    Defines the color of the element border. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Position
    Contentdock table paging area border position help
    Specify the position of the border. The border always encloses the element, but you can choose in which direction the border will be drawn.

    Possible values are:

    Inside: The border is drawn inside.

    Outside: The border is drawn outside.

    Preset system value

    This value is used if no style is defined for this element.

    outer

  • Margin
    Top
    Contentdock table paging area margin top help
    Defines the distance between the top border of the table and the paging area.

    Preset system value

    This value is used if no style is defined for this element.

    10

    Bottom
    Contentdock table paging area margin bottom help
    Defines the distance between the bottom border of the table and the paging area.

    Preset system value

    This value is used if no style is defined for this element.

    10

    Left
    Contentdock table paging area margin left help
    Defines the distance between the left border of the table and the paging area.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Right
    Contentdock table paging area margin right help
    Defines the distance between the right border of the table and the paging area.

    Preset system value

    This value is used if no style is defined for this element.

    0

  • Pagination
    Position
    Contentdock table paging area position help
    Defines the position of the paging area.

    Possible values are:

    Top left: The paging area is shown at top left.

    Top center: The paging area is shown centered on top.

    Top right: The paging area is shown at top right.

    Bottom left: The paging area is shown at bottom left.

    Bottom center: The paging area is shown centered at the bottom.

    Bottom right:The paging area is shown at bottom right.

    Preset system value

    This value is used if no style is defined for this element.

    bottom_center

Paging: Active page number

  • Background
    Color
    Contentdock color help
    Defines the color of the element background. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Image
    Contentdock background image help
    Defines the background image for the element. The image is scaled in the element.
  • Border
    Height
    Contentdock table paging area active page border height help
    Defines the thickness of the border in pixels surrounding the element. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Radius
    Contentdock table paging area active page border radius help
    Defines the radius of the border in pixels used in the element corners. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Color
    Contentdock color help
    Defines the color of the element border. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

  • Inner Space
    At the top
    Contentdock table paging area active page padding top help
    Defines the inner distance to the top.

    Preset system value

    This value is used if no style is defined for this element.

    5

    At the bottom
    Contentdock table paging area active page padding bottom help
    Defines the inner distance to the bottom.

    Preset system value

    This value is used if no style is defined for this element.

    5

    To the left
    Contentdock table paging area active page padding left help
    Defines the inner distance to the left.

    Preset system value

    This value is used if no style is defined for this element.

    5

    To the right
    Contentdock table paging area active page padding right help
    Defines the inner distance to the right.

    Preset system value

    This value is used if no style is defined for this element.

    5

  • Title Font
    Name of the font
    Contentdock font family help
    In contentDock® there are various fonts from fonts.google.com pre installed. You can also load your own fonts in contentDock® as TTF (TrueType Font) or OTF (OpenType Font).

    Preset system value

    This value is used if no style is defined for this element.

    Open Sans Regular

    Font size
    Contentdock font size help
    Defines the size of the active page number in pixels. The value is selected from the dropdown or can be set individually.

    Preset system value

    This value is used if no style is defined for this element.

    14

    Color
    Contentdock color help
    Defines the color of the active page number.

    Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    #000000

Paging: Delimiter

  • Background
    Color
    Contentdock color help
    Defines the color of the element background. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Image
    Contentdock background image help
    Defines the background image for the element. The image is scaled in the element.
  • Border
    Height
    Contentdock table paging area delimiter border height help
    Defines the thickness of the border in pixels surrounding the element. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Radius
    Contentdock table paging area delimiter border radius help
    Defines the radius of the border in pixels used in the element corners. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Color
    Contentdock color help
    Defines the color of the element border. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

  • Inner Space
    At the top
    Contentdock table paging area delimiter padding top help
    Defines the inner distance to the top.

    Preset system value

    This value is used if no style is defined for this element.

    5

    At the bottom
    Contentdock table paging area delimiter padding bottom help
    Defines the inner distance to the bottom.

    Preset system value

    This value is used if no style is defined for this element.

    5

    To the left
    Contentdock table paging area delimiter padding left help
    Defines the inner distance to the left.

    Preset system value

    This value is used if no style is defined for this element.

    5

    To the right
    Contentdock table paging area delimiter padding right help
    Defines the inner distance to the right.

    Preset system value

    This value is used if no style is defined for this element.

    5

  • Title Font
    Name of the font
    Contentdock font family help
    In contentDock® there are various fonts from fonts.google.com pre installed. You can also load your own fonts in contentDock® as TTF (TrueType Font) or OTF (OpenType Font).

    Preset system value

    This value is used if no style is defined for this element.

    Open Sans Light

    Font size
    Contentdock font size help
    Defines the size of the delimiter in pixels. The value is selected from the dropdown or can be set individually.

    Preset system value

    This value is used if no style is defined for this element.

    14

    Color
    Contentdock color help
    Defines the color of the delimiter.

    Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    #000000

  • Pagination
    Delimiter
    Contentdock table paging area delimiter char help
    Defines the delimiter.

    Preset system value

    This value is used if no style is defined for this element.

    -

Paging: Number of pages

  • Background
    Color
    Contentdock color help
    Defines the color of the element background. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Image
    Contentdock background image help
    Defines the background image for the element. The image is scaled in the element.
  • Border
    Height
    Contentdock table paging area number pages border height help
    Defines the thickness of the border in pixels surrounding the element. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Radius
    Contentdock table paging area number pages border radius help
    Defines the radius of the border in pixels used in the element corners. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Color
    Contentdock color help
    Defines the color of the element border. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

  • Inner Space
    At the top
    Contentdock table paging area number pages padding top help
    Defines the inner distance to the top.

    Preset system value

    This value is used if no style is defined for this element.

    5

    At the bottom
    Contentdock table paging area number pages padding bottom help
    Defines the inner distance to the bottom.

    Preset system value

    This value is used if no style is defined for this element.

    5

    To the left
    Contentdock table paging area number pages padding left help
    Defines the inner distance to the left.

    Preset system value

    This value is used if no style is defined for this element.

    5

    To the right
    Contentdock table paging area number pages padding right help
    Defines the inner distance to the right.

    Preset system value

    This value is used if no style is defined for this element.

    5

  • Title Font
    Name of the font
    Contentdock font family help
    In contentDock® there are various fonts from fonts.google.com pre installed. You can also load your own fonts in contentDock® as TTF (TrueType Font) or OTF (OpenType Font).

    Preset system value

    This value is used if no style is defined for this element.

    Open Sans Light

    Font size
    Contentdock font size help
    Defines the size of the number of pages in pixels. The value is selected from the dropdown or can be set individually.

    Preset system value

    This value is used if no style is defined for this element.

    14

    Color
    Contentdock color help
    Defines the color of the number of pages. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    #000000