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
- Currently limits rows to 50 and columns to 11, but that can be changed easily in the code
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.