Articles on: Components & Elements

Table Element

Getting Started

The Table element allows you to display structured content, such as pricing plans, feature comparisons, specifications, and more.

With complete customization options, you can adjust the table layout, design, and functionality to fit your needs.


Adding the Table Element


  1. Open the Dorik site editor and take a Section or Container first.



  1. Click Add Element or Container, then select Table from the available elements.



  1. A default table will appear on your page. You can now customize it based on your requirements.




Table Settings


1. Table Template

Select the table template you want to use. The available templates include:

  • Comparison — Best for comparing features, services, or plans side by side.
  • Pricing — Display pricing plans with associated features.
  • Specification — Display product specifications like dimensions, weight, etc.
  • Invoice — Create invoices with itemized pricing and totals.
  • Team Roster — Display team member details such as name, role, and contact info.
  • Features — Showcase key features of a product or service.
  • Changelog — Display version history with dates and descriptions.



2. Columns

Columns define the data structure of the table. You can customize the columns as follows:

  • Add New — Add a new column.
  • Reorder Columns — Drag columns to rearrange them.
  • Label — Set the label for each column.
  • Featured — Mark a column as Featured to highlight it.
  • Width — Define the width of the column (Auto or Custom).
  • Alignment — Set the alignment for text (left, center, or right).



3. Rows

Rows represent individual data points in the table. To manage rows:

  • Add New — Add a new row.
  • Reorder Rows — Drag to reorder rows.
  • Row Type — Choose between Header, Normal, Footer, or Group row types.
  • Highlight Row — Use the Highlight option to emphasize a particular row.



4. Cell Types

Each cell in the table can contain different content types, including:

  • Text
  • Button
  • Icon
  • Check / Cross
  • Image
  • Link
  • Badge
  • Number

You can customize each cell type for better functionality.




Style Settings


1. Header Styles

Customize the style of the table header, including:

  • Font Size — Adjust the font size of the header text.
  • Font Weight — Set the font weight (Normal, Medium, Bold).
  • Text Color — Choose the text color for the header.
  • Spacing & Line Height -- Choose the Line Height and Spacing of the header.
  • Padding — Set padding around the header cell.
  • Background Color — Set the background color of the header.



2. Body Styles

Style the body of the table, including:

  • Font Size — Adjust the font size for the body content.
  • Font Weight — Set the font weight (Normal, Medium, Bold).
  • Text Color — Customize the text color.
  • Spacing & Line Height — Choose the Line Height and Spacing of the other cells.
  • Padding — Set padding around the body cell.
  • Background Color — Define the background color for the table body.



Customize the footer styles:

  • Font Size — Set the font size for footer text.
  • Font Weight — Choose from Normal, Medium, or Bold.
  • Text Color — Customize the footer text color.
  • Spacing & Line Height — Adjust the line height, spacing, and padding around the footer.
  • Background Color — Adjust the background color for the footer.



4. Group Header Styles

Define the style for grouped headers:

  • Font Size — Adjust the font size of the group header.
  • Font Weight — Set the font weight (Normal, Medium, Bold).
  • Text Color — Select the text color.
  • Spacing & Line Height — Adjust the line height, spacing, and padding around the group header.
  • Background Color — Choose a background color for the grouped header.




Element Styles


1. Button Styling

Customize badges used in your table:

  • Text Size — Adjust the font size of the badge text.
  • Font Weight — Adjust the font weight (Regular, Medium, Bold).
  • Text Color — Select the color of the badge text.
  • Background Color — Set the background color of the badge.
  • Padding — Adjust the padding (Top, Bottom, Left, Right).
  • Border Radius — Choose the button border radius shape.



2. Badge Styling

Customize badges used in your table:

  • Text Size — Adjust the font size of the badge text.
  • Text Color — Select the color of the badge text.
  • Background Color — Set the background color of the badge.
  • Padding — Adjust the padding (Top, Bottom, Left, Right).
  • Shape — Choose between Square, Rounded, or Pill for the badge shape.



3. Icon Styling

Adjust the appearance of icons inside the table:

  • Size — Set the size of the icon.
  • Color — Choose the color for the icon.



4. Check / Cross Styling

Style the Check and Cross icons used for boolean values:

  • Check Color — Set the color for the checkmark icon.
  • Cross Color — Set the color for the cross icon.



Customize the appearance of links inside your table:

  • Text Color — Choose the color for the text of the link.
  • Background Color — Optionally, set a background color for the link text.



6. Button Styling

Customize badges used in your table:

  • Text Size — Adjust the font size of the badge text.
  • Font Weight — Adjust the font weight (Regular, Medium, Bold).
  • Text Color — Select the color of the badge text.
  • Background Color — Set the background color of the badge.
  • Padding — Adjust the padding (Top, Bottom, Left, Right).
  • Border Radius — Choose the button border radius shape.




Highlighted Row

Use this to apply a special look to rows you want to stand out:

  • Color — Select the text color for the featured row.
  • Font Weight — Adjust the font weight (Regular, Medium, Bold).
  • Background — Set a background color for the featured row.



Highlight a column such as the primary plan or key data:

  • Text Size — Adjust the font size for the featured column.
  • Font Weight — Choose between Regular, Medium, or Bold.
  • Text Color — Set the text color for the featured column.
  • Background — Define the background color for the featured column.



Table Settings (Layout & Appearance)


1. Layout Options

Choose from three layout densities:

  • Compact — A tighter layout with minimal space.



  • Normal — Default layout with standard spacing.



  • Comfortable — More spacious layout for better readability.



2. Table Layout

Select the Auto or Fixed layout. Auto will adjust column widths based on content, while Fixed keeps column widths consistent.



3. Responsive Mode

Choose how your table behaves on mobile:

  • Scroll — Enables horizontal scrolling on smaller screens.


  • Stack — Stacks columns vertically on mobile devices.



4. Sticky Header

Enable sticky headers to keep the table header visible while scrolling.



Appearance Settings

  • Bordered — Toggle the visibility of table borders.
  • Border Color — Choose the border color you want.
  • Border Width — Set the width of the table border.
  • Striped Rows — Enable alternating row colors for better readability.
  • Hover Effect — Highlight rows when users hover over them.


Updated on: 03/06/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!