Tables

Freeing your content from HTML tables used for layout

To stage content for your website we recommend working with Google Docs to prep and remove old formatting from content. When your site uses table cells for creating layouts within content and occasionally to create the look of paragraphs, using Google Docs isn't very helpful.

We tried a "Remove Formatting" option from Google Docs, 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 we faced, because we couldn't expect the content migration team to rewrite their entire website.

Every time we chose "Delete table" in a tool, it deleted all of the content too, which was unacceptable.

Microsoft Word: Convert table to text

We've said in the past that using Word isn't the best for staging content for the web and we stand by that statement, but this is a funny example of when we were wrong. There's always that exception!

To remove your table

Paste the table into MS Word
Place your cursor in one of the table cells.
From the menu bar choose: Table > Convert > Convert Table to Text...
Choose how your cells should be broken down, in most cases this will be "Paragraph marks"
Click OK

The results!

Now every person on the team has a line of their own and the table is gone. Yay!!! You can now paste that information into your WYSIWYG (what you see is what you get) editor. 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