Introducing Tablecloth

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

Tablecloth is lightweight, easy to use, unobtrusive way to add style and behavior to your html table elements. By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love :)

It features:

Adding even/odd class names to alternative rows.
Adding over and out class names for mouse over and mouse out states.
If set to true Tablecloth will highlight rows or columns (or both).
If set to true Tablecloth adds selected state on click. Based on preferences it then selects rows or columns (or both). Unselect elements by clicking anywhere on the page.
It leaves room for your upgrade. It has easily editable function that is called when you click on table cell that you can use for your own code.

Visit Tablecloth

Any comments you might have about Tablecloth you can post here.

About the author:

cssglobe's image Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of Easy front-end framework.
To get in touch, visit Alen's personal page, follow Alen on Twitter or become a Facebook friend.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

Comments

EmanuelBlagonic on 8 Oct, 2007 wrote:

From what I've seen Tablecloth looks really nice both in FF and IE. I wondered how could you select, let's say 2 or more rows at once (something like CTRL + click) - it would be a nice feature?
I will try it on my future designs.
Nice job Alen, once again :)
cssglobe on 8 Oct, 2007 wrote:

well this is only v1.0 :) I could go on and create more features. You got a good one there, Emanuel. Consider your suggestion accepted for version 1.5 or 2.0 (whichever comes next)
pagerss reader on 8 Oct, 2007 wrote:

Very clearly design but a little strong and busy script.
Same view in both browsers. I can suggest you to add some options on this good lock table
like sort in some order from header row. I can also search a script for this but you can do it better from me. I see a ready script for emulate ms excel.
Regards and good job
Good luck with version 2
cssglobe on 9 Oct, 2007 wrote:

hm.. sorting... another good suggestion. Will be included in v2.0 :)
Paul on 9 Oct, 2007 wrote:

This is great stuff. Another feature request, though. Is it possible to have a scrollable table (vertical/horizontal) with fixed headers?
Jason on 9 Oct, 2007 wrote:

Shift and Ctrl click would be perfect
cssglobe on 9 Oct, 2007 wrote:

@Paul: That is something I've being meaning to do for a long time, gave a couple of tries and failed. Will try it one more for v2.0
MindStalker on 9 Oct, 2007 wrote:

Select on click doesn't work if you turn off highlight of rows and column. Meaning you would expect it to select the single cell element. It doesn't.
cssglobe on 9 Oct, 2007 wrote:

@MindStalker: good point there. Will add that...
Mickele on 9 Oct, 2007 wrote:

Nice script, just one thing I think need be changed, use an addEvent function to add the onload event, the script will not work if someone put another onload atribute on body tag

ps: sorry for my english
james on 9 Oct, 2007 wrote:

The files do not seem to have any license information, just copyright, so the copying/modification/inclusion in for-pay products is unclear.
Stupid Developers on 9 Oct, 2007 wrote:

To the comments and suggestions, why don't you try to being innovated and build something your self. stupid developers
mike on 9 Oct, 2007 wrote:

I like this script. I use a lot of xsl to display tabular data and always comeback to writing something like this. I would, however, make it possible to "bless" certain tables and have it not run the script on every table on the page. This is a problem when there are large amounts of table data, either large tables or lots of small tables. Having something that would extend the table object that was passed in would be exactly what I'm looking for. Configurable options passed into this "constructor" would also be helpful. Other than that it looks like a really cool work and I am impressed.

Mike
james on 9 Oct, 2007 wrote:

Great script... I do have a couple of problems, however, that keep me from using it: first, it doesn't handle row-spans and column-spans nicely (it gets confused), and second, there doesn't seem to be an easy way to disable it for some tables. If you could create a version that was just classed out, so that for example I could setit would apply the style, it would be great. Seriously, though, great script.
Raul Riera on 9 Oct, 2007 wrote:

I am having problems setting this up with tables with "colspan" is this a problem?
Sol Irvine on 9 Oct, 2007 wrote:

This is great, but I'd like to use it on some pages that still use tables for certain layout (e.g., 1 row, 2 column tables to align form elements).

I tried to tweak the code to apply tablecloth only to a class, rather than all table tags, but I haven't been able to get it working. Is it possible?

