Okay, I admit it. I am an engineer, not a designer. My training and background are in software engineering. Because of that I enjoy creating tools that make my tasks easier. I am constantly looking at tasks I do and am asking myself how can I do this more efficiently or easier. Sometimes the answer is finding a better tool. Maybe a new code editor or a better programming language. Sometimes it entails creating a custom tool.
For example, I hate coding HTML tables. Those of you who understand HTML know what I am saying. Tables in HTML involve a lot of code. So I did what any engineer would do: I built a tool.
Before describing the tool, let me say something about programming languages. I have been coding for over 40 years, and until recently my language of choice for coding quick tools has been PERL. I love PERL because I can write a very powerful program in a very few lines of code. But lately I have been writing my tools using JavaScript. Since the development of the JavaScript jQuery library, I find writing tools in JavaScript/jQuery to be very fast and easy. Because JavaScript interacts with web pages it makes coding the user interface as easy as coding a web page.
Now to describe the tool, a HTML table generator. You can see it in action at http://bob.hanlonbrown.com/tablegen.htm. When you first visit the page you see:
You can click the Notes line to see some comments about the tool. Here are those comments:
This is a work in progress. Select the number of columns and rows in your table and whether or not you want thead and tfoot rows. Click the generate table button to display the results. You can then make cell changes by clicking on a cell and updating the content, span rows and span columns. When spanning rows and columns extra cells will appear. These can be removed by clicking on the cell, and then clicking “remove” button. In addition there are undo and redo buttons that let you step forward and back through your edits. When done, click the view table code to see the code to copy and paste into your editor.
Note that you can not add rows or columns with the form after generating the table. You can add rows and columns by viewing the table code and editing the code in the text area, then clicking the save edits button
So to get started, lets build a table without a footer row. Lets keep the classes, which adds class names for odd and even rows, and for columns. Click the “generate table” button and voila:
You have a table. You can click on any cell of the table to edit the contents, including changing the row or column spanning.
Spanning rows or columns will push cells out, so after setting the span you typically will click on those pushed out cells and delete them by clicking on the remove button. Below is a screen shot showing the table after doing a row span, before deleting the pushed out cells.
At any time, you can view the HTML code by clicking the “view table code” button. Clicking on it with the table in the state above shows you:
You can edit the table code directly in this window. When done, click the “save edits made in text area” button, and you will see your changes in the table. For example, instead of clicking on the pushed out cells and removing them with the remove button, I can delete the cells in this window.
The above image shows the edit window with two cells removed and the resulting table.
Another feature of the edit window is that if you have an existing HTML table and can see its source code, you can copy and paste that code into the edit window and see the table. Below shows a product specification table that I copied into the tool’s edit window.
Now I can make edits to the table by clicking on the cells that I want to change, instead of editing in the raw HTML code. When I am done, I can view the generated code and copy it back into the HTML source file.
This tool was written with JavaScript and jQuery to make it easier to work with HTML tables. Feel free to use it.
A nice and useful Html Design Tool.