I know! The days of nested tables for creating layouts are long gone. Thank goodness! But we also need to be careful with the tabular information we publish on the web, whether it’s database queries, data stored in spreadsheets, or a simple table an office secretary created in a word processor (BrOffice or Word).
Here’s a scenario: you’ve just received a spreadsheet (Excel or Calc) with the table below, and you need to put it on a web page as quickly as possible. The following fictional image shows an event schedule in the form of a monthly calendar table.
Since it needs to be published immediately, your first thought is to use Excel’s Save as HTML option. That’s very inappropriate, though, because it generates a file with an absurd 311 lines of code. If we look at the code, we’ll see that most of it is unnecessary. In part two of this post, we’ll see how to eliminate all that unnecessary code with as little effort as possible.
Part 2: Generating lean HTML for a table with as little effort as possible
For this experiment, I used Notepad++, which is free and easy to use. First, select the table in the Excel spreadsheet and paste it into a new document in Notepad++. Our goal is to transform this data into Textile, a simple text-structuring format. To do that, we first need to identify the patterns in the code and then convert it to Textile’s table format.
The code above follows this pattern:
- Cells are separated by tabs.
- We’ll focus on the start-of-line
^, end-of-line$, and tab\tcharacters.
Press Ctrl+H to open the Replace window in Notepad++. Enter the character ^ in the Find what field. In the Replace with field, enter | (pipe), which is the cell delimiter in Textile. Below that, select the Regular expression option, which makes the search find the start of each line of code. Finally, click Replace for each line in the table. The result is code with the | character at the start of each line.
Following the same pattern, we’ll change the end of each line, this time using the $ character in the Find what field:
Finally, we’ll fill the gaps between cells by entering the tab character in the Find what field: \t. This time, we can click Replace All:
Finally, copy this code and paste it into http://www.textism.com/tools/textile/ to generate the final table. This site has a tool that converts Textile-formatted code to HTML. Remember to put any character between pipes that would otherwise be empty (an empty cell, ||). In this case, I’m entering just a period (|.|).
You can see the result below. Instead of the 311 lines of code generated by Excel’s Save as HTML option, we now have just 56 lines of code—a much leaner result, produced efficiently (without wasting time or editing the code by hand):
