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?

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
  • Business Plan
  • 20$
    per month
  • 10 GB Bandwidth
  • 50 MB Max File Size
  • 5 GHZ CPU
  • 1024 MB Memory
  • Mega Plan
  • 50$
    per month
  • Unlimited Bandwidth
  • No Maximum File Size
  • 5 GHZ CPU
  • 4 GB Memory
/*----------------------------------------
// 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
ConfigurationsDUAL 1.8GHZDUAL 2GHZDUAL 2.5GHZ
ModelM9454LL/AM9455LL/AM9457LL/A
g5 ProcessorDual 1.8GHz PowerPC G5Dual 2GHz PowerPC G5Dual 2.5GHz PowerPC G5
Frontside Bus900MHz per processor1GHz per processor1.25GHz per processor
Level 2 Cache512K per processor 512K per processor 512K per processor

/*----------------------------------------
// 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
ConfigurationsDUAL 1.8GHZDUAL 2GHZDUAL 2.5GHZ
ModelM9454LL/AM9455LL/AM9457LL/A
g5 ProcessorDual 1.8GHz PowerPC G5Dual 2GHz PowerPC G5Dual 2.5GHz PowerPC G5
Frontside Bus900MHz per processor1GHz per processor1.25GHz per processor
Level 2 Cache512K 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