草莓社区

Skip to main content

Table

Content Type Details

ID: 761
Name: Table (T4 - DEV)
Description: Use with Universal Template 2021

Content Element Details within Table (T4 - DEV) content type

NameDescriptionSizeTypeRequired
NameThe Name element80 CharactersPlain TextYes
Select Table layoutSelect Tables layout from the list80 CharactersSelect BoxYes
Background ColorSelect panel background color80 CharactersSelect BoxNo
Container WidthSelect container width80 CharactersSelect BoxNo
TableEnter the table structure99999 CharactersHTMLYes

How to use

The Table content type enables the addition of a table using the HTML Editor and it provides three elements that facilitate the customization of design and layout. These elements are the Table layout, Background Color, and Container Width. Each of these elements includes a list of values that allow for the customization of the Table content type according to specific preferences.

The Table content type with the use of HTML Editor allows you to easily add tables to the page. It offers three elements that facilitate customization of the table's design and layout: Table layout, Background Color, and Container Width. Each of these elements provides a list of values that can be selected to customize the appearance of the table according to specific preferences.

The Background Color element allows you to choose from a variety of colors to set as the background for the table, providing flexibility in achieving the desired visual style.

The Container Width element enables you to adjust the width of the container that holds the table, allowing for different widths based on design requirements or available space.

Additionally, the Select Table layout element offers three different layout styles for the table, as described below:

Table with Header: To create this layout, you can use the "Insert table with column headings" option from the Table menu dropdown.

column headings

Table with Header and First Column: This layout can be achieved by using the "Insert table with column and row headings" option from the Table menu dropdown.

column rows

Table with Multiple Headers: To create this layout, you can use the "Insert table with column and row headings" option from the Table menu dropdown. Afterwards, if you need to modify a specific row for an additional header, you can merge the necessary cells as depicted in the attached image below.

column rows

merge cells

Table with Header

Table caption, description, or qualifier here.
Column 1Column 2Column 3Column 4Column 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lobortis feugiat vivamus at augue. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Nunc non blandit massa enim nec dui nunc. Diam maecenas sed enim ut sem. Viverra mauris in aliquam sem fringilla ut morbi tincidunt augue. Donec adipiscing tristique risus nec feugiat in fermentum. Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. Sit amet nulla facilisi morbi tempus iaculis urna id. Ut tellus elementum sagittis vitae et leo duis ut. Integer eget aliquet nibh praesent. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Tincidunt vitae semper quis lectus nulla at volutpat diam. Nulla pharetra diam sit amet. Senectus et netus et malesuada fames ac turpis. Interdum varius sit amet mattis vulputate enim nulla. Sed adipiscing diam donec adipiscing tristique. In iaculis nunc sed augue lacus viverra vitae.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lobortis feugiat vivamus at augue. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Nunc non blandit massa enim nec dui nunc. Diam maecenas sed enim ut sem. Viverra mauris in aliquam sem fringilla ut morbi tincidunt augue. Donec adipiscing tristique risus nec feugiat in fermentum. Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. Sit amet nulla facilisi morbi tempus iaculis urna id. Ut tellus elementum sagittis vitae et leo duis ut. Integer eget aliquet nibh praesent. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Tincidunt vitae semper quis lectus nulla at volutpat diam. Nulla pharetra diam sit amet. Senectus et netus et malesuada fames ac turpis. Interdum varius sit amet mattis vulputate enim nulla. Sed adipiscing diam donec adipiscing tristique. In iaculis nunc sed augue lacus viverra vitae.

Table with Header and Column Categories

  Header 01Header 02Header 03
Column header 01 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Column header 02 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Table with Multiple Headers

  Header 01Header 02Header 03
Sub Category 01  
Column header 01 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Column header 02 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Sub Category 02
Column header 01 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Column header 02 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.