How can I create a table like the one in this Webflow GIF?

You're likely referring to a responsive table layout shown in a Webflow GIF, which typically involves aligning text or components in a grid format. Webflow doesn't have a native HTML table element, so tables must be built using Grid or Flexbox.

1. Use Webflow Grid to Build a Table Layout

• Add a Section and then a Div Block inside it.
• Change the Div Block’s layout to Grid using the right-hand Style panel.
• Set the number of Columns and Rows to match your desired table structure (e.g., 4 columns × 5 rows).
• Name this Div something clear, like “Table Grid”, for easy reference.

2. Add Table Header Rows

• In the first row, add Text Blocks (or Divs with headings inside) to each cell to serve as column headers.
• Apply styling such as bold text, background color, and padding to differentiate the header row.

3. Add Content Rows

• Fill the rest of the rows with Text Blocks, Buttons, or Images as needed.
• Each cell is a Grid column, so you can drag elements into them individually.

4. Style Table Borders and Spacing

• To simulate cell borders, apply border styles to each Text Block or Div inside the grid.
• Use padding or margin spacing for cell separation.
• If using rows with identical structure, you can use a Collection List within a Grid for dynamic tables.

5. Make It Responsive

• Set Grid to Auto-fit columns if necessary by setting column width to 1fr or minmax() in advanced settings.
• Adjust for smaller breakpoints by stacking or hiding certain columns using visibility settings per device.

Summary

To recreate table-like layouts in Webflow, use the Grid Layout, customizing column and row sizes manually and styling each cell with borders and spacing. Since Webflow doesn’t support native HTML tables, this Grid method is the recommended way to simulate a table appearance.