Tutorial

Elementor HTML Tables

Uses Plugins

Elementor Free
Crocoblock JetEngine

Description

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.

1

Add an HTML Widget to the Editor

Simply drag an HTML Widget to where you want it in the editor.

2

Add the HTML and CSS code to the HTML Widget

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.

Code (click to copy)

CSS (css)

<style>
	#test-table thead {
		background-color: #333;
	}
	#test-table thead th{
		text-align: left;
		color: white;
	}
	#test-table tfoot{
		background-color: #ccccff;
	}
</style>

HTML (html)

<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>