Search code examples
htmlcssgoogle-docsgoogle-docs-api

Format HTML table to paste into Google Doc

I'm generating HTML code for regular tables:

<table cellpadding="0" cellpadding="0">
    <tr>
       <td>Data</td>
       <td>Data</td>
       <td>Data</td>
    <tr>
</table>

After generation, I open the HTML file in a browser (Firefox) and copy and paste into blank Google Doc, BUT Google Docs translates the table without borders borders and default format.

There is a way to format the HTML table to meed the Google Docs requirements? Or there is a way to format a lot of tables of a Google Doc using a macro ? (I mean table borders and single linespacing)

Solution

  • The first thing I notice is the <table> has cellpadding="0" declared on it, twice.

    “Do not use [cellpadding or cellspacing], as [they have] been deprecated. The element should be styled using CSS.” —MDN web docs

    See this other StackOverflow question for how to set cellpadding and cellspacing in CSS.

    This actually addresses your problem, as adding a border-collapse property to your table style will cause allow a table to paste into a Google Doc as a table… if you set it to separate.

    Or if you add padding to your td (and th if you have them)

    I should also note, different browsers will produce different results. I've also found how much is selected can effect how the table pastes in. My best advice is to experiment based on the look of your table and your desired result.