Content

Table

Rows and columns of structured data, styled with presets.

Live demo

See it in action

Data table

Comparison

A header row, striped rows and row hover — a plan comparison.

FeatureFreeProBusiness
ProjectsUnlimitedUnlimitedUnlimited
Visual page builder✓✓✓
Premium elements✗✓✓
Priority support✗✗✓
Price$0$29/mo$79/mo

Data table

Figures & footer

Bordered, right-aligned figures, a footer total and a caption.

RegionQ1Q2Q3
North America128142161
Europe96110124
Asia-Pacific7488103
Total298340388
Quarterly revenue, in thousands of USD.

Data table

Merged cells

Colspan & rowspan in a compact, bordered header.

PlanStorage
SSDBackups
Starter10 GB—
Pro100 GBDaily
Business1 TBHourly

Data table

Interactive

Sortable, searchable and paginated (5 per page).

ElementCategoryTagSince
AccordionInteractiveaccordion1.0
Animated HeadingContentanimated_heading1.6
Before / AfterMediabefore_after1.6
CarouselInteractivecarousel1.6
CounterInteractivecounter1.2
GalleryMediagallery1.6
Pricing TableComponentspricing_table1.6
TabsInteractivetabs1.0
TestimonialsComponentstestimonials1.5
TimelineInteractivetimeline1.6

Pricing mode

Pricing table

The Classic pricing layout — plan columns on a native CSS grid (no Bootstrap fw-col classes), with a highlighted plan and buttons.

Projects
Premium elements
Priority support
Free
$0 /mo
Unlimited
✗
✗
Pro
$29 /mo
Unlimited
✓
✗
Business
$79 /mo
Unlimited
✓
✓

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section class="fw-flexbox fw-flex fw-contained fw-collapse">
	<div class="table tb-51cedf36 table-striped table-hover">
		<table>
			<thead>
				<tr>
					<th style="text-align:left">Feature</th>
					<th style="text-align:center">Free</th>
					<th style="text-align:center">Pro</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td style="text-align:left">Projects</td>
					<td style="text-align:center">Unlimited</td>
					<td style="text-align:center">Unlimited</td>
				</tr>
				<tr>
					<td style="text-align:left">Premium elements</td>
					<td style="text-align:center">✗</td>
					<td style="text-align:center">✓</td>
				</tr>
				<tr>
					<td style="text-align:left">Price</td>
					<td style="text-align:center">$0</td>
					<td style="text-align:center">$29/mo</td>
				</tr>
			</tbody>
		</table>
	</div>
</section>

To learn more about the Table shortcode, please check out the online manual here.