2

I would like to use HTML tables in Quarto, but I would like to prevent it using the full page width. Here is a reproducible example:

---
title: "HTML tables in Quarto"
format: html
---

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Table 1

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Table 2 {tbl-colwidths="[75,25]"}

Output:

enter image description here

As we can see, table 1 is normal and you can see it takes the full page width. Table 2 has tbl-colwdiths options, but this doesn't make the table smaller in width and is also the full page width. So I was wondering if anyone knows how to prevent the HTML table to use the full page width in Quarto?

Quinten
  • 35,235
  • 5
  • 20
  • 53

2 Answers2

3

Maybe use the css grid system:

---
title: "HTML tables in Quarto"
format: html
---

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Table 1

::: {.grid}

::: {.g-col-7}

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Table 2 

:::
:::

enter image description here

Edit: If you want to center, you could utilize the default of twelve columns in the css grid, e.g.

::: {.grid}

::: {.g-col-2}
:::


::: {.g-col-8}

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Table 2 

:::

::: {.g-col-2}
:::

:::
Julian
  • 6,586
  • 2
  • 9
  • 33
2

One possible option to use .columns div to get column layout

---
title: "HTML tables in Quarto"
format: html
engine: knitr
---


:::: {.columns}
::: {.column width="70%"}

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Table 1

:::
::::


```{css, echo=FALSE}
.center-table table {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
```

::: {.center-table}

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Table 2

:::

enter image description here

shafee
  • 15,566
  • 3
  • 19
  • 47
  • Hi @shafee, Do you know how to center the second table? Thanks! – Quinten Feb 06 '23 at 18:14
  • 1
    @Quinten, just want to add, [Bootstrap's css grid system](https://getbootstrap.com/docs/5.1/layout/css-grid/) (answered by @Julian) is better option actually, for creating both simple and complex layouts. If you go through the link attached with this comment, you will understand what I am saying. – shafee Feb 06 '23 at 18:35
  • The centering part is, however, not very elegant for the css grid's in my opinion (see my edit). It does the trick but involves two empty colums of equal size. – Julian Feb 06 '23 at 18:53