What is the best way to add HTML tables to a Quarto Document

[friosavila]

Description

Say that I have a nicely formated table in -regress.htm-.
What would be the best way to include this table in a document, so it can be rendered in multiple formats.

So far, I'm aware of 2

1: {{< include regress.htm >}}

2: <iframe src="regress.htm" width="100%" height="500px" align="centered" ></iframe>

When rendering in HTML, The first option has some problems rendering the table correctly, as it creates something like:

     </td><td>         (2)              </td><td>         (3)              </td><td>         (4)              </td></tr>

in the first cell.

the second option displays correctly, but the height is not adjusted automatically. (Needs to be adjusted manually)

In PDF. 1) creates a very badly rendered output,
and 2) doesn't even render the table.

Thank you
F

[rgaiacs]

Dear @friosavila, you can not have a nicely HTML formated table included in a generated HTML and PDF. You will have better results reading the table into R or Python and let them generate the HTML and LaTeX (for PDF).

Whithout access to your regress.htm, I can't tell you why {{< include regress.htm >}} is not working for the HTML or PDF.

iframe is a window to another web page and the author must define the width and height in advance. No dynamic width or height.

Quarto/Pandoc does not know how to translate iframes to LaTeX (for PDF output) and skip the iframe.

[mcanouil]

This is not entirely true, see https://quarto.org/docs/authoring/tables.html#html-tables.

Quarto reads raw HTML table and converts it to Pandoc AST then back to the proper format.
Thus in order to get the table in HTML and PDF, you need to use raw HTML block as described.
Obviously, CSS styling will be completely lost in PDF (see the many discussions on the matter here and everywhere on the Internet).

[friosavila]

Thank you @rgaiacs for the suggestions.
The HTML was generated in a different software (Stata and esttab). The file it generates is as follows

<table border="0" width="*">
<tr><td colspan=3><hr></td></tr>
<tr><td>                    </td><td>         (1)              </td><td>         (2)              </td></tr>
<tr><td colspan=3><hr></td></tr>
<tr><td>years of education  </td><td>      0.0885<sup>***</sup></td><td>      0.0794<sup>***</sup></td></tr>
<tr><td>                    </td><td>   (0.00519)              </td><td>   (0.00522)              </td></tr>
<tr><td colspan=3>&nbsp;</td></tr>
<tr><td>years of work       </td><td>      0.0153<sup>***</sup></td><td>     0.00399<sup>*</sup>  </td></tr>
<tr><td>experience          </td><td>   (0.00126)              </td><td>   (0.00188)              </td></tr>
<tr><td colspan=3>&nbsp;</td></tr>
<tr><td>years of job tenure </td><td>                          </td><td>     0.00407<sup>*</sup>  </td></tr>
<tr><td>                    </td><td>                          </td><td>   (0.00196)              </td></tr>
<tr><td colspan=3>&nbsp;</td></tr>
<tr><td>age of respondent   </td><td>                          </td><td>      0.0114<sup>***</sup></td></tr>
<tr><td>                    </td><td>                          </td><td>   (0.00174)              </td></tr>
<tr><td colspan=3>&nbsp;</td></tr>
<tr><td>Constant            </td><td>       2.136<sup>***</sup></td><td>       1.915<sup>***</sup></td></tr>
<tr><td>                    </td><td>    (0.0654)              </td><td>    (0.0727)              </td></tr>
<tr><td colspan=3><hr></td></tr>
<tr><td>Observations        </td><td>        1434              </td><td>        1434              </td></tr>
<tr><td colspan=3><hr></td></tr>
</table>

and after rendering it produces something like

Rendered on its own, the file produces this (which is what I am aiming for)

In any case, I will explore what R and Python can do with the preprocessed tables I have constructed.
Thank you
Fernando

[friosavila]

Related answer to the original question.

It is possible to use {<< include >>}, but the HTML file should contain the "```{=html}" and "````" part of the code already.
Fernando

[cscheid]

This is not entirely true, see https://quarto.org/docs/authoring/tables.html#html-tables.

Quarto reads raw HTML table and converts it to Pandoc AST then back to the proper format. Thus in order to get the table in HTML and PDF, you need to use raw HTML block as described. Obviously, CSS styling will be completely lost in PDF (see the many discussions on the matter here and everywhere on the Internet).

One thing to be aware here is that table inclusion needs to happen inside a pandoc RawBlock. So your Markdown needs to look like this:

## Here's my table

```{=html}
<table>
...
</table>
```

Here's more markdown! [links](./foo.qmd), etc.

It cannot look like this:

## Here's my BAD TABLE THAT WILL NOT WORK

<table>
...
</table>

Here's more markdown! [links](./foo.qmd), etc.

The {{<include "table.htm" >}} syntax, by itself, will not work for precisely this reason. In addition, this will not work either:

```{=html}
{{<include "table.htm" >}}
```

This is because include shortcodes are only processed at the top level of the QMD file, and not inside code blocks. I would recommend pre-processing the .htm file in a pre-render script.

[friosavila]

