0

I am attempting to semi-automate a workflow which results in more or less autogenerating a Google Doc (with a few limited manual interventions). The main way I am doing this is to programmatically generate HTML which I then open in Google Docs. The issue I am running into is the format of the HTML tables are getting completely messed up after rendering in the Google Docs. Any suggestions? I should also callout that I have very zero experience with HTML (I using Python and relying on some markdown to HTML conversion libraries)

Below is an example table that looks fine when, say, opening in Chrome but the widths are messed up when opening in Google Docs:

<p><table border="0" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th style = "background-color: #FFFFFF;font-family: Century Gothic, sans-serif;font-size: 12px;color: #808080;text-align: left;border-bottom: 2px solid #808080;padding: 10px;width: auto">Very, very long column name</th>
      <th style = "background-color: #FFFFFF;font-family: Century Gothic, sans-serif;font-size: 12px;color: #808080;text-align: left;border-bottom: 2px solid #808080;padding: 10px;width: auto">Shrt Nme</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style = "background-color: #EDEDED;font-family: Century Gothic, sans-serif;font-size: 12px;text-align: left;padding: 10px;width: auto">1</td>
      <td style = "background-color: #EDEDED;font-family: Century Gothic, sans-serif;font-size: 12px;text-align: left;padding: 10px;width: auto">6</td>
    </tr>
    <tr>
      <td style = "background-color: white; color: black;font-family: Century Gothic, sans-serif;font-size: 12px;text-align: left;padding: 10px;width: auto">2</td>
      <td style = "background-color: white; color: black;font-family: Century Gothic, sans-serif;font-size: 12px;text-align: left;padding: 10px;width: auto">7</td>
    </tr>
    <tr>
      <td style = "background-color: #EDEDED;font-family: Century Gothic, sans-serif;font-size: 12px;text-align: left;padding: 10px;width: auto">3</td>
      <td style = "background-color: #EDEDED;font-family: Century Gothic, sans-serif;font-size: 12px;text-align: left;padding: 10px;width: auto">8</td>
    </tr>
    <tr>
      <td style = "background-color: white; color: black;font-family: Century Gothic, sans-serif;font-size: 12px;text-align: left;padding: 10px;width: auto">4</td>
      <td style = "background-color: white; color: black;font-family: Century Gothic, sans-serif;font-size: 12px;text-align: left;padding: 10px;width: auto">9</td>
    </tr>
    <tr>
      <td style = "background-color: #EDEDED;font-family: Century Gothic, sans-serif;font-size: 12px;text-align: left;padding: 10px;width: auto">5</td>
      <td style = "background-color: #EDEDED;font-family: Century Gothic, sans-serif;font-size: 12px;text-align: left;padding: 10px;width: auto">10</td>
    </tr>
  </tbody>
</table></p>
shadowprice
  • 617
  • 2
  • 7
  • 14

1 Answers1

0

Block-level element

It is important to clarify that the main reason the HTML is invalid is because the <p> element is considered a "Block-level element".

In HTML this element cannot have another "Block-level element", and <table> is also considered that.

Reference:

It might be a better idea to utilize <div> for a better control of the formatting of the data instead of using the <p>

There is an excellent discussion on utilizing tables and "p" tags that you can review. It also has a reference to what I mentioned above, that utilizing the "p" tag would be necessary if the content of the table was generally just another paragraph, which would basically mean that is best to use the <div>.

Ricardo Jose Velasquez Cruz
  • 1,006
  • 4
  • 10