This tutorial will show you how to create HTML Tables in Elementor HTML Widgets and Text Editor Widgets.
This does not require any plugins and is often easier than using a plugin.
For simple tables, all you need is to know the HTML Markup for tables and a little bit of CSS if you want to style the table.
Simply drag an HTML Widget to where you want it in the editor.
Copy and paste the HTML code below into the HTML Widget.
Copy and paste the CSS code below into the HTML Widget. Wrap the code in <style></style>
Edit the headers and rows for your content.
Edit the Styles for your styling.
Note: If you have Elementor PRO, instead of using an ID on the table, you may also move the CSS to the Widget's Advanced -> Custom CSS. Just replace the "#test-table" with "selector". "selector" will ensure the CSS is only applied to this HTML Widget.
<style>
#test-table thead {
background-color: #333;
}
#test-table thead th{
text-align: left;
color: white;
}
#test-table tfoot{
background-color: #ccccff;
}
</style><table id="test-table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Action 1</td>
</tr>
<tr>
<td>Value 1</td>
<td>Action 1</td>
</tr>
<tr>
<td>Value 1</td>
<td>Action 1</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2"> Footer message</th>
</tr>
</tfoot>
</table>