Easy Table is The Easiest Way to Create Table in WordPress

easy table wordpress plugins

Easy table wordpress plugins screenshot

Hello, this is the official post about my newest WordPress plugins, Easy Table. As it’s name, Easy Table is WordPress plugin to create table in post, page, or widget in easy way using CSV format. This can also display table from CSV file.

Easy Table is a WordPress plugin that allow you to insert table in easy way. Why it’s easy? Because you don’t need to write any complicated HTML syntax. Note that this plugin is not a graphical user interface table generator, so you can simply type your table data directly in your post while you writing. No need to switch to another window nor click any toolbar button.

Easy Table using standard CSV format to generate table data, it’s easiest way to build a table.

Some Features

  • Easy to use, no advanced skill required
  • Display table in post, page or even in widget
  • Read data from CSV file and display the data in table
  • Sortable table column (using tablesorter jQuery plugin)
  • Fancy table design (using Twitter CSS bootstrap)
  • WYSIWYG safe, I mean you can switch HTML/View tab in WordPress editor without breaking the table data.

Example:

1. Basic Example

[table]Year,Make,Model,Length
1997,Ford,E350,2.34
2000,Mercury,Cougar,2.38[/table]

Result:

Year Make Model Length
1997 Ford E350 2.34
2000 Mercury Cougar 2.38

 

2. More complicated table data:

[table]Year,Make,Model,Description,Price
1997,Ford,E350,"ac, abs, moon",3000.00
1999,Chevy,"Venture ""Extended Edition""","",4900.00
1999,Chevy,"Venture ""Extended Edition, Very Large""","",5000.00
1996,Jeep,Grand Cherokee,"MUST SELL! air, moon roof, loaded",4799.00[/table]

Result:

Year Make Model Description Price
1997 Ford E350 ac, abs, moon 3000.00
1999 Chevy Venture "Extended Edition" 4900.00
1999 Chevy Venture "Extended Edition, Very Large" 5000.00
1996 Jeep Grand Cherokee MUST SELL!
air, moon roof, loaded
4799.00

In the second example above, the cell data that has commas and quote should be wrapped with ” (double quote).

 

3. Table with no heading

[table th="0"]
row1col1,row1col2,row1col3
row2col1,row2col2,row2col3
row3col1,row3col2,row3col3
[/table]

Result:

row1col1 row1col2 row1col3
row2col1 row2col2 row2col3
row3col1 row3col2 row3col3

 

4. Table with caption, custom class and no tablesorter

[table caption="This is example table in WordPress" class="table table-bordered" tablesorter="0"]
row1col1,row1col2,row1col3
row2col1,row2col2,row2col3
row3col1,row3col2,row3col3
[/table]

Result:

This is example table in WordPress
heading1 heading2 heading3
row1col1 row1col2 row1col3
row2col1 row2col2 row2col3
row3col1 row3col2 row3col3

 

5. Table with auto index, start from number 1 (since 0.9)

[table ai="1"]
 head1,head2,head3
row1col1,row1col2,row1col3
row2col1,row2col2,row2col3
row3col1,row3col2,row3col3
row4col1,row4col2,row4col3 
[/table]

Result:

No.head1 head2 head3
1row1col1 row1col2 row1col3
2row2col1 row2col2 row2col3
3row3col1 row3col2 row3col3
4row4col1 row4col2 row4col3

 

6. Table with new line in a cell (since 0.9)
Any nl value would be replaced with new line while rendered. nl could be one character or more. Be wise to use character here, make sure it’s not very common character that may used in your data.

[table nl="~~"]
head1,head2,head3
row1col1,row1col2,this~~should~~be~~in~~one cell
row2col1,row2col2,this~~
also~~
should~~
be~~
in~~
one~~
cell
row3col1,row3col2,row3col3
row4col1,row4col2,row4col3
[/table]

Result:

head1 head2 head3
row1col1 row1col2 this
should
be
in
one cell
row2col1 row2col2 this
also
should
be
in
one
cell
row3col1 row3col2 row3col3
row4col1 row4col2 row4col3

7. Table from file

[table file="http://img.takien.com/2012/05/test.csv"][/table]

Result:

a b c
d e f
g h i

Download latest version


Download from WordPress.org or directly from your wp-admin, search “Easy Table” in the plugin installer.

Note:

  • If you creating custom theme, please make backup to another directory or local before update plugins
  • After installing you have to go to Settings->Options and click Save once to load the default settings.
  • Backward compatibility of function str_getcsv is not work. So if your PHP version is lower than 5.3.0, the table will only show first row. Fixed in version 0.2, please update if you have installed the previous version.

Video Tutorial