Thanks!
James McDugal on 9 Oct, 2007 wrote:

Its fun to watch people say how much they like a free script, but then say "but it would be better if ...". Give props and say thanks rather than asking for more. Use it as-is or make your own, right? Great script BTW.
cssglobe on 9 Oct, 2007 wrote:

Before v2.0 I will release v1.5 I will try to get some free time and include rowspan, colspan support and optional class name targeting. Thanks for comments and suggestions and stay tuned for more Tablecloth! :)
Forrest Vodden on 9 Oct, 2007 wrote:

Great script! Really clean and well written. I was looking through your code and noticed that you're simply replace window.onload with your function. This might cause problems for some people who after other scripts on their page that all must start on the page load.

Otherwise, great work!
cssglobe on 9 Oct, 2007 wrote:

@Forrest Vodden: Yes, it's just a habit I have. Actually I usually replace window.onload with custom init function and put everything there, so this is the result of my habit. I will have to use a better solution for next versions.
shane plasebo on 10 Oct, 2007 wrote:

I've a big problem while using your Script. I've some tables that I use for my layout. And when I installed your script, my whole layout got crapped.

Then I change in the HTML the id of the div container...
mike on 10 Oct, 2007 wrote:

to be able to apply the script to one specific table on a page tht contains many table just add the table into a div container and apply a specific id to it then over write the css of the script with the div id u just named... and enjoy
daniel on 10 Oct, 2007 wrote:

This is awesome!! Any chance of making this a wordpress plugin?

Great work!
cssglobe on 10 Oct, 2007 wrote:

@daniel: not a bad idea. I will however make v1.5 with new features people suggested and then make a plugin.
cssglobe on 10 Oct, 2007 wrote:

To all of you: Thanks so much for your comments. Your opinions, good or bad, are very helpful.
Darren Hoyt on 10 Oct, 2007 wrote:

Just wanted to say great work on this.
Re: sorting, could you implement some of <a href="http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited">the AJAX-y concepts found here</a>?
myheaditches on 10 Oct, 2007 wrote:

I was wondering if it would be possible to limit the script so that it only modifies tables of a certain class.If i use this script, it will ruin my login/registration table.
pagerss reader on 11 Oct, 2007 wrote:

We will waiting next version. I have some more suggestions for this script.
1. Standard mathematical formulas for some mark cell more then 2 if value is int :)
2. Mark more than one cell like select several cells in different row and column.
3. third suggestions to make simple script :)

Good luck cssglobe
Marcelo on 11 Oct, 2007 wrote:

Hi, Love this script ,but i dont want to use it in all the tables, i realy want to use some id or class to call it. Maybe in the next version :D
myheaditches on 11 Oct, 2007 wrote:

Okay, I made myself a version that can be set to limit itself to one class. You can see my copy with the changes here:
http://upsidedownturtle.com/tablecloth/tablecloth.js

Line 23 has the definable class, and there is now an if statement on line 42.
Tommy on 12 Oct, 2007 wrote:

Great script! Only problem I have right now is the missing colspan support. Looking forward to the next version(s)! Keep up your great work!
rosenthal on 12 Oct, 2007 wrote:

great script, thank you
Apple on 13 Oct, 2007 wrote:

Although I am not a JavaScript fan, this table is really great. Thank you very much, I am sure I am going to use it.
saunameister on 14 Oct, 2007 wrote:

very great script !
thanks for work
D on 16 Oct, 2007 wrote:

