home
No code to 
<know code>

Table

<table>

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

This is a table
First column Second column Third column Fourth column
First row A1 A2 A3
Second row B1 B2 B3
Third row C1 C2 C3
Fourth row D1 D2 D3

And here's the code. It's exactly what I have above, and it's exactly what Webflow would export.

<table>
<caption><strong>This is a table</strong></caption>

<thead>
<tr>
<th>First column</th>
<th>Second column</th>
<th>Third column</th>
<th>Fourth column</th>
</tr>
</thead>

<tbody>
<tr>
<th>First row</th>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>

<tr>
<th>Second row</th>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>

<tr>
<th>Third row</th>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>

<tr>
<th>Fourth row</th>
<td>D1</td>
<td>D2</td>
<td>D3</td>
</tr>

</tbody>
</table>

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.
<tr>
<th>
<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.

This is a table
First column Second column Third column Fourth column
First row A1 A2 A3
Second row B1 B2 B3
Third row C1 C2 C3
Fourth row D1 D2 D3
.table {
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-justify-content: space-around;
 -ms-flex-pack: distribute;
 justify-content: space-around;
 -webkit-box-align: stretch;
 -webkit-align-items: stretch;
 -ms-flex-align: stretch;
 align-items: stretch;
 border-style: solid;
 border-width: 0.2em;
 border-color: #5762ff;
 background-color: rgba(87, 98, 255, 0.2);
 font-family: 'Times New Roman', TimesNewRoman, Times, Baskerville, Georgia, serif;
 color: #000;
 text-align: center;
}

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

<style>
.tableborder {
td, th
{
 border: 1px solid #ebac1c;
 text-align: left;
 padding: 8px;
}
tr:nth-child(even) {
 background-color: #dddddd;
}
</style>

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.