If you’ve ever tried to make a table in a word processor or spreadsheet, then “save as HTML,” you know what a mess you get. Thanks to Fletcher Penney, however, we have MultiMarkdown, which makes creating HTML tables easy.

I haven’t exiled the spreadsheet from my HTML table workflow, however. I’ve just recast it in a new role and paired it with MultiMarkdown. I’ll show you how too, but first, just for a little perspective (if drama), let’s look at just what a mess you get when you use Excel or Word the conventional way.

I wanted to make this simple, innocuous-looking (but information-rich) 6x3 table:

Animal Legs Lives
Dog 4 1
Cat 4 9
Monkey 2 1
Kangaroo 2 1
Total 12 12

Trying Excel first, I entered the words and numbers in plain text – no formatting at all – then I saved it as an HTML file. Excel generated a file with 336 lines of code. Word vomited out a whopping 599 lines of HTML.

Bleck.

Even if you copied this bloat into your blog or website, it likely wouldn’t render as expected. There’s just too much junk in it. It’s not usable.

A better way

MultiMarkdown gives us a simple, intuitive way to make HTML tables without generating an amorphous blob of code. Instead of remembering HTML table codes, you simply use the pipe symbol | to separate columns.

I talked about MultiMarkdown tables in an earlier post. You can also check out Fletcher Penney’s MultiMarkdown syntax help page for all the details.

Now given that I just denounced Excel as a practical creator of usable HTML table code, it may surprise you that I’m about to recommend using a spreadsheet. But as I noted above, spreadsheets are still useful for making HTML tables,  just not in the traditional way.

Here are a few reasons I like using spreadsheets to create web-destined tables:

  • Spreadsheets are good at math. If you’re building a table involving calculations (e.g. sums, counts, averages, etc.), it’s a whole lot easier to let a spreadsheet do the number crunching.
  • Spreadsheets can be updated quickly.
  • Spreadsheets are reusable and easily repurposed.
  • You can make large tables quickly in a spreadsheet using copy, paste, fill, etc.
  • Spreadsheet rows and columns provide clear boundaries making things easier on your eyes as you build the table.

I’m going to illustrate how easy it is to make clean, friendly HTML table code using a Google spreadsheet, though what I’m about to talk about could be done in any spreadsheet program.

The spreadsheet to MultiMarkdown table workflow

Step 1: Make your spreadsheet table

Keep the formatting light since this is going to end up in a text file anyway. Just focus on getting your numbers down. (Of course, you could do this with an existing, prettier table too; doesn’t matter.)

Step 2: Add MultiMarkdown table header syntax

A MultiMarkdown table must have dashes in the second row. You can use colons (:) on either side of the dashes to tell MultiMarkdown how to align the columns.

In my example, I’m going to left-align the left-most column and right-align the other two. (Putting a colon on both sides would center things.)

Step 3: Plumb your table

The pipe symbol tells MultiMarkdown where your table column borders are. Adding them in a spreadsheet is easy. Just insert new columns between each of your original spreadsheet table columns with the | character in each cell. Remember, copy, paste, and fill are your friends. Use them to make this go quickly.

Step 4: Concatenate

Concatenate is a fancy-sounding name for chaining pieces of text together. Every spreadsheet program I’ve ever used has a concatenate function. I really like the one in Google Spreadsheets because it accepts a range of text. You don’t have to enter individual cells.

In column G, I’ve added some concatenate functions (see Formula bar for example) to pull everything together.

Column G is what we're after. All we have to do is copy it into our MultiMarkdown file, and we're done. No "save as."

Animal|Legs|Lives
:-----|-----:|-----:
Dog|4|1
Cat|4|9
Monkey|2|1
Kangaroo|2|1
Total|12|12

That doesn’t look very pretty in plain text, but when you convert your text file to HTML, it’ll look just fine – or however your CSS tells it to look on your site.

Animal Legs Lives
Dog 4 1
Cat 4 9
Monkey 2 1
Kangaroo 2 1
Total 12 12

Oh, and by the way, this table only took up a mere 39 lines of HTML code using MultiMarkdown. That's less than 12% of Excel and less than 7% of Microsoft Word.