Still confusing how to install and create first table? Check out this video tutorial.

 

  • Steve Karam

    I have a suggestion for EasyTable: allow us to specify post IDs in the settings to only use easytable on those posts. Right now the javascript and css show on every post I’ve made though I only use it on one.

    • takien

      Great idea, thanks.

  • Wandile

    Hi guys how do i create a static header and load a csv file? i need this because i want to sort the column by defult. im busy with this so i might get it by the time you guy answer, thanks in advance

    • takien

      Please more detail with your question.

  • Amana

    I used double quotes around phrases that contain a comma, but the double quote shows up on the actual table and words are displayed in different columns. Tried double, double quotes and the same thing happens. Any advice??

    • takien

      Double quote must exactly wrap the cell, ensure that there’s no space or other character outside the double quote.

      • Amanda

        No, there isn’t. Still not working.

        Also, how do I change the hover colour of the row? (i.e. the background colour when the mouse is hovered over a particular row)

        • takien

          Another alternative is to preceding comma with backslash immediaely before comma.

          one, two, three, four

          These comma wont be parsed as columns

  • Perry

    Hi guys,

    I want to add two colors to my tables, Green for “Win” and Red for “Loss” but after months of trying, I really can’t figure it out. Any help?

    [table caption="Romario Manoel da Silva (23-10-1)" class="table table-bordered" tablesorter="0"]

    Result,Opponent,Method,Round – Time,Event

    Win,Erimilson da Silva Cavalcante,Submission (Guillotine Choke),2 – 2:06,OX MMA – OX MMA

    Win,Fabian Gustavo Armoa,Submission (Guillotine Choke),1 – 1:39,Elity – MMA 10

    Loss,Jay Hieron,Technical Submission (Brabo Choke),2 – 2:04,LFC 12 – Legacy Fighting Championship 12

    Win,Jaime Jara,Unanimous Decision,3 – 5:00,Shark Fights 19[/table]

    • takien

      Use cell attribute on each cell you want to customize.


      [table caption="Romario Manoel da Silva (23-10-1)" class="table table-bordered" tablesorter="0"]
      Result,Opponent,Method,Round - Time,Event
      Win[attr style="color:green"],Erimilson da Silva Cavalcante,Submission (Guillotine Choke),2 - 2:06,OX MMA - OX MMA
      Win[attr style="color:green"],Fabian Gustavo Armoa,Submission (Guillotine Choke),1 - 1:39,Elity - MMA 10
      Loss[attr style="color:red"],Jay Hieron,Technical Submission (Brabo Choke),2 - 2:04,LFC 12 - Legacy Fighting Championship 12
      Win[attr style="color:green"],Jaime Jara,Unanimous Decision,3 - 5:00,Shark Fights 19[/table]

  • beeny

    I posted this question several days ago, I have not had a reply…..can anyone help? takien?

    I would like to change the font within each column. i.e font style & colour. Can you advise how this would be possible. If CSS please can you supply a sample code to enable me to understand this in future?

    Many thanks

    • takien

      Hello, sorry for that.
      To change style you have to write CSS in your current theme ( Under Appareance => Editor)
      all table has class .easy-table,

      example, to change font and font size

      table.easy-table tr td {
      font-family:Arial;
      font-size:20px;
      color:red

      }

      • beeny

        Hi, thanks for that.

        What about individual Columns rather than the whole table. I would like Column 2 to be a different font and column 3 and 4 to be different again?

        • takien

          You can use nth-child CSS selector

          Example:

          1. This will only applied to first column


          table.easy-table tr td:nth-child(1) {
          font-family:Arial;
          font-size:20px;
          color:brown
          }

          2. And this will only applied to second column


          table.easy-table tr td:nth-child(2) {
          font-family:Arial;
          font-size:20px;
          color:red
          }

          3. And this for both column 3 and 4


          table.easy-table tr td:nth-child(3),
          table.easy-table tr td:nth-child(4) {
          font-family:Arial;
          font-size:20px;
          color:blue
          }

  • Mario

    Hello and thank for this marvelous plug-in !

    There is a strange behavior when I use an accented character like “é”, the name with it, is placed at the bottom in the sorted column, i.e. bédouin, bleu, briller, in the sorted column I have: bleu, briller, bédouin), but if a remove the accented it’s correctly sorted, bédouin, bleu, briller.

    Any idea ?

    Thank you.

  • Yralian

    Is it possible to use decimals? 21,220,200 the plugin recongnise the number with spaces instead commas

    • takien

      Wrap the decimals with double quote “21,220,200″

  • Gary

    Hey Russel, How did you get the form headers to have a grey colour?

    Thanks,

    Gary

    • Russell Cook

      They just turned up automatically, with no custom settings.

  • Craig Spence

    When I activate Easy Table the icon that allows me to use it doesn’t show up in my toolbar or side menu. Is there a setting somewhere that I’m missing?

  • frank

    I trying to get the table display as striped in a widget .. but it is not working .. for some reason the same code works in the preview page. Also how can I get the header to stand out ? Thanks

    • takien

      Go to Easy Table option page (Settings -> Easy Table)
      Look for checklist to enable Easy Table in Widget.

  • takien

    It appears on Firefox too,
    I think its not caused by Easy Table plugin, please remove characters around the table cell (including whitespace).
    Do you copy/paste text from PDF?

  • perezjavier72

    Hey bro, I don’t found the check for activate Easy Table in one widget :( . Is perfect when I put the code in a simple page, but I want to put the same code in Widget, don’t show. I hope that you can to help me. Greetings from Venezuela.

    • takien

      this one

  • safet

    How can I wrap text in post around table

    I want it like this:

    texttexttexttexttexttext
    table table texttexttexttext
    table table texttexttexttext
    texttexttexttexttexttexttexttext

    • takien

      try this

      [table style="width:300px;float:left;"]
      [/table]

  • Tony

    Hi Takien, Just a quick question I can not see a solution to. Is it possible to add a paragraph break in a cell? I have tried ~~~~ but this changes the style of the text after it. Any pointer appreciated. Tony

    • takien

      Use custom terminator for newline, then use linebreak as usual

      [table terminator="|"]
      one
      one1
      one2
      one3,
      two
      two1
      two2
      two3 |
      three
      three1
      three2
      three3,
      four
      four1
      four2
      four3

      [/table]

      • Tony

        Great, many thanks – excellent plugin btw :)

  • pidd_i

    Hi! I’ve noticed that characters ÆØÅ are not shown if they are first character in a cell content.
    Example:
    [table width="600" colwidth="150|150|150|150" colalign="left|left|left|left"]
    Åse, Olsen , Assitant Managing Director ,Oslo
    [/table]

    • takien

      Try to wrap those characters with double-quote.


      [table width="600" colwidth="150|150|150|150" colalign="left|left|left|left"]
      "Åse", Olsen , Assitant Managing Director ,Oslo
      [/table]

      • pidd_i

        Thanks! Worked as a charm.
        Is there anyway to make the tables responsive? Do you have any tips for css I could add so that the tables do not keep the full width on mobile devices?

  • http://www.psvitaturkiye.com/ Skaty

    i’m looking for a table like 1 weeks now, this one is closes to what i want BUT there one thing that i want to do. It is no add click box in every string in list and after that member can click these and send them to me. In short version user can chose from list and create a then send them to me via email. Is it possible and how ? Can you make pro version with these featues ?

    • takien

      What box? and how do user send you an email?

      • http://www.psvitaturkiye.com/ Skaty

        User will click the list’s content and will send them to me, like a shopping list.

        For example:

        http://i.imgur.com/c0PsF4p.jpg

  • Servia

    Hi
    I tried and used easy table. very very good.
    I’d like to add a link per line. when onmousehover each line, a click would bring me to a each different page par ligne. (a link that i could store on each line via lin= or something like that)
    how to do this ?
    I tried to add a href link for the entire line (3 cells) but only the first cell is the link.
    best regards

  • Guest

    Looks great, but is it possible to sort the tables using WordPress 3.7.1?

  • lmcookie

    Can’t get load from csv to work.

    I’m using basic 2 column, 1 row + header csv as a test. URL i’m using loads in browser. PHP version is 5.3.x, file name is ‘test1.csv’, no funny chars in csv itself, allow csv from file is checked in settings. Stumped on where else to look to get this thing working! Any tips appreciated. I am a new wp user although not new to this type of stuff.

    Many thanks in advance

  • David Ferrington

    I have TH set to ON by default, but I have one table where I don’t want the first row to be a header – but I can’t figure out the code to stop it

    Sorry, missed it in Docs, found it now – th=”0″

  • rizzo

    Any documentation on using this in a theme template

  • Robyn

    Thanks for awesome plugin – my table looks great. I’d really love to be able to highlight some individual rows with a new background colour or even just a different colour or strength for the text. Can you please offer some code additions for me?

  • http://www.linkedin.com/in/marcnashaat Marc Nashaat

    Is it possible to add a search function to a table?

  • UniversityPhysicsTutorials

    Hi can someone help please; The column widths are all over the place. I’d like to specify the width of each column and wrap the text accordingly. Can anybody help? Thanks in advance

  • Laura

    Is there a way to code an item in a column to be a hyperlink to another site?

    • Servia

      I asked about this some days ago.
      I also need this feature. Hope takien will be back soon

  • MAGRR

    I can’t figure out how to insert a table into a page!

  • Tim M

    How do I install the table sorter jquery option?

  • Tim

    I have two questions,
    1. Is there a way to make certain cells linkable?
    2. Is there a way to make the whole table “searchable” for certain columns?

  • ben

    is it possible to auto populate the first coloumn with auto number, incrementing by one?

    • ben

      figured how to do this. But now i wanna know if its possible to keep that coloumn dynamic?

      I’ve tried making the sort attribute equal to false, however when i add a different sort attr to another coloumn then the auto colomn changes as well.

      I’m creating a football league table.

      I just want the first (auto increment) colomn to be static, not changing at all, regardless of other data within the table. It should remain the way it is at all times, is there a way to do this please?

  • kash2k6

    hello is it possibe to make table a fixed lenght?

  • Guest

    The example with csv?

  • bobbyau

    Hi there. I’m trying exclude the first column (which is the no.1,2,3.. etc) from sorting – I just cant seem work that out. One more issue – i need the sorting to be done around the the numbers (1.97,3.27..etc) from the Overall score column and everything else follow (except first column 1,2,3 etc)

    Hope that makes sense :) Thankyou.

    [table caption="Test" colalign="center|center|center|center|center|center|" ai="1" ]

    Place[attr rowspan="1"],Espresso[attr colspan="1"], Latte[attr colspan="1"], Overall Score[attr colspan="2" sort="desc"]

    Cup1, 1.70, 2.25, 1.97,Poor

    Cup2 ,2.00, 4.55,3.27, Good

    Cup3, 3.10, 3.53, 3.31, Good

    Cup4, 2.20, 1.00, 1.60,Poor

    [/table]

    • bobbyau

      No worries, all sorted. I managed to get a work-around.

  • Tim

    Hi there, thanks for the easy to use plugin! Is it possible to configure a cell (or row) within a table to display as a heading? i.e. so we can have multiple headings? OR is it possible to apply a class to a TR?

  • Abed

    No multi Language support?

  • Victoria

    I’m having a problem hyperlinking a phrase that has a comma. Does anyone know how to do this? I’ve tried multiple combinations of quotes/double quotes in different places to no avail.

    • takien

      escape comma in link with

      a,b

      • Victoria

        Thank you for the quick reply! That worked.

  • Carl

    I inserted a table into the site I’m building. When you mouseover the lines it highlights them in white. When this happens you cannot see the text because its a dark backround with white text can that be shut off? over the highlight color changed??

  • Halo Bing

    Hi how i can put table to table?

    http://i.imgur.com/rEGWVyf.png

  • Bob

    Is it possible to create a table that automatically sorts alphabetically? For example, a table of helpful links on a page that is added to periodically with the result being an alphabetically sorted table by the contents of the first column. Thanks ……

  • Charles

    Hello, I am trying to create a table with Chinese characters, but the Chinese does not show up correctly. What can I do? Thanks

  • designwc

    It is possible to responsive create without media queries ?

  • Michael

    Why can’t cell entries be in another language (Arabic)?

  • Viviane

    Hi i would like to change the size fonts, is it possible?

  • Viviane

    Hi, how can i change the font size of the title and subtitle?

  • Proinsias

    Hi, I just applied the cuscoosy theme and my content is now not aligned to the top of each cell. There is a space on some cells. How do I fix this, see example http://fransphotobooth.com/guests-pay-as-they-go/

  • Karen

    Hi I’m a teacher and use tables as illustrations to convey a topic, and since what I’m teaching goes beyond one word, I need to punctuate the sentences within the tables with commas. I see instructions in the documentation on how to do so for a series in a certain column in a table (i.e., apples, bananas, and oranges), but I’m looking to punctuate introductory sentences like this one for example within a table: Once their need for deliverance is exposed, it will deflect attention away from them. I have tried placing the comma itself in single and double quotes as the documentation suggests, but neither of those add the comma. Can anyone help me with this? Thanks.

    • Mike

      Try to put the whole sentence in quotes like this: “Once their need for deliverance is exposed, it will deflect attention away from them.”

  • takien

    don’t use full link on the comment,
    that will automatically held by disqus to prevent spam.

  • takien

    Hi John,
    Easy Table currently having bug with character encoding.
    For best result, the source data must be UTF-8 encoded.
    Other than that may shows unexpected character output.

    Try to copy the file and resave on your pc and see the result.

    Be patient while I’m trying to fix it. Once it fixed, the patch or update will be released.

    Update:
    If you’re using FTP client to transfer text file, make sure you use Binary and NOT Auto or ASCII on the transfer type.

  • John

    Can you give me your mail address ?

  • takien

    please use contact form on this blog.
    takien.com/contact

  • John

    @takien:disqus, I sent a message from contact form. Can you see my previous message? Under this message, there is a message about my problem which sent 2 days ago. Can you see links on this message?