How to Convert a Table in Word to HTML: Structure and Shortcuts

The Structure of an HTML Table

An HTML table is defined by the tag, together with a minimum of the tag defining a row and the tag defining each cell in a row.

A simple 2 x2 table thus becomes:

Each tag has a range of parameters:

The tag can be modified using the following attributes in XHTML 1.0 Strict: border, cellpadding, cellspacing, frame, rules, summary, width.

The tag can be modified using the following attributes in XHTML 1.0 Strict: align, char, charoff, valign.

The tag can be modified using the following attributes in XHTML 1.0 Strict: abbr, align, axis, char, charoff, colspan, headers, rowspan, scope, valign, width.

How To Convert A Table In Word To HTML: Structure

So how do you make sense of your Word table in HTML? First work out your underlying structure.

To lay out your HTML table, start with the tag. Do you need a border? Add a border=“1” attribute to your tag. Do you need the table to fill the whole row? Add a width=“100%” attribute.

How many columns are there in your table? Lay out the first row. Start with a tag. Add the first blank cell as a pair of … tags. If you have a lot of columns, use copy and paste to replicate the cell as often as you need it. Finish the row with a tag.

How many rows are there in your table? Copy and paste the entire row as often as you need it and then finish the table with a tag.

Now you can add the contents to fill each cell. But there is a quicker way, especially if you have a complex table. Additionally, it may reduce the chances of transcription errors.

How To Convert A Table In Word To HTML: Shortcuts

A neat trick is to use Word’s find and replace facilities to generate your HTML code: First use Word’s convert table to text facility to convert the table to text. I suggest using the Separate text with Other (@) character to delineate the table:

Heading 1@Heading 2@Heading 3@Heading 4

Cell 1 Contents@Cell 2 Contents@Cell 3 Contents@Cell 4 Contents

Cell 5 Contents@Cell 6 Contents@Cell 7 Contents@Cell 8 Contents

Cell 9 Contents@Cell 10 Contents@Cell 11 Contents@Cell 12 Contents

Cell 13 Contents@Cell 14 Contents@Cell 15 Contents@Cell 16 Contents

Now you can replace each @ with to start to generate the code:

Heading 1Heading 2Heading 3Heading 4

Cell 1 ContentsCell 2 ContentsCell 3 ContentsCell 4 Contents

Cell 5 ContentsCell 6 ContentsCell 7 ContentsCell 8 Contents

Cell 9 ContentsCell 10 ContentsCell 11 ContentsCell 12 Contents

Cell 13 ContentsCell 14 ContentsCell 15 ContentsCell 16 Contents

Next top and tail each row by replacing the carriage returns. Use Find ^p and Replace with ^p:

Heading 1Heading 2Heading 3Heading 4

Now move the final tag back to the top before adding the and tags at the top and bottom respectively leading to the final result:

By now you should have a respectable looking table in HTML. This leaves you to add formatting information either as attributes to your table tags or as CSS style information, but at least it preserves the integrity of the table contents.