Why Webflow Has No Table Element

Webflow gives you Div Block, Grid, Rich Text, Collection List and about forty other elements. It does not give you <table>. There is no add-panel item for a table, no colspan control, and no way to merge two cells together on the canvas.

That is a deliberate product decision, not an oversight. Tables were abused for page layout for a decade, and modern layout tools replaced them for that job. The problem is that tables were never only a layout tool. They are the correct markup for tabular data, and no amount of CSS Grid changes that.

So every Webflow project that needs a pricing comparison, a spec sheet, a feature matrix or a rate card ends up choosing a workaround. There are four of them, and they are not equal.

The rest of this guide walks through each one, then covers the two things people get wrong regardless of method: merged cells and mobile.

Method 1: Building a Table With Grid or Flexbox

This is the answer you will find in most tutorials and in nearly every forum thread. Add a Div Block, set it to Grid, define columns and rows, drop Text Blocks in the cells, style the borders.

How to build it:

• Add a Div Block and set Display to Grid in the Style panel

• Set the column count to match your data, and let rows fill automatically

• Add a Text Block into each cell, or a Div Block if the cell needs an icon plus text

• Style the first row differently so it reads as a header

• Add a border to each cell, or a border to the grid plus gap, depending on the look you want

What it gets right: full visual control, no custom code, and every cell is a normal Webflow element you can style with classes and animate with interactions.

What it gets wrong: the output is a pile of divs. Nothing connects a value to the heading above it. A screen reader user hears a continuous run of loose text with no idea which column any number belongs to. There is no row context, no column context, and no way to navigate cell by cell the way assistive technology navigates real tables.

There is a second cost that shows up later. Because the grid is positional, adding a row means adding cells in the right order in the Navigator, and clients get this wrong constantly. A table that a marketing person has to update every quarter should not be a hand-ordered grid.

Use this method when the thing you are building only looks like a table. A three-column pricing section with a card per plan is not tabular data, and it is fine as a grid. A spec sheet with fourteen rows of measurements is tabular data, and it is not.

Method 2: An HTML Embed on a Static Page

Drop an Embed element on the page and write the table by hand:

<table class="plan-table">
  <caption>Plan comparison</caption>
  <thead>
    <tr>
      <th scope="col">Feature</th>
      <th scope="col">Starter</th>
      <th scope="col">Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">CMS items</th>
      <td>2,000</td>
      <td>10,000</td>
    </tr>
  </tbody>
</table>

<table class="plan-table">
  <caption>Plan comparison</caption>
  <thead>
    <tr>
      <th scope="col">Feature</th>
      <th scope="col">Starter</th>
      <th scope="col">Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">CMS items</th>
      <td>2,000</td>
      <td>10,000</td>
    </tr>
  </tbody>
</table>

This is correct markup. Screen readers announce it properly, the browser handles column alignment for free, and it is a fraction of the DOM weight of a div grid.

The catch is that everything after the first build happens in code. The client cannot edit it, you cannot style it with Webflow classes, and you are writing CSS in a second embed or in the page head. On a Client-First project this also breaks your naming convention unless you are careful, because the styles live outside the Designer entirely.

Embeds have a 50,000 character limit, which sounds generous until you write a forty-row table with inline styling.

Method 3: HTML Tables in Webflow Rich Text and CMS Items

This is the one people search for most, and it has the least useful advice written about it.

Webflow’s Rich Text element has no table button. You cannot type a table into a blog post the way you would in Notion or Google Docs. What you can do is add an HTML Embed block inside the rich text content itself, which is supported both in the Designer and in the CMS item editor.

The workflow:

1. Open the CMS item and click into the rich text field

2. Press Enter to get a new line, then click the plus icon

3. Choose the code or embed option from the list of blocks

4. Paste your table HTML

5. Save and publish

Styling it is the part nobody mentions. The table is inside rich text, so it has no classes of its own that you can select in the Designer. You style it by selecting your Rich Text element, then styling the nested table tag through the “All … inside Rich Text” selector, or by writing CSS in the page or site head:

.rich-text-block table {
  width: 100%;
  border-collapse: collapse;
}

.rich-text-block th,
.rich-text-block td {
  border: 1px solid #e4e4e7;
  padding: 0.75rem 1rem;
  text-align: left;
}

.rich-text-block table {
  width: 100%;
  border-collapse: collapse;
}

.rich-text-block th,
.rich-text-block td {
  border: 1px solid #e4e4e7;
  padding: 0.75rem 1rem;
  text-align: left;
}

Do that once at the site level and every table in every blog post inherits it. That is the difference between a maintainable setup and pasting inline styles into fifty CMS items.

The common shortcut people use here is building the table in Google Sheets and running it through a generic HTML converter. It works, but generic converters produce styling-free markup with no scope attributes, no caption, and no scroll wrapper, so you inherit all the accessibility problems and still have to write the CSS.

Method 4: A Table Builder That Pastes Real Elements Into the Designer

The fourth option is to build the table outside Webflow in a visual tool, then bring it into the Designer as native, editable elements rather than as code.

This is the route I take on client work now, which is why I built Table Forge. You build the table visually, merge whatever needs merging, style borders and tints and icons, then copy it and paste it directly onto the Webflow canvas. What lands is a real <table> with <thead>, <th>, scope attributes and a caption, wrapped in a scroll container, using clean Client-First class names you can restyle in the Designer afterwards. There is also an HTML embed export for the rich text case above.

Finsweet Table solves the same problem from inside a Webflow app, with CSV import and canvas editing. It is a good tool and worth a look if you prefer to stay in the Designer for the whole build.

The shared advantage over methods 2 and 3 is that the output is not a black box. Once it is on the canvas, a cell is a cell. You can restyle it, a client can retype a value, and the markup stays correct.

