Introducing Tablecloth

written on:8 Oct, 2007 by Alen Grakalic

Introducing Tablecloth

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

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

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.

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

Comments

EmanuelBlagonic 8 Oct, 2007

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 8 Oct, 2007

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 8 Oct, 2007

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 9 Oct, 2007

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

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

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

@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 9 Oct, 2007

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 9 Oct, 2007

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

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 9 Oct, 2007

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 9 Oct, 2007

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

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 9 Oct, 2007

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 9 Oct, 2007

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

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 9 Oct, 2007

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 9 Oct, 2007

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 9 Oct, 2007

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 9 Oct, 2007

@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 10 Oct, 2007

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 10 Oct, 2007

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 10 Oct, 2007

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

Great work!
cssglobe 10 Oct, 2007

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

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

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 10 Oct, 2007

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 11 Oct, 2007

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 11 Oct, 2007

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 11 Oct, 2007

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 12 Oct, 2007

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 12 Oct, 2007

great script, thank you
Apple 13 Oct, 2007

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 14 Oct, 2007

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

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 17 Oct, 2007

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 19 Oct, 2007

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

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

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

Thanks again
Leo
paul irish 22 Oct, 2007

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

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 24 Oct, 2007

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 25 Oct, 2007

@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 25 Oct, 2007

@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 30 Oct, 2007

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 2 Nov, 2007

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 13 Nov, 2007

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 20 Nov, 2007

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 22 Nov, 2007

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

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

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 4 Feb, 2008

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 8 Feb, 2008

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.
?? 14 Feb, 2008

??
Levic 3 Mar, 2008

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 4 Mar, 2008

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 11 Mar, 2008

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

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 22 Mar, 2008

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 2 Apr, 2008

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

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

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 15 Apr, 2008

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 17 Apr, 2008

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 21 May, 2008

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 11 Jun, 2008

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 11 Jun, 2008

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

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 4 Jul, 2008

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 5 Jul, 2008

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 21 Jul, 2008

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

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 24 Jul, 2008

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

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 25 Jul, 2008

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

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

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

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

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

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 11 Oct, 2008

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 4 Nov, 2008

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 10 Nov, 2008

Any way to exclude tables from using Tablecloth automatically?

Thanks,
S
dell 19 Nov, 2008

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 1 Dec, 2008

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 3 Dec, 2008

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 18 Dec, 2008

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 15 Jan, 2009

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 16 Jan, 2009

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 7 Feb, 2009

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

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

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 31 Mar, 2009

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 2 Apr, 2009

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

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 30 Apr, 2009

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

Hi great script. Thanks for that.

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

regards
Philippe MARC 7 May, 2009

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 7 May, 2009

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 29 May, 2009

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 10 Jun, 2009

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 23 Jun, 2009

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.

CSS Globe is a web design magazine brought to you by Alen Grakalic and kept fresh with member contributed news and exlusive articles.

Css Globe CSS and Web Design News