In Webflow there is no <table> element, but you can add a nice HTML <table> with Webflow > Add Elements (A) > Components > Embed
Here's a demo table
And here's the code. It's exactly what I have above, and it's exactly what Webflow would export.
<caption><strong>This is a table</strong></caption>
Let's look at the HTML in more detail.
<thead> is used to group the header content. This is created as a separate unit.
<tr> defines a row
<th> defines a header cell
<tbody> is used to group the body content.
You create each row as a unit.
<td> a standard cell in a <table>. You repeat this as many times as you need.
Style the <table>
Let's add a little more style.
The table has a class = "table" and so you can add CSS to tidy things up and change the font if you want. You have to add the class in the Webflow > Style (S) > Selector
Here's the same table with some styles added. I've added background color, border, font, flex and text-align. Remember, this is all adding CSS to the whole table.
background-color: rgba(87, 98, 255, 0.2);
font-family: 'Times New Roman', TimesNewRoman, Times, Baskerville, Georgia, serif;
Add CSS to the rows and columns
You can add CSS to the rows and columns when you embed the code.
Here's some code to add alternate horizontal gray stripes and and some
- orange cell borders
- left align text and padding
- horizontal gray stripes on table rows <tr>
border: 1px solid #ebac1c;
In Webflow you can't change the <tr> and <td> without it affecting ALL tables in the site. So to demo this change, I've made a code pen.