Adding and styling HTML tables in Webflow rich text fields

Introduction

Creating and styling HTML tables in Webflow's rich text fields can be a great way to organize and present data in a visually appealing and easy-to-read format. This blog post will discuss using HTML tables in Webflow and provide tips and tricks for making them look great.

A Webflow Rich text field primer

Rich text fields are a great way to add formatted long-form content to your Webflow site. They are typically used in Webflow collections as text content for items such as blog posts and articles. Rich text fields allow you to use a wide range of formatting elements such as headings, bold and italicized text, images, lists and more.

If you're on one of Webflow's paid plans, you can add arbitrary custom code to a rich text element. This is useful for adding content you cannot do otherwise through the rich text editor, such as HTML tables or other advanced HTML formatting.

For a more in-depth look at rich text fields, please refer to the Rich text field lesson on the Webflow University website.

Adding a table to a rich text field

You can add a table with the custom code feature of the rich text editor. Start by adding a blank new line in your text at the location where you want to add the table. You will see a “plus” button appears. Click the “plus” button to get access to the insert menu. Then, click on the “custom code” item. The HTML Embed Code Editor window will open, allowing you to add any custom code to the document. For this example, let’s add a table with the most common HTTP Status codes. Paste the following table in the “Custom Code” section, then click the “Save & Close” button.

<table>
    <tr>
        <th>Numberic code</th>
        <th>Name</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>200</td>
        <td>OK</td>
        <td>The request was successful</td>
    </tr>
    <tr>
        <td>401</td>
        <td>Unauthorized</td>
        <td>The user is not authorized to access the requested resource</td>
    </tr>
    <tr>
        <td>403</td>
        <td>Forbidden</td>
        <td>The server understands the request, but it refuses to authorize it</td>
    </tr>
    <tr>
        <td>404</td>
        <td>Not Found</td>
        <td>The requested resource could not be found</td>
    </tr>
    <tr>
        <td>500</td>
        <td>Internal Server Error</td>
        <td>An error occurred on the server</td>
    </tr>
    <tr>
        <td>503</td>
        <td>Service Unavailable</td>
        <td>The server is currently unavailable (overloaded or down)</td>
    </tr>
</table> 

The Webflow rich text editor does not display your custom code for the table and will, instead, display a notice indicating that the content will only appear on the published site. At this point, you can publish the site and view the published content. You will see the content from your table displayed on the published page.

Format your tables with CSS

Depending on your theme, your table may not have any styling applied to it. In the example above, we have used one of the default Webflow themes, which does not have any styling for tables. Consequently, the table looks very bland and not much like a table.

To style the table, we can make use of CSS. CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of a document written in a markup language such as HTML. It is used to separate the presentation of a document from its content, allowing web developers to apply consistent styles across multiple pages or change the look of a website without affecting its underlying structure or content.

CSS can be used to style HTML and XML documents, including elements such as text, colours, images, and layout. It allows developers to control the layout, font, and colour of text, the spacing between elements, the size and position of elements on the page, and even how elements respond to user interactions like hover or click events.

CSS can be written in separate files and linked to HTML documents, or it can be included directly in the HTML document using the <style> tag. It can also be combined with JavaScript to create dynamic and interactive web pages.

CSS has many selectors, properties, and values that can target specific elements and apply styles. It also has several layout models, such as block, inline, table, and flexbox, that can create complex and responsive web layouts.

In the remainder of this document, we will use CSS to style our table. We will demonstrate various ways you can add CSS and the benefits of each approach. Once again, we will be using custom code to add the CSS. If you are unfamiliar with this method, read the Webflow University article on adding custom code in head and body tags.

Add styles to your collection page template

In the example above, we added a table to a blog post, represented as an item in our Blog Posts Collection. This collection has a template that defines the layout for each item in the collection. You can edit the page settings for this collection template but opening the Pages panel and clicking on the “Edit page settings” icon to the right of the template. Scroll down to the “Custom Code” section and locate the “Inside <head> tag text box. Paste the following code in the textbox, then click the “Save” button.

<style>
  th,
  td {
    border: 1px solid black;
    text-align: left;
    padding: 8px;
  }

  table {
    border-collapse: collapse;
  }
</style>

At this point, you can publish your site again. If you now view your page, you can see a better formatted table.

Applying the styling to blog post content only

We applied the CSS styling above only to the blog posts template, so it will only be limited to those pages. However, it will apply to all tables on those pages. If, for example, you have a table in your page header, footer or sidebar, it will apply to those tables as well.

To work around this problem, we can limit the styles we specified to only apply to tables inside a specific container.

Go back to your blog post template and select the container element that contains the content for the blog posts. Then, go to the Element Settings Panel and give the container an ID. In the example below, I gave an ID of blog-post-content. We can now update the CSS styling to only apply to the table elements inside this container by prefixing all the styles we previously created with the container ID. Go back to the custom code section of your template, locate the styles we previously added to the <head> section, and update all the styles by prefixing them with #blog-post-content.

<style>
  #blog-post-content th,
  #blog-post-content td {
    border: 1px solid black;
    text-align: left;
    padding: 8px;
  }

  #blog-post-content table {
    border-collapse: collapse;
  }
</style>

This will ensure that your custom styles will only apply to those HTML elements if they are contained inside a container with the ID of blog-post-content. If you are curious to learn more about this, we suggest you read up on CSS selectors and specificity.

You can, once again, publish your website, and your table will still look the same as before. However, if you had any other tables on the page that were affected by the previous styling, those will no longer be affected.

Apply styling to a specific blog post

In the previous examples, we applied styling to all blog posts by adding the styles to the blog post template. But what if you only want to apply the styling to one blog post? In that case, you can add the style to the same custom code block that contains the table.

As shown in the example below, I added the styles and the table inside the same custom code block. You only need to add the styles once per blog post, so if you have multiple tables in the blog post, you only need to add the styles with the first table. Alternatively, you can add a custom code block at the top of the blog post content that only contains the styles.

Using Cloudpress to export tables

Our Cloudpress product takes care of exporting tables, along with other content, such as your images, for you. Cloudpress allows you to export from Google Docs and Notion to Webflow - as well as various other Content Management Systems.

The screenshot below is an example of a blog post that contains a table that was created in Notion. Below is that blog post exported and published on a Webflow site. As you can see, the table was exported perfectly. You can read more about our Google Docs to Webflow, as well as our Notion to Webflow integration. You can sign up for an account today and try it out yourself.

Conclusion

In this blog post, we demonstrated how you could add a table to your rich text content by using the HTML Embed Editor in Webflow. We then demonstrated how you could use various techniques to add styling to that table using CSS. Finally, we gave you a brief glimpse into the power of Cloudpress and how it exports tables from Notion and Google Docs on your behalf.