Beautiful Tables in Typst

You can use HTML Tables with CSS styling in Typst via Quarto.

Quarto 1.5

Gordon Woodhull


July 2, 2024

Quarto now allows HTML Tables with CSS styling to be output in Typst.

It does this by translating CSS properties into Typst properties. You can read about the feature in the Guide.

technical details in the Advanced Docs

Let’s look at 6 HTML tables using a variety of CSS properties also supported by Typst in Quarto.

You can click on the links below the examples to see the full documents, with source code.

1 Confusion Matrix (Pandas / Python)

This example uses a dashed border to draw attention to two cells.

2 Cars heatmap (gt / R)

This example uses cell background colors to encode ranges of values.

3 Oceania (Great Tables / Python)

Borders can show the structure of grouped rows.

4 Islands (gt / R)

Font sizes and minimal borders make this table stand out.

5 Solar Zenith (Great Tables / Python)

Another cool heatmap.

6 Acting on Data (Pandas / Python)

Applying colors and transparency based on data.

We can’t wait to see what you do with this new feature!


Enjoy this blog? Get notified of new posts by email: