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

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

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:

Top left cellTop right cell
Bottom left cell Bottom Top right cell

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

^p:

Heading 1

Cell 1 ContentsCell 5 ContentsCell 9 ContentsCell 13 Contents

Now move the final

tag back to the top before adding 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 ConteArticle Imagents@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 1

Heading 2Heading 3Heading 4

Cell 1 Contents

Cell 2 ContentsCell 3 ContentsCell 4 Contents

Cell 5 Contents

Cell 6 ContentsCell 7 ContentsCell 8 Contents

Cell 9 Contents

Cell 10 ContentsCell 11 ContentsCell 12 Contents

Cell 13 Contents

Cell 14 ContentsCell 15 ContentsCell 16 Contents

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

Heading 2Heading 3Heading 4
Cell 2 ContentsCell 3 ContentsCell 4 Contents
Cell 6 ContentsCell 7 ContentsCell 8 Contents
Cell 10 ContentsCell 11 ContentsCell 12 Contents
Cell 14 ContentsCell 15 ContentsCell 16 Contents.
and
tags at the top and bottom respectively leading to the final result:

Heading 1Cell 1 ContentsCell 5 ContentsCell 9 ContentsCell 13 Contents
Heading 2Heading 3Heading 4
Cell 2 ContentsCell 3 ContentsCell 4 Contents
Cell 6 ContentsCell 7 ContentsCell 8 Contents
Cell 10 ContentsCell 11 ContentsCell 12 Contents
Cell 14 ContentsCell 15 ContentsCell 16 Contents.

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.