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.
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.