Table Maker wordpress plugin for responsive comparison tables TechzAround

Table Maker wordpress plugin for responsive comparison tables TechzAround
Like Tweet Pin it Share Share Email

on November 18, 2015

Meet our new plugin Table Maker. You can use it for creating simple, beautiful responsive tables for anything – specification comparisons, list of top offers, etc.

You can control and fill everything that you want to each cell. You can add content row by row and column by column. This means that plugin is good for creating top lists and for comparison table charts with specification.

Plugin has many unique features. For example, you can place subheaders in tables. You can mark first row as column for specification labels. You can make each table responsive or scrolable on mobiles.

Some Unique Features:

  • Responsive option (stacks)
  • Predefined icons
  • Rows or cols lines
  • Option to mark first column for specification labels
  • Option to add labels and featured row and cols
  • Works with shortcodes
  • Option to add subheaders
  • Option to choose color of header
  • Great and simple design
  • Option to upload and use images
  • Optional center aligning

Here, you can find some examples

List style with responsive stack view on mobiles:

Row style with scroll on mobiles

How plugin works

Check video how plugin works

Tips and tricks

After several questions from users, I found that requests usually are very similar, so, I write some css tips which allows customize table. You should add these tips to custom css area of your theme. If you don’t have such area, try to search plugin Custom Css.

How to disable hover styles

How to disable min width of cell

By default, each cell has minimal width to prevent collapsing of cells when there is no content, but sometimes this can be a problem. For example, if you want to have small width cells.

How to make custom width of first column

By default, table fits whole width of container and divide all columns to equal width. Sometimes you need to have width of first (or another) column with definite width.

If you need width for another column

How to style special cell or row

You can use similar code to style row or column. This is example of styling all cells of second row

This is code for styling second column

How to reduce font size

By default table will have font size the same as your content in theme. You can reduce it

How to change fonts in table

In this code I added font family Arial with 13px size and 18px line height.

How to add customizations for special page

WordPress adds special class to all post or page and you can use it to style table on specific page. Use code as above, but add additional class.

For posts, class will be postid-163, for pages pageid-163, where 163 is ID of page or post.

Example

How to change green border of selected row

Change #77B21D to your own color

How to change green border of selected column

 

Add responsive comparison table to wordpress

3.4 (67.59%)
29 votes

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *