Pin Me

Convert a Word Table to HTML

written by: Profacgillies•edited by: Simon Hill•updated: 2/10/2010

If you have a smart table in Word and you want to transfer it neatly to your web page, then there are few tricks you can use to preserve your formatting and also to speed up the process. This article will tell you how to convert a table in word to HTML without losing all your formatting.

  • slide 1 of 3

    The Structure of an HTML Table

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

    A simple 2 x2 table thus becomes:

    <table>

    <tr><td>Top left cell</td><td>Top right cell</td></tr>

    <tr><td>Bottom left cell</td><td> Bottom Top right cell</td></tr>

    </table>

    Each tag has a range of parameters:

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

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

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

  • slide 2 of 3

    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 <table> tag. Do you need a border? Add a border="1" attribute to your <table> 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 <tr> tag. Add the first blank cell as a pair of <td>…</td> 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 </tr> 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 </table> 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.

  • slide 3 of 3

    How To Convert A Table In Word To HTML: Shortcuts

    Sample word table 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 </td><td> to start to generate the code:

    Heading 1</td><td>Heading 2</td><td>Heading 3</td><td>Heading 4

    Cell 1 Contents</td><td>Cell 2 Contents</td><td>Cell 3 Contents</td><td>Cell 4 Contents

    Cell 5 Contents</td><td>Cell 6 Contents</td><td>Cell 7 Contents</td><td>Cell 8 Contents

    Cell 9 Contents</td><td>Cell 10 Contents</td><td>Cell 11 Contents</td><td>Cell 12 Contents

    Cell 13 Contents</td><td>Cell 14 Contents</td><td>Cell 15 Contents</td><td>Cell 16 Contents

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

    Heading 1</td><td>Heading 2</td><td>Heading 3</td><td>Heading 4</tr>

    <tr>Cell 1 Contents</td><td>Cell 2 Contents</td><td>Cell 3 Contents</td><td>Cell 4 Contents</tr>

    <tr>Cell 5 Contents</td><td>Cell 6 Contents</td><td>Cell 7 Contents</td><td>Cell 8 Contents</tr>

    <tr>Cell 9 Contents</td><td>Cell 10 Contents</td><td>Cell 11 Contents</td><td>Cell 12 Contents</tr>

    <tr>Cell 13 Contents</td><td>Cell 14 Contents</td><td>Cell 15 Contents</td><td>Cell 16 Contents.</tr>

    <tr>

    Now move the final <tr> tag back to the top before adding the <table> and </table> tags at the top and bottom respectively leading to the final result:

    <table>

    <tr>Heading 1</td><td>Heading 2</td><td>Heading 3</td><td>Heading 4</tr>

    <tr>Cell 1 Contents</td><td>Cell 2 Contents</td><td>Cell 3 Contents</td><td>Cell 4 Contents</tr>

    <tr>Cell 5 Contents</td><td>Cell 6 Contents</td><td>Cell 7 Contents</td><td>Cell 8 Contents</tr>

    <tr>Cell 9 Contents</td><td>Cell 10 Contents</td><td>Cell 11 Contents</td><td>Cell 12 Contents</tr>

    <tr>Cell 13 Contents</td><td>Cell 14 Contents</td><td>Cell 15 Contents</td><td>Cell 16 Contents.</tr>

    </table>

    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.