Editor X: Creating Tables Using Repeaters

5 min read

Editor X is transitioning to Wix Studio, our new platform for agencies and freelancers.Learn more about Wix Studio

Add a table to your site using a repeater, a list of items with the same design and layout but different content in each.

By adding grids to your repeater items, you create the rows and columns that form the table:

Step 1 | Add a repeater

To get started, choose a repeater from the Add panel and add it to your site.

To add a repeater:

Click Add on the top of the Editor.
Click Layout Tools.
Click Repeaters.
Select a repeater and drag it to the desired location on your page.

Step 2 | Set up the table

After adding a repeater, create the rows of your table by changing the display type to List. Next, add the columns by applying a grid. You can drag the grid lines as necessary to make it fit your desired table.

To set up the table:

Change your repeater layout:
1. Select the new repeater in the Editor.
2. Click the Inspector icon at the top right.
3. (In the Inspector) Click the Layout tab .
4. Select List under Display type.
5. (Optional) Set the spacing between your rows next to Gaps.
Apply a grid to your repeater items:
1. Select any repeater item.
2. Click the 1x1 drop-down.
3. Depending on the number of columns you need, choose a layout.
  Tip: Click Other to choose a different amount of rows and columns.
4. Set the table cells by dragging the grid lines as needed.

Step 3 | Design and add content to the table

Now that you've created your table, customize the design and add the relevant content. You can add as many rows as you need and elements like text, images and separator lines.

When you add an element to a repeater item, it is automatically added to every item in the repeater to keep the design consistent. Accordingly, removing an element deletes it from all items. You can customize the individual elements inside an item (e.g., editing the text, changing the images), but the design always stays the same.

Click an option below to learn more:

Add separator lines