posted on:October 8, 2007

Introducing Tablecloth


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.

Enjoyed the article?

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

DeliciousStumbleUpon RedditSubscribe

Comments (101 Comments)

  1. EmanuelBlagonic
    October 8, 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 :)
  2. cssglobe
    October 8, 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)
  3. pagerss reader
    October 8, 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
  4. cssglobe
    October 9, 2007

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

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

    Shift and Ctrl click would be perfect
  7. cssglobe
    October 9, 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
  8. MindStalker
    October 9, 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.
  9. cssglobe
    October 9, 2007

    @MindStalker: good point there. Will add that...
  10. Mickele
    October 9, 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
  11. james
    October 9, 2007

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

    To the comments and suggestions, why don't you try to being innovated and build something your self. stupid developers
  13. mike
    October 9, 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
  14. james
    October 9, 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.
  15. Raul Riera
    October 9, 2007

    I am having problems setting this up with tables with "colspan" is this a problem?
  16. Sol Irvine
    October 9, 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!
  17. James McDugal
    October 9, 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.
  18. cssglobe
    October 9, 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! :)
  19. Forrest Vodden
    October 9, 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!
  20. cssglobe
    October 9, 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.
  21. shane plasebo
    October 10, 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...
  22. mike
    October 10, 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
  23. daniel
    October 10, 2007

    This is awesome!! Any chance of making this a wordpress plugin? Great work!
  24. cssglobe
    October 10, 2007

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

    To all of you: Thanks so much for your comments. Your opinions, good or bad, are very helpful.
  26. Darren Hoyt
    October 10, 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>?
  27. myheaditches
    October 10, 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.
  28. pagerss reader
    October 11, 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
  29. Marcelo
    October 11, 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
  30. myheaditches
    October 11, 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.
  31. Tommy
    October 12, 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!
  32. rosenthal
    October 12, 2007

    great script, thank you
  33. Apple
    October 13, 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.
  34. saunameister
    October 14, 2007

    very great script ! thanks for work
  35. D
    October 16, 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.
  36. Brad
    October 17, 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?
  37. Paul Irish
    October 19, 2007

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

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

    Hi! Alen! Nice script, thanks for that. The colspan and rowspan support could be very nice! Thanks again Leo
  40. paul irish
    October 22, 2007

    This should make colspan and rowspan support easy. Take a look at getActualCellIndex() from http://www.javascripttoolbox.com/lib/table/source.php
  41. Paul M
    October 23, 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?
  42. angel rodriguez leon
    October 24, 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!
  43. cssglobe
    October 25, 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.
  44. cssglobe
    October 25, 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.
  45. Lizzam
    October 30, 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
  46. sam
    November 2, 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?
  47. Stan
    November 13, 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.
  48. objectred
    November 20, 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!
  49. jas
    November 22, 2007

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

    It would be good to see colomn-sort function in the future =)
  51. Melanie
    January 23, 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 =)
  52. Matt
    February 4, 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
  53. Sam
    February 8, 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.
  54. ??
    February 14, 2008

    ??
  55. Levic
    March 3, 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
  56. MAXMAS
    March 4, 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!!
  57. Pneumatiky
    March 11, 2008

    Really light and useful, thank you very much
  58. Jon Egil
    March 19, 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.
  59. Predaj pneumatik
    March 22, 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.
  60. Petar
    April 2, 2008

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

    Tablecloth is excellent. Is there a specific license such as MIT that applies?
  62. Phill
    April 10, 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
  63. Ezhilan
    April 15, 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
  64. jonathan
    April 17, 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).
  65. Jon
    May 21, 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?
  66. Bernike
    June 11, 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?
  67. Bernike
    June 11, 2008

    OOPS.. I mean "obj has no properties"
  68. fallentemplar
    July 4, 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!
  69. fallentemplar
    July 4, 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.
  70. online shopping
    July 5, 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.
  71. Charles
    July 21, 2008

    Genius idea. Mine only higlights the columns how can I get it to highlight both??
  72. Beau Smith
    July 23, 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;
  73. Autobazar Pocasie Spoje
    July 24, 2008

    Short article, but interesting one. I'd like to use the script, except for the ActiveX problem.
  74. oil painting reproductions
    July 25, 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?
  75. Erik
    July 25, 2008

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

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

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

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

    Excellent work!!! I will be adding it to www.downloadjavascripts.com. Keep providing such good stuff .....
  80. Jonathan
    August 26, 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?
  81. njwebguy
    October 11, 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!
  82. Phill Pafford
    November 4, 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!!
  83. s j s w e n g
    November 10, 2008

    Any way to exclude tables from using Tablecloth automatically? Thanks, S
  84. dell
    November 19, 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.
  85. dian
    December 1, 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?
  86. Mikk
    December 3, 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 !!!
  87. IPFox
    December 18, 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.
  88. caxton
    January 15, 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.
  89. webmaster tools
    January 16, 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
  90. jlhaslip
    February 7, 2009

    Great script! Saves a whole bunch of work. Many thanks. Looking forward to seeing the next version.
  91. Grozav Claudiu
    March 20, 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
  92. marcd
    March 31, 2009

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

    Does somebody knows how apply to specified table, not all site, thats why tablecloth override any class you try implement.
  94. chitgoks
    April 27, 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?
  95. Amit Nazare
    April 30, 2009

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

    Hi great script. Thanks for that. What about the sorting-feature? It would be usefull. regards
  97. Philippe MARC
    May 7, 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!
  98. Philippe MARC
    May 7, 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!
  99. Katie
    May 29, 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!
  100. melksnor
    June 10, 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'); }); }); });
  101. Ahmad Alfy
    June 23, 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, the comment form is closed at this time.