HTML tables with DIVS to Word conversion

[jose luis barajas]

Hi

Its possible to create tables in word document using only html tables with css,

I need some tabular data, but without using tables?

Conversion from html to PDF works fine, but no in word document.

Plese help!

[Manikandan Ravichandran]

Hi Jose,

From the given details, we suspect that your requirement is to add HTML tables in the Word document using DocIO. You can use the below code example to achieve the same.

 

WordDocument document = new WordDocument();
document.EnsureMinimal();
document.LastParagraph.AppendHTML("<table style=\"height: 224px; border-color: black;\" border=\"1\" width=\"460\"><tbody><tr><td style=\"width: 146px;\">One&nbsp;</td><td style=\"width: 146px;\">two</td><td style=\"width: 146px;\">three</td></tr><tr><td style=\"width: 146px;\">four</td><td style=\"width: 146px;\">five</td><td style=\"width: 146px;\">six</td></tr><tr><td style=\"width: 146px;\">seven</td><td style=\"width: 146px;\">eight</td><td style=\"width: 146px;\">nine</td></tr></tbody></table>");
document.Save("Output.docx", FormatType.Docx);
document.Close(); 

Please refer the below link to know more about HTML to Word conversion and vice versa.
https://help.syncfusion.com/file-formats/docio/html

Regards,
Manikandan Ravichandran 

[jose luis barajas]

Hi Manikandan

For my requirement I need to show tables inside a table, and I have a problem with the <table> default construct.

So I want to know if using Divs and CSS I can achieve what I need..

Something like the following sample, this works fine with HTML to PDF, but not for HTML to word, info not shown like table, I get content data in a new row.

(css can be any other)

<div class='Table'>

    <div class='Title'>

            Sample table

    </div>

    <div class='Heading'>

        <div class='Cell'>

             header 1

        </div>

        <div class='Cell'>

             header2

        </div>

        <div class='Cell'>

            header 3

        </div>

    </div>

    <div class='Row'>

        <div class='Cell'>

            data 1

        </div>

        <div class='Cell'>

            data 2

        </div>

        <div class='Cell'>

            data 3

        </div>

    </div>

    <div class='Row'>

        <div class='Cell'>

            data 4

        </div>

        <div class='Cell'>

            data 5

        </div>

        <div class='Cell'>

            data 6

        </div>

    </div>

</div>

Using css like this

<style>

 .Table

    {

        display: table;

    }

    .Title

    {

        display: table-caption;

        text-align: center;

        font-weight: bold;

        font-size: larger;

    }

    .Heading

    {

        display: table-row;

        font-weight: bold;

        text-align: center;

    }

    .Row

    {

        display: table-row;

    }

    .Cell

    {

        display: table-cell;

        border: solid;

        border-width: thin;

        padding-left: 5px;

        padding-right: 5px;

    }

</style>

[Manikandan Ravichandran]

Hi Jose,

Thank you for your update.

We have created a new HTML file with the given HTML string and when opening this HTML file in a web browser, it was shown as a table. But, when I open the same document in the Microsoft Word application, it didn’t show as a table and shows the content line by line. This is the Microsoft Word behavior for div element and DocIO also does the same as Microsoft Word application. So that, you should use table tags for the table to display properly in the Word document.

 

HTML	Word

Please find the HTML document from the below link.
https://www.syncfusion.com/downloads/support/forum/171807/ze/HTML1916506062

Regards,
Manikandan Ravichandran