why is it that when I use the tablecloth script off my computer I recieve an ActiveX warning from IE6? but if I view the tablecloth example page ( http://cssglobe.com/lab/tablecloth/ ) I don't recieve any warning?

I'd like to use the script, except for the ActiveX problem.
Brad on 17 Oct, 2007 wrote:

Having trouble getting this working from a perl generated table. Seeing the following errors:

[Wed Oct 17 08:21:30 2007] [error] [client 151.193.220.29] (8)Exec format error: exec of '/var/www/cgi-bin/tablecloth/tablecloth.css' failed, referer: http://xxxxxxxxx/cgi-bin/prod_env.cgi
[Wed Oct 17 08:21:30 2007] [error] [client 151.193.220.29] Premature end of script headers: tablecloth.css, referer: http://xxxxxxxxxx/cgi-bin/prod_env.cgi
[Wed Oct 17 08:21:30 2007] [error] [client 151.193.220.29] (8)Exec format error: exec of '/var/www/cgi-bin/tablecloth/tablecloth.js' failed, referer: http://xxxxxxx/prod_env.cgi
[Wed Oct 17 08:21:30 2007] [error] [client 151.193.220.29] Premature end of script headers: tablecloth.js, referer: http://xxxxxx/cgi-bin/prod_env.cgi

Any ideas?
Paul Irish on 19 Oct, 2007 wrote:

I'm looking for colspan support too..
Looking forward to the update. :)
great script.
Nathan L on 21 Oct, 2007 wrote:

Looks great! Can't wait to try it out.
Leo on 22 Oct, 2007 wrote:

Hi! Alen! Nice script, thanks for that. The colspan and rowspan support could be very nice!

Thanks again
Leo
paul irish on 22 Oct, 2007 wrote:

This should make colspan and rowspan support easy.
Take a look at getActualCellIndex() from
http://www.javascripttoolbox.com/lib/table/source.php
Paul M on 23 Oct, 2007 wrote:

Great script, pardon me for what may be a dumb question, I use xajax to load a table into a div and since tablecloth has already been initialized it does not work with these tables, is there a way to reinitialize the script to work with tables loaded dynamically?
angel rodriguez leon on 24 Oct, 2007 wrote:

hey great job , id like ur table, therse some way to switch the color when the mouse is over? well , cyaa and good luck!
cssglobe on 25 Oct, 2007 wrote:

@Paul M: You can initiate tablecloth function after you load your tables. Remove the window.onload initiation and put tablecloth(); somewhere in your script.
cssglobe on 25 Oct, 2007 wrote:

@angel: there's a css file in tablecloth directory that you can use to modify appearance. Each element is given class .over on mouse over so use it to define appearance.
Lizzam on 30 Oct, 2007 wrote:

Great stuff you have here. I love how your code does not make a mess out of the original HTML code, but still work beautifully.

I'd like to suggest an on-the-fly edit data function, like those you can find in Google Spreadsheets, and I think this page would be of help

http://www.quirksmode.org/dom/cms.html
sam on 2 Nov, 2007 wrote:

Amazing work!! One of the most useful scripts out there.

Is there a forum for tablecloth? I have a few questions i would like to discuss.

Has anyone figure a way to limit table cloth to specific tables instead of all?
Stan on 13 Nov, 2007 wrote:

I am interested in the data layout inside of cells. How to do layout for columns? for example numbers in some column should be placed at the right border of cells, etc.
objectred on 20 Nov, 2007 wrote:

Excellent script--thanks a ton for putting this out there.

Can anybody tell me how to have a specific row pre-selected on page load, or how to use another element on the page to target a specific table row?

Thanks!
jas on 22 Nov, 2007 wrote:

Excellent script.....But only thing I observed that i becomes very slow if table has more rows.
junlisondra on 3 Jan, 2008 wrote:

It would be good to see colomn-sort function in the future =)
Melanie on 23 Jan, 2008 wrote:

Excellent script, thank you for making this available to us for free. I'm a newbie at programming and dont know too much about javascript, so am not able to make changes to the code, but, I would like to see the support for the colspan, in the meantime I've managed without it and as jas mentioned, i also found it slowing down when it has more rows, only on my pc though - This script has reduced the file size of the original page by 50% so far.

Great work and thank you once again =)
Matt on 4 Feb, 2008 wrote:

Brilliant little script. Keep up the great work!

Just wondering if anyone has worked out how to limit the script to only work on the one table? The tablecloth.js file affects the scripting I have on another table on my site.
Thanks
Sam on 8 Feb, 2008 wrote:

How about a configuration option to "automatically" determine whether or not to highlight cols/rows based on the "scope" attribute?

I think that would be neat.
?? on 14 Feb, 2008 wrote:

??
Levic on 3 Mar, 2008 wrote:

