Table

Author: Charlotte Tran 110 views

You can display more details about the merchandise that your stores are selling by using the Table element. For instance, if you are in Vietnam and want to see whether other countries are carrying the goods you need, which variant they still have, even how many they have left, and more.

Table Element In EComposer

1. Content

General settings

  • Layout: Allow us to change the table form with one of those options ( Horizontal or Vertical)
  • Row: This option allows us to add more rows/lines if we need more space for details.
  • Column: You can add more columns at the end of the table,
  • Border collapse: Those are 3 different options for you to choose as below:
    • Collapse: It will keep the table as the Default style.
    • Separate/ Inherit: Let you flexible change more space between each box, and you will set it by the Border Spacing option.
How To Change The Content Setting With EComposer

2. Design

2.1. General settings

Those options in general settings will let you change some of the basic things such as Width, Alignment and some of our favourite settings like Background, Box Shadow, Border, Border Radius, and Spacing.

Change The General Setting With EComposer

2.2. Heading settings

When you come to this option, allow you to change all sets belonging to the Heading. For instance:

  • Alignment: This option will let you change the position of the Heading.
  • Vertical align: Help you to move the Heading to Bottom, Center, or Top.
  • Typography: You can change the Font, Size, Weight, Transform, Style, Decoration, Line Height, and Letter Spacing.
  • Text Color/ Background Color: Allow you to change the color of the Text or the Background of the Heading.
  • End up with lots of interesting setting options like Width, Min Height, Padding, Text Gradient, and Text Shadow.
Change The Heading Setting With EComposer

2.3. Table row settings

You can flexibly set some of the usual options for the Table row such as:

  • Border: You can change the style for this to Solid, Double, Dotted, Dashed, or Groove.
  • Min height: For changing the height of the Table row but not including the Heading one.
  • Odd Row: Allow you to change the Background, Color, and Typography for it and the same setting options for Even Row.
Change The Table Row Setting With EComposer

2.4. Table col settings

The settings for Table col in the Design options such as Alignment, Vertical align, Typography, Text Color/ Background Color: Allow you to change the color of the Text or the Background of the Table col. And many other options like Border, Padding, Text Gradient, and Text Shadow.

Change The Table Col Setting With EComposer

And if you are interested in this Table element so you can watch the guide video below to get more details about that. Thank you for reading and watching till the end.

How The Design Options Work With EComposer

Leave a Comment

On this page