Recently I searched Google to try to find an HTML table code generator that would let me easily create an HTML table quickly and efficiently, similar to how Dreamweaver does it — but with more customization options that are in line with the the latest in web standards and best practices. I also wanted to be able to enter my data right inside the code generator itself, and not have to copy the code with empty cells, then tediously cut and paste all the data into the individual cells. I found a few options that were reasonably good, but I decided instead to build my own HTML table code generator using pure, (sort of) unobtrusive JavaScript. The entire table and data insertion would take place on the client side and be fully customizable and easy to use.
Well, after about 5 or 6 hours of blood sweat and tears (not really, it was fun), I’ve completed what I feel is one of the most efficient and useful table code generators available on the web. I know what you’re thinking: tables aren’t used very often these days by top web developers, and all HTML editors provide good support for table code generation. But the customization I’ve added and the ease with which the data can be inserted I think is worth giving it a try.
The full list of options and perks I’ve included are:
- Easy to insert data into individual cells
- Automatically inserts “summary” attribute for accessibility
- Allows option to insert a <caption> tag
- Option to insert a class for CSS styling
- Option to insert an ID for DOM manipulation or CSS styling
- Option to include <th> header cells either vertically or horizontally
- If <th> is selected horizontally, allows the option to include <thead>, <tbody>, and <tfoot> tag pairs
- Cool (or cheesy?) fade-in effect during cell preparation and code generation
- Uses unobtrusive JavaScript (okay, it’s in the head of the page, but that’s just for making it easy to get the code)
- Currently limits rows to 50 and columns to 11, but that can be changed easily in the code
- All the JavaScript, HTML, and CSS is in one file — so just “view source” and save it locally for even faster use!
By no means do I think this code generator is perfect, so I’ll be glad to hear suggestions for improvements. One thing that the code doesn’t do is put the <tfoot> tag pair in the right place. Many developers don’t know this, but the proper place for the <tfoot> is directly below the <thead> tag pair. The purpose of <tfoot> is to ensure that the “footer” part of the data is visible immediately while the “body” data is loading. This is, of course, most useful for very long tabular data. The browser will visually output the body data in between the head and foot, but the foot will appear first. A very useful but little-known, and probably rarely-used, HTML tag.
So please check out my JavaScript-powered HTML Table Code Generator and let me know what you think!
Love it! Any plans of letting this go out into the wild with a license?
I’d also be interested in seeing a version that allowed a setup/admin of prefs.
thanks!
Very cool, I’ve been looking for something like this for along time.
It’s very good. awesome
Very handy. I’ve been looking for something like this… One improvement I can see being helpful is adding the option of defining “valign” properties. I always like to define mine as “top” and the default is “center” so something like that would be awesome.
I like the form. Very cool.
@Angelike:
Glad you liked it.
FYI – “valign” is a deprecated attribute. Vertical cell alignment is something you should be doing in CSS, not HTML.
Cool, I like that. It would be nice if you could also include rowspan and colspan settings.
Really slick tool! You’re a genius! I plan to provide it to give my clients an easy way to upload table code into their websites.
Placing of “tfoot” is not correct please correct this
Yes, I know. In the article above, I mentioned the misplacement of the tfoot. I believe there was a reason why I did it this way (I think it was easier to code?). Nonetheless, it’s easy to correct once you have the code.
I would like if you can add options to add class to all td and tr. Sometime we want to give specific styling to some columns and rows.
Very slick, thanks for making is available.
The addition I have been looking for is builder that can add ids and headers without having to do so by hand.
Great, but there’s plenty of it on the web. If you only had split/merge or other span support, it would be significantly more valuable, imho.
Its really amazing but it does not cover all properties. if u want to create cool table effects without writing any code visit http://www.findks.blogspot.com
Thank you Louis for your work !