Merged Cells and Colspan in Webflow

Merged cells are the point where the grid method stops being viable, so it deserves its own section.

A spec table with a header that spans four columns, or a label column that spans three rows, needs colspan and rowspan. Webflow’s Designer has no control for either. CSS Grid can fake the visual with grid-column: span 4, and it will look identical in a screenshot, but the underlying markup still says nothing about the relationship.

In real table markup it is one attribute:

<tr>
<th scope="col" rowspan="2">Channel width</th>
<th scope="colgroup" colspan="4">Guard interval 800ns</th>
</tr>

scope="colgroup" is the part that gets skipped even by developers who remember colspan. It tells assistive technology that this heading governs the group of columns beneath it rather than a single one. Without it, a merged header is announced as though it belongs to whatever column it happens to start in.

If your design has grouped headers, methods 2, 3 and 4 are your only honest options.

Making Tables Responsive in Webflow

A table with six columns cannot become a table with six columns on a 375px screen. Squeezing it just breaks words across three lines each and makes it unreadable.

The reliable pattern is horizontal scroll with a minimum width:

<div class="table_scroll" role="region" aria-label="Modem comparison table" tabindex="0">
  <table class="table_main"> ... </table>
</div>

.table_scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table_main {
  min-width: 40rem;
  width: 100%;

}

<div class="table_scroll" role="region" aria-label="Modem comparison table" tabindex="0">
  <table class="table_main"> ... </table>
</div>

.table_scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table_main {
  min-width: 40rem;
  width: 100%;

}

Three details that matter and usually get missed:

• min-width on the table, not the wrapper. Set it to the point where the table stops being readable, so it scrolls before it crushes rather than after

• tabindex="0" on the scroll container. A keyboard user with no mouse cannot reach the far columns of a scroll region that is not focusable. This is a real WCAG failure and it is one line to fix

• role="region" plus a label, so the focusable container is announced as something meaningful rather than an unnamed group

The alternative pattern, collapsing each row into a stacked card on mobile, reads better for short tables but needs duplicated labels and falls apart the moment a table has merged cells. Scroll is the safer default.

An Accessibility Checklist for Webflow Tables

Before you ship any table, regardless of how you built it:

• The data lives in a <table>, not divs, if it is genuinely tabular

• Header cells are <th>, not <td> with bold text

• Every <th> has scope="col" or scope="row", and merged headers use colgroup or rowgroup

• There is a <caption> describing what the table contains

• Icon-only cells have a visually hidden text label, because a tick mark is completely silent to a screen reader

• The scroll container is focusable and labelled

• Colour is not the only thing carrying meaning, so a green cell also says yes

That last one catches a lot of comparison tables. If the entire meaning of a cell is that it is green, a colour-blind user reads an empty box.

So Which Method Should You Use?

• The content only looks like a table and nobody will edit it: grid divs are fine

• One static table, you own the site, it will never change: HTML embed

• A table inside a blog post or CMS item: HTML embed inside rich text, with the CSS written once at site level

• A client has to maintain it, or the design has merged headers: build it in a table tool and paste real elements onto the canvas

The honest summary is that Webflow’s missing table element is a five minute problem the first time and a recurring one after that. Pick the method that matches who is going to touch the table next, not the one that is fastest to get on the page today.

I built Table Forge because I kept hitting this on client projects. It is free, runs in the browser, and nothing you type is sent anywhere. Try Table Forge

FAQs

Does Webflow have a native table element?

No. Webflow’s add panel has no table element and no way to merge cells on the canvas. Tables have to come from an HTML embed, a third-party table tool, or a grid of divs that imitates a table without the underlying markup.

How do I add a table to a Webflow blog post or CMS item?

Rich text fields have no table button, but they do accept an HTML Embed block. Click into the rich text field, press Enter for a new line, click the plus icon, choose the code block, and paste your table HTML. Style it once through the “All inside Rich Text” selector so every post inherits the same table styling.

Can I merge cells in Webflow?

Not in the Designer. There is no colspan or rowspan control. You can fake the visual with CSS Grid spans, but the markup will not carry the relationship, so screen readers will not announce merged headers correctly. Real merged cells require table markup produced outside the Designer.

Are grid-based tables bad for SEO?

They are not directly penalised, but they are worse for it. Real table markup is unambiguous about which value belongs to which heading, which helps search engines and AI answer engines extract data from the page. A grid of divs is just text in a box.

How do I make a Webflow table responsive on mobile?

Wrap the table in a container with overflow-x: auto and give the table a min-width at the point where it stops being readable. Add tabindex="0" and a role="region" with a label on that container so keyboard users can scroll it too.

What is the character limit on a Webflow HTML embed?

Embed elements are limited to 50,000 characters. That is plenty for most tables, but inline-styling a large table can approach it, which is another reason to move the CSS into the page or site head.

Is there a free tool to build Webflow tables?

Yes. Table Forge is free and runs entirely in the browser, with no account and no data leaving your machine. It builds the table visually, handles merged cells, tints and icons, and exports either as elements you paste onto the Webflow canvas or as an HTML embed. Finsweet Table is another good option if you prefer working inside a Webflow app.

Can I edit the table after pasting it into Webflow?

If you paste real elements onto the canvas, yes. Every cell becomes a normal Webflow element with a class, so you can restyle it in the Designer and a client can retype values. If you use an HTML embed, all future edits happen in the code.

Further reading and next steps

Continue with Webflow CMS Explained: A Practical Guide for Marketing Teams and Webflow Page Speed Optimization: A Step-by-Step Guide for 2026.

Planning a Webflow build? Explore my Figma-to-Webflow development service or send your project brief to discuss scope and next steps.