Table

Overview

This element allows you to display either a list of tabular data in a default table layout, or you can use it to create tables with custom styling, which is perfect for things like pricing tables.

View examples of the Table element.

Code Snippets

How to use the snippets?

Add the CSS Snippets to Enfold child theme styles.
Add the JS and PHP scripts to your child theme functions.php file.
Shortcodes can be used in a text area in pages, posts, sliders and widget areas. Enable debug mode to view the page shortcode.
Enable custom CSS class name support to add your class names to the theme elements.
Disable script merging and clear the cache to view the changes on the frontend.

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

[av_table purpose='pricing' pricing_table_design='avia_pricing_default' pricing_hidden_cells='' caption='' responsive_styling='avia_responsive_table' custom_class='' av_uid='av-lk912u']
[av_row row_style='' av_uid='av-lgwxry'][av_cell col_style='' av_uid='av-l9dvae'][/av_cell][av_cell col_style='' av_uid='av-l4gwx2'][/av_cell][av_cell col_style='' av_uid='av-kw68lq'][/av_cell][/av_row]
[av_row row_style='' av_uid='av-kpko4u'][av_cell col_style='' av_uid='av-knybtq'][/av_cell][av_cell col_style='' av_uid='av-kguyxa'][/av_cell][av_cell col_style='' av_uid='av-k8wd0u'][/av_cell][/av_row]
[av_row row_style='' av_uid='av-20in9q'][av_cell col_style='' av_uid='av-jwp95i'][/av_cell][av_cell col_style='' av_uid='av-jr8loe'][/av_cell][av_cell col_style='' av_uid='av-jjop3i'][/av_cell][/av_row]
[/av_table]

Customization

Pricing table background

To custom style the pricing table background please use the CSS below.

Private Plan
10$
per month
1 GB Bandwidth
10 MB Max File Size
3 GHZ CPU
256 MB Memory
Get Private Plan

Business Plan
20$
per month
10 GB Bandwidth
50 MB Max File Size
5 GHZ CPU
1024 MB Memory
Get Business Plan

Mega Plan
50$
per month
Unlimited Bandwidth
No Maximum File Size
5 GHZ CPU
4 GB Memory
Get Mega Plan

/*----------------------------------------
// CSS - Pricing Table 
//--------------------------------------*/

/* Heading */
#top .pricing-table li.avia-heading-row,
#top .pricing-table li.avia-heading-row .pricing-extra {
    background-color: #3369e7!important;
    /* color: #ffffff; */  
    border-color: none;
}

/* Pricing rows */
#top .pricing-table li.avia-pricing-row {
    background-color: #00aeff!important;
    /* color: #ffffff; */
    border: none;
}

Table heading

To custom style the table heading font please use the CSS below.

/*----------------------------------------
// Table headings 
//--------------------------------------*/
#top .avia-table th {
	background: #3b5998;
	color: #e9e8dd;
}

Table rows

To custom style the table rows with alternate background color please use the CSS below.

This is a neat table caption
Configurations	DUAL 1.8GHZ	DUAL 2GHZ	DUAL 2.5GHZ
Model	M9454LL/A	M9455LL/A	M9457LL/A
g5 Processor	Dual 1.8GHz PowerPC G5	Dual 2GHz PowerPC G5	Dual 2.5GHz PowerPC G5
Frontside Bus	900MHz per processor	1GHz per processor	1.25GHz per processor
Level 2 Cache	512K per processor	512K per processor	512K per processor
	Click me	Click me	Click me

/*----------------------------------------
// CSS - Table row bg
//--------------------------------------*/

/* Table rows */
#top .avia-table tr {
	color:#0e0e0e;
}

/* Table border */
#top .avia-table tr th,
#top .avia-table tr td,
#top .avia-table tr {
	border: none!important;
	box-shadow: 0px 1px 1px -1px rgba(31, 31, 31, 0.85);
}

/* Alternate row color */
#top .avia-table tr:nth-child(odd)
{ 
	background: #eff2f3 !important; 
}
#top .avia-table tr:nth-child(even)
{ 
	background: #d7dcdd !important; 
}

/* Table head */
#top .avia-table th {
	background: #3b5998;
	color: #e9e8dd;
}

Table columns

To custom style the table columns with alternate background color please use the CSS below.

This is a neat table caption
Configurations	DUAL 1.8GHZ	DUAL 2GHZ	DUAL 2.5GHZ
Model	M9454LL/A	M9455LL/A	M9457LL/A
g5 Processor	Dual 1.8GHz PowerPC G5	Dual 2GHz PowerPC G5	Dual 2.5GHz PowerPC G5
Frontside Bus	900MHz per processor	1GHz per processor	1.25GHz per processor
Level 2 Cache	512K per processor	512K per processor	512K per processor

/*----------------------------------------
// CSS - Table col bg
//--------------------------------------*/

/* Table rows */
#top .avia-table tr {
    color:#0e0e0e;
}

/* Table border */
#top .avia-table tr {
    border: none!important;
}

/* Alternate row color */
#top .avia-table td:nth-child(odd)
{ 
    background: #eff2f3 !important; 
}
#top .avia-table td:nth-child(even)
{ 
    background: #d7dcdd !important; 
}

/* Table head */
#top .avia-table th {
    background: #3b5998;
    color: #e9e8dd;
    box-shadow: 0px 1px 1px -1px rgba(31, 31, 31, 0.85);
    border: none;
}

Table Buttons

Custom style the table buttons with the CSS code below.

/*----------------------------------------
// CSS - Table buttons
//--------------------------------------*/

/* Table button */
#top .avia-table .avia-button {
	background: gold;
}

Resource

Contributed video:

Table Element Tutorial