Advanced Tables Documentation

  1. Installation
  2. Create New Table
  3. Shortcode Builder
  4. Table styles
  5. Customization
  6. Credits

Start

Advanced Tables

WordPress Plugin

created: 05/04/2015, v.1.2.3

programming by: Eugene Holin

email: support@lp-tricks.com

Thank you very much for purchasing Advanced Tables Plugin. For any support and ideas please email me to support@lp-tricks.com.
Eugene Holin

1. Installation

  1. Upload “advanced-tables” folder to the “/wp-content/plugins/” directory
  2. Activate the plugin through the Plugins menu into WordPress admin area
  3. Work with Tables as with the usual Posts

2. Create New Table

Just click “Add New” into the right menu to open the window for editing the table.

img1

Enter a title of the table – it will be used on a page with a list of all the tables as the title of the tab, as well as on the single table page.

Responsive table – choose this option if you want to display table responsive on your website.

Now you can choose one of three responsive layouts: Table, Agenda or Cards style.

Display first row as header – choose this option if you want to display the first line as table header tags TH.

Sort table in web site – choose this option if wou want to use Tablesorter for sorting tables data on your web site.

Show caption for Totals – choose this option if you want to display the caption of the Totals on your web site

Just enter the data into the table as well as in the Excel sheet – the data in the table are automatically saved. You can copy and paste data from any source, like as MS Excel, Google Spreadsheets or Apple Numbers.

if you want to insert new line – just press Ctrl+Enter in Edit mode (F2 or double click by cell).

In the table, you can add:

  • Any text aligned horizontally (center, left, right and justify) and vertically (top, middle and bottom)
  • HTML – just press F2 or double click by cell (only <em><b><strong><a><big><small><img><h1><h2><h3><h4><span><sub><sup> tags are allowed)
  • Media – just select cell and press “Add media..” button, then choose or upload mediafile and insert into the cell

img2

Add html code into the table

To add a hyperlink or any other html code you need to edit the cell – just press F2 or double-click on it like in Excel. Then insert a hyperlink or any other html code into the table cell.

img7

You can add new rows and columns – just right-click on the row or column, next to which you must add a new one, and from the context menu Insert row (column) above (below). In a similar way, you can delete columns or rows.

img3

You can merge cells in multiple rows and columns – just select multiple cells, click the right-click and select the context menu item Merge cells. In a similar way, you can cancel the merge cells.

img4

You can select columns of the table for count totals automatically in your web site. The total values will be counted if the values in a cells of the chosen columns is numerical.

Under the Table Editor is editor of the table description – the description is displayed on a single table page and page with a list of tables (with tabs).

Right sidebar has few custom meta boxes:

  1. Table style – it is possible to choose the style of the table, he will be assigned a table when displaying it on the single table page or a list of tables with tabs.
  2. Table shortcode – it is possible to generate a shortcode for the table. You can choose any style for the table. Just insert the shortcode in any place of your post – and the table will be displayed there.

img5

3. Shortcode Builder

Use Shortcode Builder for creating the Tabs with any Tables in your web site. Just drag and drop the Tables, create the Shortcode and paste it to your Page or Post.

img6

4. Table styles

Now plugin has two types of tables:

  1. Simple table. In it there is a difference between the first and the last rows – the first line may be heading. All other cells (rows, columns) are displayed identically.
  2. Schedule Table. Its main difference – with all cell content than those in the first column are highlighted. If the first row displayed as a header – then the cell with the content will not be highlighted in it.

5. Customization

You can create your own styles for tables, but you can only use shortcodes for single table page or on a page with a list of tables, the table will be displayed with a predefined style. You can also replace one of the standard styles in the CSS, for example, the style “default” – then the table with this style will be displayed everywhere.

Styles are configured in the file “css/advanced-tables.css”

If you just want to change the color of the table in Material style – create a group of new styles with names:

  • .lptw-advanced-table .material-{your style name} th – table heading style
  • .lptw-advanced-table .material-{your style name} td – table cell style
  • .lptw-advanced-table .material-{your style name} td:hover – table cell style on the cell hover
  • .lptw-advanced-table .material-{your style name} tr:hover – table row style on the cell hover

And shortcode will be:

[lptw_table id="XXXX" style="material-{your style name}"]

Likewise, you can change the color and style for the table in Flat style – create a group of new styles with names:

  • .lptw-advanced-table .schedule-flat-{your style name} th – table heading style
  • .lptw-advanced-table .schedule-flat-{your style name} td – table cell style
  • .lptw-advanced-table .schedule-flat-{your style name} td.content – style of the table cell with content (except for the first row and the first column)
  • .lptw-advanced-table .schedule-flat-{your style name} td.content:hover – style of the table cell with content on the cell hover
  • .lptw-advanced-table .schedule-flat-{your style name} tr:hover – style of the table row with content on the cell hover.

And shortcode will be:

[lptw_table id="XXXX" style="schedule-flat-{your style name}"]

6. Credits

I’d like to thank everyone who had even a tiny contribution into creating this plugin! Things happen because you’re awesome, people!

First of all great thanks to all creators of Handsontable. If not for this magnificent script – I would not have done this plugin.

Many thanks to the jQuery library and the jQuery UI

Thanks to Christian Bach for tablesorter

Thanks to Jelle Kralt for jquery.responsiveTabs.js

Thanks to John Polacek for stacktable.js

Thinking that the documentation is missing something? Please let me know about it! I’ll have it added immediately to this section!