How to Define a Custom Border on a Table Element

When editing a WebBlock and inserting elements into a table, you can set a border size by editing the "Table Properties".


However, HTML border display is not necessarily very good-looking as it is applied to both the table and the cells within it. It is therefore interesting to use CSS to create fine borders around a table element.

HTML Border CSS Border

There are two ways to use CSS to add a border around a table element::

 Inserting a border using the Inline Style field (simple method)

The easiest way to add a border to a table element is to use the inline style field to set the table's CSS properties. Make sure that the border size field is set to 0, then add the following CSS property definitions in the inline style field :

The hexadecimal colour code can be custom or replaced by a colour name. For example:

You may also apply this method on WebBlocks used for newsletters.

 Inserting a border using a CSS class (advanced method)

It is possible to assign classes or IDs to table elements by modifying the "table properties" settings. This allows you to associate an identifier that can be "styled" using a rule defined in the site's CSS.

The advantage of this method is that the formatting will apply to all WebBlocks where the identifier has been used . So if you ever decide to change the border color of all WebBlocks on your site, a single update in the CSS will do.

Warning: This solution is not suitable for a WebBlock that you intend to send as a newsletter. Since the site's CSS will not be used by the email software, the border style will not be applied.

  • Step 1: Assign a class name to the table

    To frame a table element in your WebBlock, click on the "table properties" icon and define an Associated CSS Class name. This same class name may be defined for all tables requiring the same border style.

    In our example, the name given to this class is : edge

  • Step 2: Define the CSS rule

    • Case 1: you use a custom CSS Site Design.

      Edit your CSS content by clicking on the [ Site \ Site Design]and then [Create and Manage Custom Site Designs] buttons and modify your Site Design.
      Add the following rule in the CSS Content ( the "." Is very important).

    • Case 2 :you use an Advanced HTML or a Smartskin design

      Go to the insertion points of your site (the [Site\Properties By Language] menu) and add the following script to the "HTML Header" zone:

    It is sometimes necessary to clear the cache and cookies to see the changes.

    Add to favorites:
    © 2001-2018 Oxatis. All rights reserved.