Hi,
It's a very nice script, but it's very slow on IE7 when the table have a lot of columns, but on Firefox or Safari, there is no pb, an idea ?
Bye
MAXMAS on 4 Mar, 2008 wrote:

The Tablecloth is a Excellent script. But it is unable to apply to websites actually. Because web-pages have many TABLE composing. TABLE include TABLE. So .. if apply to these pages, you will got big error.
I hope it will be modify and will not influence all forms on page.
Thanks a lot!!
Pneumatiky on 11 Mar, 2008 wrote:

Really light and useful, thank you very much
Jon Egil on 19 Mar, 2008 wrote:

Nice concept, and good looks, but unfortunately _very_ slow on large tables. I have financial data, 10 cols and 500 rows, and it takes 0.5 sec for each highlight. Clicking takes about 1 sec.
Predaj pneumatik on 22 Mar, 2008 wrote:

This is a problem when there are large amounts of table data, either large tables or lots of small tables. Having something that would extend the table object that was passed in would be exactly what I'm looking for.
Petar on 2 Apr, 2008 wrote:

Nice scripts.I ready try it but I need fix first column align right and rest column align right.How to? Thank
rockananda on 7 Apr, 2008 wrote:

Tablecloth is excellent. Is there a specific license such as MIT that applies?
Phill on 10 Apr, 2008 wrote:

I have been using Tablecloth for a while and love the functionality of this. easy to use and implement.

Have one issue when adding and removing elements (table rows in my case), Tablecloth is not working correctly.

I am implementing something like the example here:

http://www.mredkj.com/tutorials/tableaddrow.html

but when I add a new row to the table the class comes up as undefined.

<td class="undefined">TEST DATA</td>

Any suggestions on how I could get the Tablecloth functionality to the user added row?

Thanks in advance and looking forward to future releases.

--Phill
Ezhilan on 15 Apr, 2008 wrote:

while first column locked in html page then move remaining column to left , the column which has editable like drop down it overlapps on the first column. But i dont need like that,I want that also hidden in the locked column
jonathan on 17 Apr, 2008 wrote:

Looks great!
I also agree that it would be great to be able to select multiple rows/columns and even sort.
Another good addition would be for it to be able to add the values in cells (e.g have a column which adds the values of the selected columns).
Jon on 21 May, 2008 wrote:

Your example works great. When I made my own table, I have to put "<form></form>" after my table in order for it to work. Why is that?
Bernike on 11 Jun, 2008 wrote:

WOW! Thanks the tablecloth has opened so many doors for me! THANKS :)

I am experiencing a problem at the moment. Think it might be similar to Phill’s error on 10 April 2008. The tablecloth worked 100% until I had to add a couple of columns to my table and now it seems to go wonky. I am getting an “ojb has no properties” error. Any suggestions?
Bernike on 11 Jun, 2008 wrote:

OOPS.. I mean "obj has no properties"
fallentemplar on 4 Jul, 2008 wrote:

Great script!!! Enjoyed it very much,
I do have a performance problem though, when I have more than 500 rows (im only selecting rows not cols), the script script slows to a CRAWL, as takes ~5 seconds on a quad core machine respond, FF and IE...

Anyway to solve this problem? I do see that you are doing linear redrawing....that's o(n)...but I suppose you can get it down to o(2) or even o(3) by keeping track of which rows a user selects..I could just completly rewrite the script..but the script already works, any help making it more efficent would be nice
Thanks!
fallentemplar on 4 Jul, 2008 wrote:

Rewrote the ROWS only for performance, no matter how many rows you have, it should respond instantly

cannot paste onto page, wont submit, probaly wont handle the " or '....

email me if you want one.
online shopping on 5 Jul, 2008 wrote:

Thank you for this free script, it really looks like it will do the job very nicely. I second the opinion that we should say thank-you before we get into requests : but I don't think it's good not to present requests, as it certainly helps you to make your code even better and so increase your rep :) Which is a good thing in most respects. Plus, it makes you (and us) better at what we do so that we can continue to improve things. Have to always hold these two things in tension when it comes to OpenSource.
Charles on 21 Jul, 2008 wrote:

