How To Create A Table In Webflow

Quick summary

Webflow does not have a native table element, so designers use the Grid layout to create structured, table-like formats. This walkthrough shows how to add, configure, and populate a Grid in Webflow's Designer to replicate conventional table functionality.

Steps

1. Open Add Elements in the left sidebar — Webflow has no native table, so use Grid to create a table-format structure.
2. Scroll to the Other section or search for Grid in the Add Elements panel.
3. Click or drag the Grid onto the canvas; the right sidebar will display customization and control options.
4. Click the small grid icon to enter Edit Grid mode for direct grid editing.
5. Inside Edit Grid mode, use the (+) icon to add rows and columns as needed.
6. Customize column width by dragging column edges or clicking the column heading to view sizing options.
7. Adjust row and column spacing by dragging borders, or use Shift + Drag to adjust both simultaneously.
8. Click Done at the bottom to exit Edit Grid mode.
9. Add a Div block to each cell as a wrapper to enable nested content inside a single cell.
10. Add elements and assets directly to each cell from the Add Elements panel.
11. Drag and drop an image into a cell to insert image content.
12. Add text blocks and other elements to remaining cells in the same way.
13. Edit each cell's content independently — changes to one cell do not affect others.
14. Note that all rows share the same dimensions by default using FR units for consistent proportions.
15. Apply grid-wide settings from the right sidebar to control the entire Grid at once.
16. Your Grid layout now functions as a fully customizable table in Webflow — continue refining it to match a conventional table structure.