Table add-on

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

Table Default Style

Meta
Your Image Title
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
Learn more
Meta
Your Image Title
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
Learn more
Meta
Your Image Title
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
Learn more

Vertical Alignment

Meta
Your Image Title
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
Learn more
Meta
Your Image Title
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
Learn more
Meta
Your Image Title
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
Learn more

Table Divider Style

Meta
Your Image Title
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
Learn more
Meta
Your Image Title
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
Learn more
Meta
Your Image Title
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
Learn more

Large style and Highlight the hovered row

Meta
Your Image Title
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
Learn more
Meta
Your Image Title
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
Learn more
Meta
Your Image Title
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
Learn more

Table Striped Style

Title
Your Image Title
Meta
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
Learn more
Title
Your Image Title
Meta
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
Learn more
Title
Your Image Title
Meta
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
Learn more

Multiple Sorting Order

Title
Meta
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
Learn moreYour Image Title
Title
Meta
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
Learn moreYour Image Title
Title
Meta
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
Learn moreYour Image Title

Responsive table - Overflow mode (Resize browser to see how it works)

TimeTopicsContentLink
7 am – 8:15 am
Good Morning Yoga
This presentation will describe seven essential actions that could unleash the power of prevention and substantially reduce the prevalence of behavioral health problems and inequality in health and behavior outcomes in the U.S. population.
Register
7:30 am – 8:45 am
Complete Body Workout
Business leaders know that growing a company requires you to put yourself out there and stay ahead of trends. One good way to accomplish both is by attending industry events throughout the year.
Register
1:30 pm – 2:45 pm
Gym Boxing
The Regional Leadership Conference provides the opportunity to meet officers from different sized sections as well as learn about the many different types of activities they hold.
Register
2:15 pm – 3:30 pm
Functional Training
In a marketplace where customers are more aware, active, and value-driven, firms must rapidly conceive and develop new products and services that meet customers' changing demands.
Register

Responsive table - Stack on small viewports (Resize browser to see how it works)

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

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.

Information

Joomla! name is used under a limited license from Open Source Matters in the United States and other countries. WarpTheme.com is not affiliated with or endorsed by Open Source Matters or the Joomla! project