Genius idea. Mine only higlights the columns how can I get it to highlight both??
Beau Smith on 23 Jul, 2008 wrote:

Tablecloth was exactly what I was looking for! Beautiful implementation!

I had one small issue which I'd like to submit as a patch. I wanted to style one row specifically using a class, but the Tablecloth javascript would replace the class with "even" or "odd". In the below patch, if there is an existing class, odd/even class is appended, otherwise just the odd/even class is added:

tablecloth.js - line 50
old: tr[i].className = css;
new: tr[i].className = tr[i].className ? tr[i].className + " " + css : css;
Autobazar Pocasie Spoje on 24 Jul, 2008 wrote:

Short article, but interesting one. I'd like to use the script, except for the ActiveX problem.
oil painting reproductions on 25 Jul, 2008 wrote:

Why call it Tablecloth by the way? The tables created via tablecloth are beautiful and far from the basic. Is there any way that borders may be redefined other than the color or shading?
Erik on 25 Jul, 2008 wrote:

I have a problem, if there are other scripts who use the onload function they won't work.
Work With 1 Class on 30 Jul, 2008 wrote:

How can I make this script work with only 1 Class/table ?
Work with 1 id on 30 Jul, 2008 wrote:

How can I make this work with only 1 table (ie. using ID?)?
agamemnus on 10 Aug, 2008 wrote:

Many thanks to cssglobe for this very nice script.
And many thanks to Beau Smith for that additional class mod!
TANVE on 14 Aug, 2008 wrote:

Excellent work!!! I will be adding it to www.downloadjavascripts.com. Keep providing such good stuff .....
Jonathan on 26 Aug, 2008 wrote:

I couldn't get it to work, until I realised Tablecloth conflicts with ProjectSeven's PopMenu magic. Once I removed <body onload="P7_initPM(1,0,1,-20,10)">, Tablecloth would work.

Is there any way to get both to work on the same page?
njwebguy on 11 Oct, 2008 wrote:

I don't have much occasion for the use of tables in my current web designs, but I'm keeping this bookmarked for when I do. It looks great!
Phill Pafford on 4 Nov, 2008 wrote:

any updates for tablecloth coming?

I really enjoy the easy of use and would like to request some features if possible?

[LIST]
[* ] Sortable rows and columns
[* ] Drag and Drop
[* ] Alternate color schemes (Plug-in maybe)
[/LIST]

Thanks!!
s j s w e n g on 10 Nov, 2008 wrote:

Any way to exclude tables from using Tablecloth automatically?

Thanks,
S
dell on 19 Nov, 2008 wrote:

Thank you for such a neat script. I mhaving some trouble integrating it into my pages. IM using DW CS3, and have tables in page and rollovers. It seems I also have to remove any onload= pre-load coding. If i remvoe the preload, it works, but also works on all tables in page.

Not being too adept at coding, is there a way to specficy only a specific table that wold have data?

and how can I get around the issue for onload preload rollover images? Thanks for and pointers and direction on this.
dian on 1 Dec, 2008 wrote:

hey, thank you for your this nice code.
but, i'm having a trouble.. because, i need to add <th> under <th> and so on.. when i added it, it doesnt work.
can you help me, please?
Mikk on 3 Dec, 2008 wrote:

i've managed to apply it to one table modifin the css but now i have this problem... if the table i want to style it's inside another table when i select any cell the first column is the one changin style (always) and the others are unselected... so i dunno if there's any ideas to solve this?
anyways great script xD !!!
IPFox on 18 Dec, 2008 wrote:

Hi,

I'm a huge fan of tablecloth, but there is one thing I would like to achieve.
How could I apply tablecloth stuuf only to desired tables, not on all on the page? That is possibly simple css editing issue, but I'm not too comfortable with css.
caxton on 15 Jan, 2009 wrote:

Hello:

I modified the example code as an schedule datagrid.
Here is the link: http://140.122.184.30/test/
However, there is a problem that the datagrid works fine on IE, but not on Firefox nor Chrome.
The left-side column should not be selected!

Any ideas?

Thanks.
webmaster tools on 16 Jan, 2009 wrote:

