Convert a Spreadsheet to an HTML Table
Posted by Gina Trapani at 11:00 PM on May 4, 2008
When you want to turn that giant spreadsheet into an HTML table without wrangling too many TD's and TR's by hand, you can use a formula to generate the HTML tags for you. The Design Intellection blog describes how to use the =CONCATENATE("text", cell, "text") spreadsheet formula to turn a row of data into an HTML table row. On Friday, Kevin pointed out a web-based HTML table generator that's a simple, fast solution for small tables; but if your data's already in a spreadsheet and the word "concatenate" doesn't make you want to run screaming, this may be a better way to go.
Tags: html | spreadsheets | web publishing

Comments (AU Comments · US Comments)
There are currently no AU comments for this post.
jfournier
Posted 11:19 PM 4/5/08
If you don't like the word concatenate you can just use the ampersand operator:
="text"&cell&"text"
jfournier
toddkravos
Posted 12:05 AM 5/5/08
Funny, that's how I learned how to wrangle TDs an TRs way back in the day.
I still use it on occasion, but more for generating sequential code. Total time saver for when you do a boat load of document.writes
toddkravos
OX4
Posted 1:00 AM 5/5/08
@jfournier: Agreed...I've never actually used the concatenate function.
OX4
The How-To Geek
Posted 12:57 AM 5/5/08
I've always used a similar trick... just copy/paste into a (good) text editor, then do search/replace for tabs and newlines. Works with any number of columns easily, and you can do more than just formatting html.
Any good text editor will let you save macros to do the formatting with a single button click.
I typically use this for taking spreadsheet data and generating SQL code.
The How-To Geek
orangepixistix
Posted 12:56 AM 5/5/08
Wow, and I used to waste all my time to generate the code by hand. Then again, I never had such a huge table to deal with...
This is quite nifty.
orangepixistix
The How-To Geek
Posted 1:53 AM 5/5/08
@izzardfan: Good point, that's even simpler for html.
The How-To Geek
izzardfan
Posted 1:32 AM 5/5/08
I use concatenate all the time, and I love it. As for creating HTML of a spreadsheet, if you use Excel, you can "Save as a web page" and all the work is done for you. Then simply tweak the sections you need. If you use Excel and Dreamweaver, you can actually copy from the spreadsheet to the design section and it will create a table for you, which (again) you can tweak the code manually. Saves a load of time.
izzardfan
jddphd
Posted 2:18 AM 5/5/08
The concatenate function has been an essential arrow in my programming quiver for 10 years now. I've coded huge SELECT/FORM elements with them and find it even more helpful for doing mass SQL queries, particularly INSERTs and UPDATEs.
jddphd
TimHare
Posted 3:28 AM 5/5/08
@izzardfan: doesn't Excel generate large amounts of unnecessary HTML like Word does when you do 'Save as a web page"?
In my experience the HTML generated by office has a lot of stuff I don't want in it, like font tags and such.
TimHare
sumocat
Posted 4:44 AM 5/5/08
@TimHare: Excel 2007 keeps it pretty tight depending on how you format the table. Font formatting is kept in the style sheet so it's easy to strip out or modify.
Regarding this tip, I prefer stages and filtering, so to me it looks pretty cumbersome to do all the tagging in one column. I would do the td tags in separate columns first, then tie them together in tr tags in another column, and probably group it all up in one cell at the end.
sumocat
Lazarus
Posted 4:43 AM 5/5/08
I use Google Docs and export to HTML. (You can also import excel files to Google Docs as well)
[documents.google.com]
Lazarus
wormz
Posted 3:59 PM 5/5/08
The way I do it is copy from Excel and paste into Dreamweaver which produces instantly a clean HTML table without all the usual excel-produced HTML.
wormz
izzardfan
Posted 9:33 PM 6/5/08
@TimHare: as others have posted, it's not as bad as it used to be, and using Dreamweaver as an intermediary helps. I use WordPad to clean up extra tags, as long as they're identical (highlight the text you want removed, press Ctrl+H, leave the Replace With field empty, and click Replace All).
izzardfan