Streaming live at 10am (PST)

Tables in Webflow


#1

What's the easiest way to create and format a table using Webflow ? One of my clients uses a table for his schedule, color coordinates it based on certain criteria..

Or do I need to create it outside of Webflow and embed it ?

Example below:

Thanks in advance..
Mike D


How to build (long) basic table in Webflow
#2

Hi, since webflow does not have table support, your best bet (I think) is to do this externally and then embed the table into webflow. You could of course, use div blocks and perhaps columns to hold the data, but looking at your sample data, I think that creating an external table would probably work best. Basically if you are using a few tabular elements, DIVs can work well, but if you are using a lot of tabular data, then tables are a good option. Hope that helps, there may be other opinions. Cheers


#3

Thanks CyberDave.. I thought that might be the case but was hoping someone knew some "tricks" that I didn't see posted.. No problem creating the tables I need outside of Webflow and embed..

Any chance tables and table support might be included in any future updates, I wonder....

Mike D


#4

Not sure when they will be adding table support, but maybe this will also help you from another post in the forum...

Cheers


#5

Oh good to know that it's in the "plan" !! Thank you for the replies.. Greatly appreciated..


#6

Don't suppose the table features are nearly ready? Very keen to use them in a new project.


#7

check this HTML Table Tutorial

eldo


#8

Can you explain further about how to use div blocks and floats to create a table please?


#9

Hi @DawnM, a good example is on our Demo Kit site: https://webflow.com/website/Demo-Kit

Page: Div Table

There you can see how to create a two column table, but you can easily make it a three column table by changing the number of columns in each row.

Inside of each column, put a div and your content.

​I hope this helps. If not, please let me know – I'm happy to assist further! smile

Cheers,
Dave


#10

Thanks for getting back to me so quickly.


#11

This would be really helpfull. Doing designs for dashboards, etc is a pain without a better support for this.

/Micke


#12

Yes, I agree, tables would be great to have in Webflow. Is this development any nearer?
Might be worth noting that cell spacing/padding works differently in html5 - now required in CSS rather than

Mike


#13

Tables are NOT the answer we're looking for. Why? Because they don't work well with responsive designs. And styling is a pain. The workarounds are also a pain. @pnewest, there has been some chatter about upcoming flexbox support in Webflow.

Some interesting links on the topic:

https://css-tricks.com/responsive-data-tables/
https://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/
http://exisweb.net/responsive-table-plugins-and-patterns

Edit:

I suppose it needs to be said that you can create your own table in Webflow by typing it out in Embed:

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Webflow even renders the table in the Designer view:

Source for sample code: http://www.w3schools.com/html/html_tables.asp


#14