Examples
One element, three very different tables.
Each example uses the same element
with different options turned on.
- yoursite.com/drills/compare
4 of 11 models
| Model | Volt | Torque | Weight | Battery |
|---|---|---|---|---|
| Torque X18 |
18 V
| 135 Nm | 1.6 kg | 5.0 Ah |
| Torque X18 Compact | 18 V | 110 Nm |
1.3 kg
| 4.0 Ah |
| Pro Driver 18 | 18 V | 95 Nm | 1.4 kg | 4.0 Ah |
| Site Mate 18 | 18 V | 70 Nm | 1.2 kg | 2.0 Ah |
Example 01
Spec sheet with search and sorting
Live search narrows the rows, the Torque column is sorted high to low, and the hovered row picks up the hover color over zebra stripes.
- yoursite.com/events/autumn-talks
Autumn talks, October 2026. All times local.
| Date | Session |
Speaker
|
Room
|
|---|---|---|---|
| Tue 7 Oct | Designing for slow networks | Tom Okafo | Hall A |
| Tue 7 Oct | Accessible forms in Avada | Lena Fischer | Hall B |
| Wed 8 Oct | Marco Bianchi | Hall A | |
| Wed 8 Oct | Image formats that pay off | Sofia Lindqvist | Hall B |
| Thu 9 Oct | WooCommerce at scale | Daniel Hughes | Hall A |
| Thu 9 Oct | Headless or not? | Claire Dubois | Hall B |
| Thu 9 Oct | Core Web Vitals clinic | Tom Okafo | Workshop room |
| Thu 9 Oct | Writing better alt text | Hannah Moore | Hall B |
| Fri 10 Oct | Caching without surprises | Marco Bianchi | Hall A |
| Fri 10 Oct | Design systems in Avada | James Carter | Hall A |
| Fri 10 Oct | Closing panel | All speakers | Hall A |
Example 02
Event schedule with sticky header and pages
The header row stays pinned as the list scrolls, a moved session is struck through, and pagination splits the season.
Example 03
The same table on a phone, in each responsive mode
Pick a mode and set the breakpoint where it takes over. Above it, visitors see the full table.
[ Breakpoint: 768px ]
9:41 yoursite.com
Compare drills
Swipe the table to see every column.
| Model | Volt | Torque | Weight | Battery |
|---|---|---|---|---|
| Torque X18 |
18 V
| 135 Nm | 1.6 kg | 5.0 Ah |
| Torque X18 Compact | 18 V | 110 Nm |
1.3 kg
| 4.0 Ah |
| Pro Driver 18 | 18 V | 95 Nm | 1.4 kg | 4.0 Ah |
| Site Mate 18 | 18 V | 70 Nm | 1.2 kg | 2.0 Ah |
Scroll for more →
Mode A
Horizontal scroll
Columns keep their width and the table scrolls sideways, so nothing gets squeezed.
9:41 yoursite.com
Compare drills
Each row becomes its own card.
| Model | Volt | Torque | Weight | Battery |
|---|---|---|---|---|
| Torque X18 |
18 V
| 135 Nm | 1.6 kg | 5.0 Ah |
| Torque X18 Compact | 18 V | 110 Nm |
1.3 kg
| 4.0 Ah |
| Pro Driver 18 | 18 V | 95 Nm | 1.4 kg | 4.0 Ah |
| Site Mate 18 | 18 V | 70 Nm | 1.2 kg | 2.0 Ah |
Mode B
Stacked cards
Each row turns into a card with the header labels beside each value. Needs a header row.
See it working on a real Avada site.
What you can build
Tables visitors read, compare,
and come back to.
| Basic | Pro | Team | |
|---|---|---|---|
| Price |
$9
| $49 | |
| Projects | 3 | 20 |
Unlimited
|
| Support | Priority | Priority |
Pricing comparison tables
Line up plans side by side so visitors can compare features row by row. Strike through the old price when a plan is on sale.
Model K2 / Specifications
| Weight | 1.2 kg |
| Dimensions |
310 × 220 × 18 mm
|
| Battery |
Up to 14 hours
|
| Ports |
2 × USB-C, HDMI
|
Product spec sheets
Publish dimensions, materials, and model numbers in a table that stays readable on small screens. Visitors can search for the one spec they care about.
| Date | Fixture |
|---|---|
| Sat 4 Oct |
Harbour FC vs Millbrook
|
| Sun 5 Oct |
Eastside vs Kingsway
|
| Sat 11 Oct |
Millbrook vs Eastside
|
Sports and event schedules
List fixtures, sessions, or show times and let visitors sort by date or search for a team. Pagination keeps a full season on one page without an endless scroll.
Features
What is in the element.
Column sorting
Visitors click a header to sort, with arrows showing the direction.
Live search
Rows filter as visitors type, with no page reload.
Pagination
Split long tables into pages so the section stays a sensible length.
Sticky header
Column labels stay in view while visitors scroll through rows.
Responsive modes
Horizontal scroll or stacked cards, switched at a breakpoint you set.
Visual editor plus CSV
Edit cells in a visual grid, or paste and edit the data as CSV.
Stripes, hover, borders
Zebra striping, row hover colors, per-side borders, and table radius.
Header and body type
Set header row typography separately from body cell typography.
Rich cells and caption
Links, bold, and strikethrough for sale prices, plus a table caption.
Works the Avada way
Built like the elements Avada already ships.
No separate dashboard and no second styling system. You build the table where you build everything else.
[ ]
Avada Builder
Add it from the Fancy Elements category like any other element.
[ ]
Global colors and typography
Pick from your Avada global colors and typography so tables match the site.
[ ]
Avada Live
Build and edit the table on the front end, in context.
[ ]
Live option updates
Changes to options show in the preview while you edit.
FAQ
Advanced Table questions
Related elements
Fancy Cost Calculator
Live estimates without a spreadsheet
Sliders, dropdowns, and checkboxes update a formatted total as visitors change inputs.
Fancy Calendar
Month and week grids with real event days
Date-specific entries with popups and today highlighting in the visitor’s browser.
Fancy Schema Markup
JSON-LD from builder fields
Output Product, FAQ, LocalBusiness, and other schema.org types from fields you fill in.