Quarto

Some Points About Building a Website

Modified

Mar 18, 2025

Rendering Pandas DataFrames in HTML

Column widths

Quarto renders pandas DataFrames as wide as the body of the HTML document. (DataFrames with one or two or three columns, which are not actually very wide.)

To get it to render them like in Jupyer Notebook, I added the following code to the styles.css file created by Quarto. By default, this file is empty.

.table { width: auto; }

Index Formatting

While Quarto formats the column index of a DataFrame properly, it leaves the row index with the same format as any other column: not bold, and close to the data.

However, inspecting the HTML revealed that it does place an attribute on the table cells which correspond to the index: data-quarto-table-cell-role="th". This th value must be ‘table header’; it is also given to the column header cells.

I added the following code to the CSS file to render the row index bold, as slightly away from the data. Here, the CSS picks td elements with an attribute data-quarto-table-cell-role with value th, and sets the font weight and right padding. The right padding is in ch units; 1ch is the width of the character 0.

td[data-quarto-table-cell-role="th"] {
    font-weight: bold;
    padding-right: 2ch;
}

TO DO: I have not yet tried a DataFrame with hierarchical indexing.

Executing Jupyter Notebooks

By default, Quarto only converts the .ipynb file to HTML; it does not execute the notebook.

We need to execute the notebook first, and then render using Quarto.

Points to note:

  • Quarto can be set to automatically execute notebooks.
  • However, when we use the run all cells command in Jupyter Notebook, execution stops when Python encounters an error; cells following the error do not get executed. Therefore, manually executing notebooks appears to be a better option. Suppose we are highlighting an error in a notebook, we want all following cells to get executed.

YAML in Jupyter Notebooks: metadata and options

When using Jupyter Notebooks to author content for a Quarto website, we can include YAML in two places:

  • In the first cell of the document: this cell needs to be a Raw cell.
  • As the first few lines of a code cell, starting with the special symbol #|.

The YAML in the first cell can include document metadata such as title, author, keywords, which will make the webpage SEO friendly.

The YAML in code cells can be used to set formatting options for the code or the output.

Rendering in R Studio

The Render icon R Studio ren