Skip to content Skip to navigation

Writing for the Web #6: Freeing your content from HTML tables used for layout

A long while ago I wrote a post about working with Google Docs to prep and remove old formatting from content, which was serving me well, but I recently encountered a site that my old methods weren't helping. The site used table cells for creating layouts within content and occasionally to create the look of paragraphs.

I tried a few common "Remove Formatting" options from both Google Docs and the CKEditor WYSIWYG, but nothing was getting there. In the end it was Microsoft Word that came to the rescue. Read on to get the details!

What's so bad about tables for layout?

Tabular data

Tables have a really specific meaning in HTML. When we use them, we are indicating that the content inside is tabular data. They key word here is data.

Here's one way to think about it: would it make sense to keep this information in a spreadsheet? Does it need headers to help define the context of the information? Then a table makes perfect sense for that content!

Tables for layout: failing accessibility and web standards compliance

However, people sometimes (especially in the recent past) have used tables to put content side-by-side or add spacing around information, or a myriad of other design reasons. This is a misuse of tables in HTML and is a no-no for accessibility and basic web quality standards.

There is a lot more that can be said about making great tables, but I'm going to save that for another day. As an abbreviated version, I'll give you a few quick examples.

Inappropriate use of tables

Our team

Linnea Williams

Sara Worrell-Berg

Caryl Westerberg

Cynthia Mijares

John Bickar

Shea McKinney

Megan Miller Berger

Zach Chandler

Perfectly reasonable use of tables

Our team
Name Email

Linnea Williams

linnea@stanford.edu

Caryl Westerberg

cjwest.stanford.edu

John Bickar

jbickar@stanford.edu

Megan Miller Berger

meganem@stanford.edu

Removing HTML tables, without removing the content in the tables

So how do you "free" your content from HTML tables that were used for layout? That was the question I was facing, because I couldn't expect my content migration team to rewrite their entire website.

But, everytime I chose "Delete table" in a tool, it deleted all of the content too, which was unacceptable.

Microsoft Word: Convert table to text

I've said in the past that using Word isn't the best for staging content for the web and I stand by that statement, but this is a funny example of when I was wrong. Yep, I can admit it.

To remove your table

  1. Paste the table into Word
  2. Place your cursor in one of the table cells.
  3. From the menu bar choose: Table > Convert > Convert Table to Text...
     Table > Convert > Convert Table to Text...

  4. Choose how your cells should be broken down, in most cases this will be "Paragraph marks"
    Screenshot of Convert Table to Text "separate text with" options with "Paragraph marks" selected

  5. Click OK

The results!

Now every person on the team has a line of their own and the table is gone. Yay!!!

Table with "Our team" converted into text with a new line for each person

You can now paste that information into your WYSIWYG (what you see is what you get) editor and use the remove formatting option to clean up any additional styles that may have come from Word. There may be a small amount of reformatting required after that, but the majority of the work is done!

Our team

Linnea Williams
Sara Worrell-Berg
Caryl Westerberg
Cynthia Mijares
John Bickar
Shea McKinney
Megan Miller Berger
Zach Chandler

I hope this was helpful for folks. It sure was a lifesaver for me.

Comments

This is tremendous advice. I knew about that facility within Word, but had never found a use for it before: will definitely remember this tool now!

When you do want spacing as in column style then, would you use div tags with padding?

Yes, the best approach if you're trying to make column layouts is to use divs, or if you're in Drupal you can use blocks. Hope that helps!