How to create subtables with HTML tables?

[maia-sh]

Description

I would like to create subtables with HTML tables. I tried to do this by combining the subtable and HTML table instructions, but it doesn't render as expected.

Reprex: qmd

````qmd
::: {#tbl-panel layout-ncol=2}
```{=html}
<table>
  <caption>As described in the section above, Quarto tables are great.</caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/African_Bush_Elephant.jpg/220px-African_Bush_Elephant.jpg" alt="African Bush Elephant" /></td>
      <td>Elephant</td>
    </tr>
  </tbody>
</table>
```

: First Table {#tbl-first}

```{=html}
<table>
  <caption>As described in the section above, Quarto tables are great.</caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <td><img src="https://upload.wikimedia.org/wikipedia/commons/8/82/Galago_%28Otolicnus_Galago%29.png" alt="African Bush Elephant" /></td>
      <td>Galago</td>
    </tr>
  </tbody>
</table>
```

: Second Table {#tbl-second}

Main Caption
:::

See @tbl-panel for details, especially @tbl-second and @tbl-first.
````

Reprex: HTML output

[cscheid]

Your code has captions in multiple places, eg <caption>As described in the section above, Quarto tables are great.</caption> and : Second Table, and that's confusing Quarto.

Try using the div syntax for floats instead:

---
title: hello
---

::: {#tbl-panel layout-ncol=2}

::: {#tbl-first}

```{=html}
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/African_Bush_Elephant.jpg/220px-African_Bush_Elephant.jpg" alt="African Bush Elephant" /></td>
      <td>Elephant</td>
    </tr>
  </tbody>
</table>
```

First Table

:::

::: {#tbl-second}

```{=html}
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <td><img src="https://upload.wikimedia.org/wikipedia/commons/8/82/Galago_%28Otolicnus_Galago%29.png" alt="African Bush Elephant" /></td>
      <td>Galago</td>
    </tr>
  </tbody>
</table>
```

Second Table.

:::

Main Caption
:::

See @tbl-panel for details, especially @tbl-second and @tbl-first.