JavaScript-Powered HTML Table Code Generator

By Louis Lazaris on April 13th, 2009
Categories: Markup & Style, Scripting | 7 Comments

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!