Fantastic work Alen ... just implemented this in seconds and now it's time to roll up the sleeves and hack it to fit my needs.

Thanks for the head start
jlhaslip on 7 Feb, 2009 wrote:

Great script!
Saves a whole bunch of work.
Many thanks. Looking forward to seeing the next version.
Christopher Francis O'Donnell on 10 Feb, 2009 wrote:

Beautiful. This is what users need, and what the Web can be. Thanks for the script.
Grozav Claudiu on 20 Mar, 2009 wrote:

The tableclotch apply throughout the site not only to a table that I need. How can I make it applies only to a table?
Thanks
marcd on 31 Mar, 2009 wrote:

any possibility to highlight clicked box (where row and colum intersect) in different color?? would help to check big tables.
thanx in advance.
alberto marlboro on 2 Apr, 2009 wrote:

Does somebody knows how apply to specified table, not all site, thats why tablecloth override any class you try implement.
chitgoks on 27 Apr, 2009 wrote:

how would you override the onclick events so that you can call the functions within the page rather than adding code manually to the .js file?
Amit Nazare on 30 Apr, 2009 wrote:

hey, thank you for your this nice code.
Andreas on 7 May, 2009 wrote:

Hi great script. Thanks for that.

What about the sorting-feature? It would be usefull.

regards
Philippe MARC on 7 May, 2009 wrote:

Thanks for that simple and efficient piece of code. It's really useful!

To people trying to highlight only one table (not all tables). I suggested that edit in the "start" function:
var tableover = false;
this.start = function(){
var tables = document.getElementsByTagName("table");
for (var i=0;i<tables.length;i++){
if(tables[i].className == 'tablecloth_on'){
tables[i].onmouseover = function(){tableover = true};
tables[i].onmouseout = function(){tableover = false};
rows(tables[i]);
}
};
};

Now only tables defined in HTML using "<table class=tablecloth_on>" will be affected.

Thanks again!
Philippe MARC on 7 May, 2009 wrote:

I just added "sort" capability to my "tableclothed" tables.

I used a script from Joost de Valk available here: http://yoast.com/articles/sortable-table/
The install = get js script, declare it in your page header. You're done!!!

If you use tablecloth only on some tables (see my previous post), trick is to change in function called "sortable_ini" keyword "sortable" to "tablecloth_on". You then have sort oprion on all tables using tablecloth.

Also, I got a bug in sortable table listing and got to change match to
if (thisTbl.className == 'tablecloth_on') {
instead of the fancy original match.

Thanks to Joost de Valk!
Katie on 29 May, 2009 wrote:

I am in a beginning web authoring class (as a novice). I just made a tablecloth and it looks great! Thanks! So easy- wonderfully clear instructions. I think it is the 1st time that I got something to work on my first (or second) try! Yeah!
melksnor on 10 Jun, 2009 wrote:

A simple version can also be made with a jQuery Select, it adds and removes the classname X to the appropriate table cells:

$('table td').each(function(a){
$(this).mouseover(function(b){
$(this).add($(this).parent().children()).addClass('x');
x = a%$(this).parent().children().length;
$(this).parent().siblings().each(function(d){
$($(this).children().get(x)).addClass('x');
});
});
$(this).mouseout(function(b){
$(this).add($(this).parent().children()).removeClass('x');
$(this).parent().siblings().each(function(d){
$($(this).children().get(x)).removeClass('x');
});
});
});
Ahmad Alfy on 23 Jun, 2009 wrote:

Greetings,
That's a great plugin really and add a lot of usability to your website. My concern is developers with bad attitude. The guys who still build their websites with tables will be surprised if they tried to use this plugin :)
I did a minor modification to this script and used a function I wrote (getElementsByClass(class)) instead of using (getElementById) to apply the style to certain tables only.
Regards

Sorry, further comments are disabled for this post.

Need help with your website?
Hire a CSS/JavaScript expert!

Hey, you are not logged in!
Apply for a membership or login here.

Want to join?

If you wish to contribute with your own articles, updates or gallery entries you can apply for a membership and even become our editor.

Apply here

Become a friend

Css Globe