Thank you!
I think that solves the problem (with a bit of a work around
If any one interested and is using stata and nbstata (Stata kernel):

    ```{stata}
    *| output: asis
    *| echo: false
    set linesize 255
    display "```{=html}"
    display_file regressx.htm
    ```
    ```

where display_file simply shows all the content in regressx.htm

Just one more question, tho. Is there any place where to look more about the "preprocessing".

[cscheid]

Is there any place where to look more about the "preprocessing".

I added a link at the end of that sentence.

[friosavila]

Thank you. That link was not very detailed into what it does, or how it works. I thought there may be some other resource with a more explicit example.

[friosavila]

A related question.
Say that i do have the HTML table. How would I go about adding links so I can refer to those tables in text.
I know this is rather simple with markdown tables, but couldnt find an example when using html tables.

[cscheid]

Use <span data-qmd="your markdown goes here"></span>: https://quarto.org/docs/prerelease/1.3/tables.html

[friosavila]

Perhaps im getting confused here For example, say I get the following: ```{=html} <table> <caption><span data-qmd="As described in @Lovelace1864, computers are great."></span></caption> <thead> <tr> <th><span data-qmd="_Header1_"></span></th> <th><span data-qmd="_Header 2_"></span></th> </tr> </thead> <tbody> <tr> <td><span data-qmd=""></span></td> <td>Regular output</td> </tr> </tbody> </table> ``` Now, How do I refer to this table in text? something like @tbl-html1 is an html table that i can refer to in text. I imagine that something like {#tbl-html1} would have to be added somewhere in the HTML table-code right? perhaps something like this: ```{=html} <table> <caption> Example Table <span data-qmd="{#tbl-tb1}"></span></caption> <thead> <tr> <th><span data-qmd="_Header1_"></span></th> <th><span data-qmd="_Header 2_"></span></th> </tr> </thead> <tbody> <tr> <td><span data-qmd=""></span></td> <td>Regular output</td> </tr> </tbody> </table> ``` Thank you

…

On Wed, Aug 23, 2023 at 10:30 PM Carlos Scheidegger < ***@***.***> wrote: Use <span data-qmd="your markdown goes here"></span>: https://quarto.org/docs/prerelease/1.3/tables.html — Reply to this email directly, view it on GitHub <#6602 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASZKKFWW4ZOGJOVHRF2GAGDXW24DTANCNFSM6AAAAAA33U3UMI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[ma-bit-bot]

I'm facing the same problem, did you ever find a solution?

[mcanouil]

@ma-bit-bot Then the answer is the same as what was explained by Carlos.

[robna]

I landed here as I was looking what is the best way when writing an article in markdown, but also needing to include complex tables. Eventually, the article needs to be converted with quarto to docx. Preferably also looking good when rendered to pdf and html.

The table that I need to include has things like:

• non-ascii characters in cells with different font colors
• cell that merge several rows and / or columns
• rotated text
• cell borders of varying type and extent

Here is an example how such a table could look like:

As this seems not possible to achieve with markdown tables, I have made it in libreOffice calc and formatted it nicely. From there I save it as and html file that I wanted to include in my article markdown document. If I understand the explanations above correctly, this would only be possible by somehow linking to that html file, but only by extracting the html <table>...</table> tag with all its content and paste it in a html raw block fenced with ```{=html} ... ```.

Having such a large chunk of markup in the way, kind of defeats the nice workflow of markdown editing for me. Is there any better way? I would also be happy for any suggestion not involving that detour I took over libreOffice -> html -> <table>-tag -> markdown.

One attempt I tried before was to include the table as a screenshot (like the one above), but that didn't produce nice results either, because a) obviously the table wouldn't be editable in the rendered docx, and b) I didn't find a way to get it recognised as a table (with a table caption above and referencable in the main text).

What would be a smart way to approach inclusion of complex tables in quarto markdown documents in general?

[cderv]

What would be a smart way to approach inclusion of complex tables in quarto markdown documents in general?

You should probably consider using to Table formatting tools available in R or Python that you could then use in computation cells in Quarto.

• Load your data
• Format your table package

Good example is

• gt for R : https://gt.rstudio.com/
• great_tables for python: https://pypi.org/project/great-tables/

But there are surely others available.

[robna]

thanks! great_tables for python seems interesting, although it is probably still changing a lot. Current release is marked as 'very rough, early release'.

If you are used to working in R, gt is probably a good choice.

I think for my current needs I stick with my table-as-image work-around. I found a way to get all the features of a standard table in the rendered docx output (except editability of course, but that's something the people who want to comment my manuscript in docx have to live with...)

Here is how I include it as a single grid cell table, so it gets to the output as a table, can be referenced by @tbl-... and gets a table caption above it:

[...] bla bla bla, see @tbl-example.

+-----------------------------------------+
| ![](path/to/tbl-example-screenshot.png) |
+-----------------------------------------+
: **Example table.** This is the table caption. {#tbl-example}

Continue main text [...]

[cscheid]

@robna this is a very cute trick! But in the 1.4 prereleases, you don't need that anymore. This should work for you:

![This is the table caption](path/to/tbl-example-screenshot.png){#tbl-example}

Quarto will recognize and honor this as an table, even though the content is an image.

[robna]

great! looking forward to this (currently at v1.3.450) 😄

[friosavila]

Another way I have been able to make it work, at least with Latex tables:

::: {#tbl-example}

{{< include tb1.tex >}}

This is a table.
:::

as someone said with @tbl-example, life is but a dream.

[roaldarbol]

For future people, see #11067 for a good workflow. In short, this now works:

```{=html}
{{< include "table.html" >}}
```