Sky Addons for Elementor

⌘K
  2. Home
  4. Sky Addons for Elementor
  6. Widgets
  8. Table

Table

How to use Table Widget of Sky Addons for Elementor

Table is a flexible data table widget for Elementor that lets you build beautiful comparison tables, feature matrices, pricing grids, and spec sheets without writing a line of HTML. Define header columns and body rows with simple repeaters, add icons or images to any cell, merge cells with col span and row span, link cells, and color individual cells. On small screens the table can switch to a horizontal scroll view so your data stays readable everywhere. This documentation will guide you through the process of using the Table Widget to present structured data on your website.

Features:

  1. Repeater-Based Builder: Add header columns and body rows/cells visually — no HTML or shortcodes.
  2. Icons & Images in Cells: Any header or body cell can carry an icon or an image with size control.
  3. Cell Merging: Col Span and Row Span let you merge cells for complex layouts.
  4. Linkable Cells: Turn any cell into a link, with dynamic tag support.
  5. Per-Cell Styling: Override background, text, and icon color on individual cells.
  6. Zebra Striping: Separate even/odd row backgrounds and text colors, in normal and hover states.
  7. Mobile-Friendly: Optional horizontal scroll view with word-break control for small screens.

Insert Table Widget

  1. Open Elementor Editor. In the Elementor panel, search for “Table” under Sky Addons.
  2. Drag and Drop the Widget to the desired location on your page / editor.

Configure Table Head

The Table Head section defines your header columns. Each column item has a Content and a Style tab:

  1. Title: The column heading text (dynamic tags supported).
  2. Col Span: Merge the heading across multiple columns.
  3. Media: None, Icon, or Image — add an icon from the library or an image with a size preset next to the title.
  4. Icon Color (Style tab): Per-column icon color override.
  5. Alignment & Icon Position: Align header text left/center/right and place the icon left, right, top, or bottom of the title — both responsive.

Configure Table Row / Body

The Table Row / Body repeater builds the body. Each item is either a Row marker or a Column (cell):

  1. Row/Column: Add an item set to Row to start a new table row (“Row Starts”), then add Column items after it — each one becomes a cell in that row.
  2. Title & Link: The cell text (dynamic tags supported) and an optional URL to make the cell clickable.
  3. Col Span / Row Span: Merge the cell horizontally or vertically.
  4. Media: Add an Icon or Image to the cell, with an image size preset.
  5. Per-Cell Style tab: Background Color, Text Color, Icon Color, and Icon/Image Size for that one cell — great for highlight cells like “Best Value”.
  6. Alignment & Icon Position: Responsive text alignment and icon placement for body cells.

Configure Settings

  1. Horizontal Scroll View: Activates horizontal scrolling on mobile so wide tables stay intact instead of squeezing.
  2. Disable Word Break: Available with scroll view on (enabled by default) — keeps words whole on mobile instead of breaking mid-word.

Style Your Table

Customize the table to match your design aesthetics effortlessly — borders, stripes, hover states, and media sizing are all covered:

  1. Table:
    Outer border, border radius, and a classic or gradient background for the whole table.
  2. Table Head:
    Header border, border radius, background, typography, text color, plus icon size, icon color, and image border radius for header media.
  3. Table Row:
    Cell borders and zebra striping with separate Even/Odd background colors and Even/Odd text colors in both Normal and Hover states, a dedicated Link Color, and sizing controls for cell icons and images.

Save and Preview

  1. Once you’ve customized and styled your table, click “Publish” or “Update” to save your changes.
  2. Preview the page to ensure the table looks and reads as desired.

Best Practices

  1. Keep cell counts consistent: Give every row the same number of Column items (accounting for spans) so the grid lines up.
  2. Use zebra striping for long tables: Alternating even/odd row colors makes wide data much easier to follow.
  3. Accessibility: Maintain strong contrast between text and row backgrounds, in both normal and hover states.
  4. Testing: Check mobile with Horizontal Scroll View on — wide comparison tables almost always need it.

Troubleshooting

  1. Cells in the Wrong Place: Make sure each row begins with a “Row” item in the repeater — Column items attach to the most recent Row marker.
  2. Layout Broken After Spanning: A Col Span or Row Span reduces how many remaining cells that row/column needs; remove the extra cells the span replaced.
  3. Table Squeezed on Mobile: Enable Horizontal Scroll View in Settings, and leave Disable Word Break on to keep labels readable.

Frequently Asked Questions

How do I create a comparison table in Elementor without HTML?

Add the Table widget, define your header columns in Table Head, then build the body in Table Row / Body: insert a “Row” item to start each row and “Column” items for its cells. Everything — text, icons, links, colors — is set through repeater controls, no markup required.

Can I merge cells in the Elementor Table widget?

Yes — every cell has Col Span and Row Span number controls (header cells support Col Span), so you can stretch a cell across multiple columns or rows just like a spreadsheet merge.

How do I add icons or images inside table cells in Elementor?

Set the cell’s Media option to Icon or Image. Icons come from the icon library with per-cell color control; images use a selectable size preset. Icon position (left, right, top, bottom) is adjustable per breakpoint.

How do I make a wide table responsive on mobile?

Turn on Horizontal Scroll View in the Settings section — the table keeps its full width and visitors swipe sideways. The companion Disable Word Break switch stops labels from breaking mid-word.

Can I highlight one column or cell with a different color?

Yes — open any Column item’s Style tab and set its own Background Color, Text Color, and Icon Color. This is the standard way to spotlight a “Recommended” plan in a pricing comparison.

Related Documentation

Conclusion

The Table Widget by Sky Addons for Elementor gives you spreadsheet-grade structure with full design freedom — spans, icons, links, per-cell colors, and mobile scroll handling included. Build comparison and pricing tables that actually convert. For further assistance, consult the Sky Addons support team or community forums. Enjoy organizing your data!

How can we help?