Create quick and easy HTML tables with Tableizer

On Tuesday I taught a session on visualizing data at the Knight Center, highlighting free and easy-to-use multimedia tools. Over the next couple of days, I’ll be posting tutorials on everything we discussed. Yesterday I posted basics of HTML. Today let’s play with tables.

HTML does not recognize tabs or more than one space, so no matter how you try to create columns by adding spaces between words or numbers, it just doesn’t work. Instead, you need to create a table.

The Bureau of Labor Statistics has a chart of unemployment rates for the last 10 years. But if you copy that information to add it to your blog or story, you get this:

Year January February March April May June July August September October November December
1999 4.3 4.4 4.2 4.3 4.2 4.3 4.3 4.2 4.2 4.1 4.1 4
2000 4 4.1 4 3.8 4 4 4 4.1 3.9 3.9 3.9 3.9
2001 4.2 4.2 4.3 4.4 4.3 4.5 4.6 4.9 5 5.3 5.5 5.7
2002 5.7 5.7 5.7 5.9 5.8 5.8 5.8 5.7 5.7 5.7 5.9 6
2003 5.8 5.9 5.9 6 6.1 6.3 6.2 6.1 6.1 6 5.8 5.7
2004 5.7 5.6 5.8 5.6 5.6 5.6 5.5 5.4 5.4 5.5 5.4 5.4
2005 5.2 5.4 5.2 5.2 5.1 5.1 5 4.9 5 5 5 4.8
2006 4.7 4.8 4.7 4.7 4.7 4.6 4.7 4.7 4.5 4.4 4.5 4.4
2007 4.6 4.5 4.4 4.5 4.5 4.6 4.7 4.7 4.7 4.8 4.7 4.9
2008 4.9 4.8 5.1 5 5.5 5.6 5.8 6.2 6.2 6.6 6.8 7.2
2009 7.6 8.1 8.5

Yuck.

To convert that information to HTML and make it readable again, you would create a table, which would require these tags:
<table> Creates a table
<tr> Identifies a row in the table
<th> Identifies a header in the table
<td> Identifies data (or a cell) in a table

Writing that HTML table would look like this:
<table><tr><th>Year</th> <th>January</th> <th>February</th> <th>March</th> <th>April</th> <th>May</th> <th>June</th> <th>July</th> <th>August</th> <th>September</th> <th>October</th> <th>November</th> <th>December</th></tr>
<tr><td>1999</td> <td>4.3</td> <td>4.4</td> <td>4.2</td> <td>4.3</td> <td>4.2</td> <td>4.3</td> <td>4.3</td> <td>4.2</td> <td>4.2</td> <td>4.1</td> <td>4.1</td> <td>4</td></tr>

Good grief, I’m exhausted and I only created two rows. Luckily, there’s an easier way.

Danny Sanchez created Tableizer, a brilliant, quick way to convert a spreadsheet into an HTML table.

Those unemployment rate numbers are already saved as a spreadsheet. (To create your own, go back to the BLS site, highlight and copy the information and paste it into a spreadsheet.) To make that spreadsheet an HTML table:
• Click on the first cell (A1), hold the shift key and click on the last cell that you want to copy (M12). Copy those cells (command-C on a Mac or control-C on a PC).
• Paste that information (command-V or control-V) into the Tableizer. Adjust the font, font size and color behind the header (first) row.
• Click the “Tableize It!” button and preview your shiny new table.
• If you like the preview, copy the HTML code provided. Click the HTML tab in your blog and paste it there, or paste it in a story. If you don’t like it, try again.

In just a couple of minutes, that same table now looks like this:

Go ahead — make up your own spreadsheet, copy the cells and throw it into Tableizer to transform it into an HTML table.