Article

Easy Table is The Easiest Way to Create Table in WordPress

Oleh takien• 70 Komentar Arsip
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.


(video by: webdesy.com)

Tulisan ini sudah berumur: 14 tahun 3 bulan 17 hari. Informasi di dalamnya mungkin sudah tidak relevan, tapi nilai historisnya sangat berharga, terutama bagi saya sebagai penulisnya.

Tag Terkait:

Komentar (70)

Arsip Statis
Eric Scott
Hi, Can I please get a hand with centering the table on a page? Also, how do enlarge the font size of the column headers?
Rene
I want to create a field with a list – how i can build in one field a new line? i tried something like this “test1, test2 n test, test3″?
Tara
Is it possible to have a “click here” or “link to” in the cells of the table? Thanks for the help!
Mauricio
Any idea why is this happening? I’ve built two other tables with no problems, but I can’t find what’s wrong here. http://img707.imageshack.us/img707/9278/7dz.gif
takien
You forgot to put comma after `pcas/min` in the second row
Mauricio
wow. I was so focused on the first line that I didn’t noticed that. thanks!
Eco_Evolver
Hi there, I’ve attempted to align the table with the following: [table width="300" align="center"] but the table does not center align. How do you align the entire table please. thank you for your time.
takien
Hi, There’s a bug on aligning table. you can temporary use this solution Add this to your style.css of your theme ``` table.easy-table.center { margin-left:auto; margin-right:auto; } ``` Now, whenever you want to centering table, just add .center class to the table ``` [table class="center" width="200"] etc,etc, [/table] ```
Billy
This works in IE and Firefox, however, it is not working in chrome,
Ruud
Hi, got this message : [table "0" not found /] with this [table delimiter="t" file="http://xxxxxxxx/wp-content/plugins/csv-to-base/test2.csv"][/table] where other plugins are getting the file. Tried with of without double quotes, with or without delimiter, tried a comma delimited file and a tab delimited file.Tried even to open without http and domainname, starting at /wp-content. Any idea?
Ruud
found: table » tabel and it works fine
emlang
could you explain your fix in greater detail? I’m not getting any error message, but my [table file="http://xxxxxxxxxx/tester.csv"][/table] just doesn’t display anything on the WordPress page in which it’s placed.
Ruud
Hi emlang, my problem was – as described earlier by the author – another plugin using the same shortcut. Changing this shortcut-name from table to tabel made the solution. Give it a try
ericvic
Hello, I’m a complete beginner. I installed Easy Table. Now what? Where are the instructions on how to insert a table into a page?
shane
It’s all shortcode. You go to your page in WordPress in the visual editor. Then you put code like this straight into the body: [table caption="Ericvic's Sample Table" class="table table-bordered" tablesorter="0"] ericvic,likes,tables and,these,words are,all,in completely,separate,cells, [/table] Now view your page through a browser. You now have a table.
w
I’m very new to wordpress and .css and most .html, and I promise I’ve spent a couple hours on this already, *but* I still can’t figure out how to get my table to center on the page. To which theme do I add the style.css–the overall site theme, or the theme inside your plugin? And where exactly do I add the other code in order to center the specific table? I’ve tried every combination I can think of. Thanks for humoring a newbie
Nico
Hello, Is it possible to make the plugin visible for authors and editors. Currently the plugin is only accesible for admins, would be great if these users could also reach the option page
takien
Easy Table option is intended to initial setting, which is not changed frequently. Imagine editors change the shortcode tag, and you will lose everything. So you don’t need to authorize editors to edit Easy Table option because the table setting can be managed per table basis, using inline parameter. It means that people who has capability to write/edit posts, they can write table and do some setting on their table using inline parameter.
Nico
Yeah I understand that but the biggest problem is that there no other “Test area” available where editors or authors can test there code?
LiewCF
Do you have examples of using colspan & rowspan in Easy Table? Thank you.
takien
You can see example here: http://takien.com/plugins/easy-table or here: http://wordpress.org/extend/plugins/easy-table/
LiewCF
How do we use Easy Table to create multiple header rows (using rowspan and colspan)? Example: http://jsfiddle.net/yqQsP/ and http://www.w3.org/TR/html401/struct/tables.html#h-11.4.1 (see complex example) Thanks.
takien
Easy Table currently not supports multiple row header, use regular row as header instead.
tracy
hello..i want to add a 2 column table to one of my pages. i have activated the plug in so now what do i do?
takien
Just write/type table shortcode in your post/page. See example above.
Reno Website Design
I don’t want a ‘head1,head2,head3′ so I removed that code. But now the 1st row is BOLD. How can I make is so it is not bold. Thanks.
Reno Website Design
Disregard. I found it. th=”0″
takien
no problem
Jamie C
Hi I had a real quick question on the table, I have the default style selected and was wondering if there was any way to take the white hover state off the the table. I am using a darker theme and the table when scrolled over washes out the text making it hard to read for users. I have looked in the editor for the specific setting but haven’t found it and thought I would ask you to point me in the right direction. Thank you
Reno Website Design
Yes, I would like to know the answer to this also. Can’t figure out the CSS.
Bryan
Thanks for a great plug-in! I am using the following [table] entry: [table caption="My Caption" tablesorter="1" sort="asc,asc"] … [/table] but I have found zero documentation on the tablesorter option, and very little on the sort option. Some questions: 1) What effect is the tablesorter=”1″ supposed to have? To use the jQuery Tablesorter to cause the sort to happen? 2) Do you assume that the jQuery Tablesorter is activated? That is, that there is already an appropriate tag such as: ? (In other words, you don’t install Tablesorter with your plugin, correct?) 3) If Tablesorter is not present, what effect does the sort option have, and if it is still functional, how do you cause the sort to happen? 4) I would like to make the elements of my table be clickable so that Tablesorter can do its thing and sort by various columns. Do I have to implement that myself, using Tablesorter? (I’ve done it before, in a different, non-WordPress environment, but don’t want to produce a conflict with whatever you to in this plug-in.) 5) Could you please add a little documentation on the tablesorter and sort options, so we can figure out how to use them with your plugin? Thanks for your patience and help
Bryan
I hope my questions were not: 1) interpreted as negative (definitely not the intention) 2) too numerous/complex for convenient responses How can I encourage a response to these questions? Thanks!
Steve Karam
Tablesorter is installed with the plugin, you have to activate it in the Plugin options page. Then when you use tablesorter=”1″ it will automatically work.
Bryan
Thanks, Steve! Very helpful, and indeed it worked! To: takien (creator of Easy Table): Could you add just a little more along these lines to the plug-in documentation about tablesorter? Steve’s information was just what I needed, but it would have been unnecessary for me to ask if the information was in the documentation for the plug-in. Others would probably benefit, too. Thanks!
Hans Hafner
A great plug-in!! One question though: how do I create a hyperlink within a cell?
Mari
Love this plugin! I was wondering if it was possible to make the text wrap around the table, though?
Bryan
I’m not the developer of this plugin, but just trying to be helpful… I suggest placing the [table]…[/table] inside a <div>, and use CSS to style that div appropriately (for example, using float:left;). You’ll most likely also have to set the width attribute to something less than 100%.
Mari
That worked perfectly, thank you!
AlingDarma
One of the easiest table plugin that i have ever used before….btw all of these comment make me confuse but great job :-bd
Peter Smith
How do I get a euro symbol € to work in the table? I can’t see it and the delimiter dosen’t work.
Camille
I don’t understand how to do this– there’s no button in the visual editor toolbar, so where do I even begin on creating/inserting a table? Do I have to type some sort of coding? Sorry for asking such a basic question.
techguy
I’ve been trying to remove lines from the tables and I added your code to my themes style.css file but it still shows the grey lines. Anyone got any solutions?
Calvin
How do I make my data centered in the columns of a table instead of left justified?
Wendy
I like this plugin very much. I would like to adjust the columns padding from heading text, example below: Heading Text Row1col1 Row2col1 Row3col1 Change to: Heading Text Row1col1 Row2col1 Row3col1 May I know how to do so ? Thanks.
maxim
Thank you for the plugin. But I have an issue. Whet put a row into another widget it forgets how many rows it has and put everything in one line. Any other sugestions how can I end the row?
Billy
Working great, between the built in help, and the people here, I have been able to find every thing I need with the exception of my row heights. For some reason, they are higher than what they should be. You can see what I am talking about here http://www.sharptown.net/?page_id=225 , it really doesnt look bad, just makes me curious why it isn’t shrinking to the data. Thanks again for a great and usefull plugin.
Mike Munter
It does not sort properly for values above 1,000. Had the same problem with “Ultimate Tables” plug-in. Is there a fix for this?
Daria F.
Absolutely brilliant plug-in! Thank you very much. One question: I’m attempting to make every row in the table a link. I’ve been able to add alternating colour values and hover effects in CSS, but when I add a , only the value in the first column turns into a link. Is there anyway to turn the entire row into a clickable link? The page in question: http://goatseyeview.co.uk/contact/ I’ve applied a to the top row in the first table.
CRN
Can you update the flexslider.css file in the Trusted theme
Adrian Toma
i cant make a sortable table with the current plugin version
emlang
I’m currently unable to use the Easy Table shortcode to call a csv file from one I posted to WordPress’s media page. I’ve also tried this with a dropbox account. I’m calling them with the URL that is listed as their location on my website. Any idea on how to get it to work?
izumitelj
there is a bug with cell data starting with certain unicode characters (in my case eastern european ČčĆ抚ĐđŽž). all first letters get trimmed. [table] Čaaaa, Šiiii, Đeeee, Ćiiii 1,2,3,4 [/table] will render like “aaaa, iiii, eeee, iiii”. please fix this
izumitelj
it works fine if the strings is enclosed in double quotes.
arbakul
It sitll doesn’t work, as it should. Can’t put latin letter in first place. Please fix it.
Stephen Davies
How can I include a comma in the text of a row?
Madis
Change “Delimiter” value (default comma) in options to something else, for example semicolon, and use that for separation.
Stephen Davies
Thank you very much. Seems obvious now. Love the plug-in.
jr
anyway easy table can cache the remote csv until its updated?
tomatow
Hi, I don’t have table sroting in default tables. Please help…
tomatow
False alarm. Sorry!
Susan
I have read the documentation and I still don’t have a clue as to how to create a table. Am I supposed to paste the code from the samples into the stylesheet?
James
Is there a way to change the background color, color of the text in the table
Khaled AlShami
How to preview CSV file, that include different encoding, like Arabic (Windows).
Jeffrey
CSV loads but it doesn’t display properly. It mashes everything into one row, how to you tell it to break after the 3rd column?
Peter
I can’t get to to work. have loaded files and saved settings then tried first example of U.S. pick-up trucks. I pasted the code beginning [table] in the text field…No table displays on my post – only the text of the example in non-table format. . Help.
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?