How to build a table in Webflow

Hello! I just had a very quick question.
I was wondering if anyone could give me some advice on how to build a table in Webflow?
Please see attached the rough table I am trying to replicate - I was wondering if it would be best to make this using a grid/column/section etc, or another way!
Also need to choose a method where the table will look good in both desktop and phone view.
Thank you :slight_smile:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

If the data you wish to present is tabular in nature then HTML Tables are the best way. Webflow does not have a table element but if your plan supports custom code you can add them there. Making tables responsive is more of a challenge. There are plenty of tuts on that and even some awesome libraries like datatables.js which leverages jQuery and that is installed already on all Webflow projects.

Got JSON data? Look at HTML Tables - Sygnal Attributes | Designed for Webflow

1 Like

I’m sure there are a multitude of ways to do this but I have a sample setup up as a cloneable section on my public profile or you can inspect to see how it’s arranged. Columns are set up as % of the width.
My perspective is that if a client requires something like this on mobile, they must accept that the information will need to be simplified with display=none on secondary info, and the user will most likely need to pinch-to-zoom to read the text clearly.

Live
https://table-sample-123.webflow.io/

Read-only
https://preview.webflow.com/preview/table-sample-123?utm_medium=preview_link&utm_source=dashboard&utm_content=table-sample-123&preview=8c6167b486c8d1ae8e095d7a10e8616a&workflow=preview

Clone:

2 Likes

FYI: Datatables is mobile friendly.

thank you, appreciate the help!

Thank you very much :slight_smile:

Gentleman.
I keep searching but finding only old posts that says webflow does not support


 <table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

Can you tell me how I can align this without a table? Not sure why such a core basic feature of html would be missing…

I want to align days and hours so that hours are in a straight line:

Lucas

Hi Lucas👋 You may create table by using Flexbox/Grid layout, also you may create a table with this Finsweet Table App: Finsweet Table