Plan comparison table
A four-column table comparing three plans across six rows, under a short intro.
When to use it
Included because comparison tables are common and because it is worth being honest about how they convert. Elementor has no native table widget, so a real table cannot become a set of editable widgets — it is kept as HTML, with its styling intact. That is the right outcome, not a failure: a table flattened into rows of text widgets would be worse in every way. Use this when the content genuinely is tabular, and use the pricing cards when it is not.
What it converts to
Converted with the Fidelity mode. The component list below is what this template produces — not a generic example.
- Container × 1 — the section
- Heading × 1 — the section H2
- Text Editor × 1 — the intro paragraph
- HTML widget × 1 — the table, kept whole with its styling
Things worth knowing
- The table stays an HTML widget by design. Elementor has no table widget to map onto, and splitting a table into text widgets would destroy both the semantics and the layout.
- Because it stays HTML, edit the table by editing its markup in the widget — not through the Elementor style panel. If your client needs to edit it themselves, a table plugin is the better answer.
- The table scrolls horizontally inside its own wrapper on narrow screens, so the page body never scrolls sideways.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Plan comparison table</title>
<style>
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#fff;color:#14233a}
.wrap{max-width:1000px;margin:0 auto;padding:70px 22px}
h2{font-size:34px;letter-spacing:-.03em;margin:0 0 12px;text-align:center}
.intro{text-align:center;max-width:620px;margin:0 auto 34px;color:#64748b;line-height:1.8;font-size:15px}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:620px}
th,td{padding:14px 16px;border-bottom:1px solid #e6ebf2;text-align:left;font-size:14.5px}
thead th{background:#f7f9fc;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#7c8ba0}
tbody th{font-weight:600;color:#243a56}
td{color:#5b6b82;text-align:center}
td:first-child{text-align:left}
</style>
</head>
<body>
<section class="wrap">
<h2>Compare the plans</h2>
<p class="intro">A table is the right shape when every row applies to every column. If most cells would be empty, use cards instead.</p>
<div class="scroll">
<table>
<thead>
<tr><th>Feature</th><th>Starter</th><th>Studio</th><th>Agency</th></tr>
</thead>
<tbody>
<tr><th>Projects</th><td>1</td><td>Unlimited</td><td>Unlimited</td></tr>
<tr><th>Team seats</th><td>1</td><td>1</td><td>5</td></tr>
<tr><th>Component set</th><td>Core</td><td>All</td><td>All</td></tr>
<tr><th>Shared library</th><td>—</td><td>—</td><td>Yes</td></tr>
<tr><th>Support</th><td>Community</td><td>Priority</td><td>Priority</td></tr>
<tr><th>Onboarding call</th><td>—</td><td>—</td><td>Yes</td></tr>
</tbody>
</table>
</div>
</section>
</body>
</html>