diff --git a/docs/blog/posts/2024-07-02-beautiful-tables-in-typst/index.qmd b/docs/blog/posts/2024-07-02-beautiful-tables-in-typst/index.qmd
index 5bf47619b0..19beb916d6 100644
--- a/docs/blog/posts/2024-07-02-beautiful-tables-in-typst/index.qmd
+++ b/docs/blog/posts/2024-07-02-beautiful-tables-in-typst/index.qmd
@@ -28,121 +28,130 @@ You can click on the links below the examples to see the full documents, with so
This example uses a dashed border to draw attention to two cells.
-::::: {.column-page .room}
-:::: {.columns}
+:::::: {.column-page .room}
+::::: columns
::: {.column width="50%" style="padding-top:1.5em"}
-{width=700}
-[Typst](examples/pandas-confusion-matrix.pdf){target="_blank"}
+{width="700"} [Typst](examples/pandas-confusion-matrix.pdf){target="_blank"}
:::
+
::: {.column width="50%"}
```{=html}
-
+
```
+
[HTML](examples/pandas-confusion-matrix.HTML){target="_blank"}
:::
-::::
:::::
+::::::
## Cars heatmap (gt / R)
This example uses cell background colors to encode ranges of values.
-::::: {.column-page .room}
-:::: {.columns}
+:::::: {.column-page .room}
+::::: columns
::: {.column width="50%" style="padding-top:2.2em"}
-{width=430}
+{width="430"}
[Typst](examples/gt-cars.pdf){target="_blank"}
:::
+
::: {.column width="50%"}
```{=html}
-
+
```
+
[HTML](examples/gt-cars.HTML){target="_blank"}
:::
-::::
:::::
+::::::
## Oceania (Great Tables / Python)
Borders can show the structure of grouped rows.
-::::: {.column-page .room}
-:::: {.columns}
+:::::: {.column-page .room}
+::::: columns
::: {.column width="50%" style="padding-top:2.1em"}
-{width=600}
+{width="600"}
[Typst](examples/great-tables-oceania.pdf){target="_blank"}
:::
+
::: {.column width="50%"}
```{=html}
-
+
```
+
[HTML](examples/great-tables-oceania.HTML){target="_blank"}
:::
-::::
:::::
+::::::
## Islands (gt / R)
Font sizes and minimal borders make this table stand out.
-
-::::: {.column-page .room}
-:::: {.columns}
+:::::: {.column-page .room}
+::::: columns
::: {.column width="50%" style="padding-top:2.2em"}
-{width=500}
+{width="500"}
[Typst](examples/gt-islands.pdf){target="_blank"}
:::
+
::: {.column width="50%"}
```{=html}
-
+
```
+
[HTML](examples/gt-islands.HTML){target="_blank"}
:::
-::::
:::::
+::::::
## Solar Zenith (Great Tables / Python)
Another cool heatmap.
-::::: {.column-page .room}
-:::: {.columns}
+:::::: {.column-page .room}
+::::: columns
::: {.column width="50%" style="padding-top:1.7em"}
-{width=750}
+{width="750"}
[Typst](examples/great-tables-solar-zenith.pdf){target="_blank"}
:::
+
::: {.column width="50%"}
```{=html}
-
+
```
+
[HTML](examples/great-tables-solar-zenith.HTML){target="_blank"}
:::
-::::
:::::
-
+::::::
## Acting on Data (Pandas / Python)
Applying colors and transparency based on data.
-::::: {.column-page .room}
-:::: {.columns}
+:::::: {.column-page .room}
+::::: columns
::: {.column width="50%" style="padding-top:2.2em"}
-{width=540}
+{width="540"}
[Typst](examples/pandas-acting-on-data.pdf){target="_blank"}
:::
+
::: {.column width="50%"}
```{=html}
-
+
```
+
[HTML](examples/pandas-acting-on-data.HTML){target="_blank"}
:::
-::::
:::::
+::::::
-We can't wait to see what you do with this new feature!
+We can't wait to see what you do with this new feature!
\ No newline at end of file