Easily create nice looking tables, which come in different styles.

Responsive table - Overflow mode.

This creates a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself.
MetaTitleContentLink
7 am – 8:15 am
Good Morning Yoga
Lorem ipsum dolor sit amet. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Read more

7:30 am – 8:45 am
Complete Body Workout
Lorem ipsum dolor sit amet. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Read more

1:30 pm – 2:45 pm
Gym Boxing
Lorem ipsum dolor sit amet. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Read more

2:15 pm – 3:30 pm
Functional Training
Lorem ipsum dolor sit amet. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Read more

Responsive table - Stack on small viewports

This creates a Stack columns on small devices
MetaTitleContentLink
7 am – 8:15 am
Good Morning Yoga
Lorem ipsum dolor sit amet. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Read more

7:30 am – 8:45 am
Complete Body Workout
Lorem ipsum dolor sit amet. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Read more

1:30 pm – 2:45 pm
Gym Boxing
Lorem ipsum dolor sit amet. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Read more

2:15 pm – 3:30 pm
Functional Training
Lorem ipsum dolor sit amet. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Read more

Table with image

MetaImageTitleContentLink
7 am – 8:15 am
Good Morning Yoga
Lorem ipsum dolor sit amet. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Read more

7:30 am – 8:45 am
Complete Body Workout
Lorem ipsum dolor sit amet. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Read more

1:30 pm – 2:45 pm
Gym Boxing
Lorem ipsum dolor sit amet. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Read more

2:15 pm – 3:30 pm
Functional Training
Lorem ipsum dolor sit amet. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Read more

Content Fields

Here is a list of common content fields for Table add-on.

Setting Description
Title A text field used for title.
Meta A text field used for meta text.
Content A text field for the main text blocks.
Image An image field with an image picker.
Button Text A text field used for button of the table item
Link Enter or pick a link, an image or a video file.
Link title Enter an optional text for the title attribute of the link, which will appear on hover.
Link Target Choose whether or not your link opens in a new window.
Button Style Set the button style.
Button Size Set the size for button.
Full width button Enable Full width button.

Table Settings

Table settings, The Table Settings contains all the specific settings for an add-on. Here is a short overview.

Setting Description
Style Select the table style, default, divider or striped row style.
Highlight the hovered row Add this option to display a hover state on table rows.
Remove left and right padding Add this option to remove the left/right padding container.
Size Define the padding between table rows.
Vertical Alignment Vertically center table cells.
Responsive Stack columns on small devices or enable overflow scroll for the container.
Title Width Define the width of the title cell.
Meta Width Define the width of the meta cell.
Content Width Define the width of the content cell.

Head Settings

Head Table settings, The Head Settings contains all the specific settings for an add-on. Here is a short overview.

Setting Description
Title Enter a table header text for the title column
Meta title Enter a table header text for the meta column
Content title Enter a table header text for the content column
Image title Enter a table header text for the link column
Link title Enter a table header text for the link column.

General Settings

General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.

Setting Description
Margin Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom.
Remove top margin. Use this option to remove the add-on's top margin
Remove bottom margin. Use this option to remove the add-on's bottom margin
Animation Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on.
Alignment This option specifies the alignment of an add-on according to the surrounding element
Text Breakpoint Define the device width from which the alignment will apply.
Visibility Define when the add-on should be hidden.
CSS Class If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file.