How To Create A Table In Webflow

Guide

1. Webflow does not inherently have tables. Instead, we can use Grid to create a table format structure for our content. To add a grid, go to Add Elements in the left sidebar menu.

2. Scroll to the Other section or simply search for Grid.

3. Once you click or drag the Grid where you want it. The right sidebar menu will offer many options to customize and control it.

4. You can also enter a Grid Editing mode by clicking on the small grid icon for Edit Grid.

5. When inside this mode, you can add rows and columns using the (+) icon.

6. You can also customize the width of columns by dragging the edges or clicking on the heading to view options.

7. Also, you can also customize and adjust the spacing between rows and columns by dragging the orders or adjust both at the same time by Shift + Drag.

8. Click on Done at the bottom to exit mode.

9. Although not necessary, it is a good practice to add a Div block to each cell as a wrapper, this also allows you to nest content inside a single cell.

10. You can also directly add elements and assets to each cell.

11. To add an image for example, simply drag and drop it inside a cell.

12. Do the same for text blocks and other elements.

13. Note that you can edit each cell's content separately without affecting other cells

14. Also note that although the content is different, each row shares the same dimensions by default using the FR units.

15. Besides editing each cell, row or column individually, you can also apply settings to the entire grid.

16. You now have a Grid layout that resembles a tabular format in Webflow. You can continue exploring this to customize it exactly like a conventional table.