Design

0 views

5 min

Add a table in Webflow

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to add a table in Webflow using Gemeos’s HTML/CSS format: mobile responsive, hover states, and a highlighted first column.

Why this method

Webflow has had a native Table element since 2024, but only on static pages in the Designer. For Rich Text and CMS collections, the only way to add a table is with an HTML embed and custom CSS. The Gemeos format you’ll find here is the one used across all Academy articles: horizontal scroll on mobile, light purple headers, bold first column, and row hover states.

Example:

Tool	Price	Hosting	CMS
Webflow	Starting at €14/month	Included	Native
WordPress	Free + hosting	Paid separately	Native
Framer	Starting at €10/month	Included	Limited

good to know

On mobile, the table automatically rearranges itself: each row becomes a stacked block, column headers disappear, and they’re replaced by labels pulled from each td’s data-label attribute. Make sure you set data-label='[Column name]' on every td so the mobile layout stays readable.

1. Add the CSS to your project

You’ve got two options: either add it in Project Settings > Custom Code > Head to apply it sitewide, or drop it into a <style> embed on the specific page only.

/* Horizontal scroll wrapper */
.blog-table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin-top: 1.5rem;
}
/* Main table */
.blog-table {
  position: relative;
  left: -0.5rem;
  width: calc(100% + 1rem);
  table-layout: fixed;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 8px;
  font-size: 16px;
  line-height: 1.5;
  color: #1a1a1a;
  background: transparent;
}
/* Headers */
.blog-table thead th {
  background: rgba(209, 207, 249, 0.72);
  padding: 18px 20px;
  font-weight: 600;
  text-align: left;
  color: #111;
  border: none;
  border-radius: 10px;
  white-space: normal;
}
/* Body cells */
.blog-table tbody td {
  padding: 20px;
  background: #fffefa;
  border: none;
  border-radius: 10px;
  white-space: normal;
  text-align: left;
  vertical-align: top;
}
/* First column */
.blog-table tbody td:first-child {
  background: rgba(232, 231, 255, 0.48);
  font-weight: 700;
}
/* Hover */
.blog-table tbody tr:hover td { background: #f0efff; }
.blog-table tbody tr:hover td:first-child { background: rgba(209, 207, 249, 0.6); }
/* Mobile */
@media (max-width: 640px) {
  .blog-table { table-layout: auto; min-width: 0; border-spacing: 0; }
  .blog-table thead { display: none; }
  .blog-table tbody tr {
    display: block; margin-bottom: 12px;
    border-radius: 12px; overflow: hidden; background: transparent;
  }
  .blog-table tbody td {
    display: grid; grid-template-columns: 40% 1fr;
    align-items: start; gap: 12px;
    padding: 14px 16px; border-radius: 0;
    border-bottom: 1px solid rgba(209, 207, 249, 0.4);
    background: #fffefa; font-size: 15px;
  }
  .blog-table tbody td:first-child {
    background: rgba(232, 231, 255, 0.72);
    font-weight: 700; border-radius: 12px 12px 0 0;
  }
  .blog-table tbody tr td:last-child {
    border-bottom: none; border-radius: 0 0 12px 12px;
  }
  .blog-table tbody td::before {
    content: attr(data-label);
    font-weight: 600; color: #111;
  }
  .blog-table tbody td:first-child::before { display: none; }
}

2. Paste the HTML into a Webflow Embed

In the Designer or inside your Rich Text, add an Embed element. Paste the HTML structure below and adjust the headers, rows, and number of columns to fit your needs. The data-label on each td (except the first column) is only used for the mobile layout.

<div class="blog-table-wrapper">
  <table class="blog-table">
    <thead>
      <tr>
        <th>Criterionth>
        <th>Option Ath>
        <th>Option Bth>
      tr>
    thead>
    <tbody>
      <tr>
        <td>Performancetd>
        <td data-label="Option A">Fasttd>
        <td data-label="Option B">Very fasttd>
      tr>
      <tr>
        <td>Pricetd>
        <td data-label="Option A">Freetd>
        <td data-label="Option B">€29/monthtd>
      tr>
    tbody>
  div>
  table>

‍

3. Customize your table

A few common tweaks:

Number of columns: add or remove <th> tags in the thead and <td> tags in each tbody tr.
Header color: change rgba(209, 207, 249, 0.72) in the CSS.
Column width: add style="width: 30%" to the <th> tags to control proportions.
Alignment: add style="text-align: center" to numeric cells.

4. Using it in the CMS

To add a table to a blog post or CMS page, use the Embed element in your Webflow Rich Text. Paste the full HTML (wrapper + table + CSS if it’s not global). The table appears directly in the article and stays fully responsive.

Conclusion

This format is the Gemeos standard for all comparison tables, cheat sheets, and summaries. It’s used in every Academy tutorial. Use cases:

Comparison tables for tools or solutions
Cheat sheets for CSS properties or attributes
Summaries of pricing or features

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss