Merge pull request #11347 from quarto-dev/fix/table-cap-bottom-odd-even

src/resources/filters/quarto-post/html.lua

@@ -42,8 +42,9 @@ function render_html_fixups()
       -- this requires bootstrap CSS
       if quarto.doc.crossref.cap_location(tbl) == "top" then
         tbl.classes:insert("caption-top")
-        return tbl
       end
+
+      return tbl
     end,
     Figure = function(fig)
       if #fig.content ~= 1 then

tests/docs/playwright/html/tables/markdown-tables-cap-bottom.qmd

@@ -0,0 +1,47 @@
+---
+title: Markdown Tables
+tbl-cap-location: bottom
+---
+
+They should be styled by Quarto 
+
+## labelled {#labelled}
+
+| Col1 | Col2 | Col3 |
+|------|------|------|
+| A    | B    | C    |
+| E    | F    | G    |
+| A    | G    | G    |
+
+: My Caption {#tbl-letters}
+
+See @tbl-letters.
+
+## non-labelled table {#non-labelled}
+
+| Col1 | Col2 | Col3 |
+|------|------|------|
+| A    | B    | C    |
+| E    | F    | G    |
+
+: A non-labelled table with a caption
+
+## Computational table {#computation}
+
+<!-- This is equivalent to intermediate markdown from a `knitr::kable()` output with `echo: false` -->
+
+:::: {.cell}
+::: {.cell-output-display}
+
+Table: A caption
+
+| Sepal.Length | Sepal.Width | Petal.Length | Petal.Width | Species |
+|-------------:|------------:|-------------:|------------:|:--------|
+|          5.1 |         3.5 |          1.4 |         0.2 | setosa  |
+|          4.9 |         3.0 |          1.4 |         0.2 | setosa  |
+|          4.7 |         3.2 |          1.3 |         0.2 | setosa  |
+|          4.6 |         3.1 |          1.5 |         0.2 | setosa  |
+|          5.0 |         3.6 |          1.4 |         0.2 | setosa  |
+|          5.4 |         3.9 |          1.7 |         0.4 | setosa  |
+:::
+::::

tests/docs/playwright/html/markdown-tables.qmd → tests/docs/playwright/html/tables/markdown-tables.qmd

@@ -1,9 +1,12 @@
 ---
 title: Markdown Tables
+tbl-cap-location: bottom
 ---
 
 They should be styled by Quarto 
 
+## labelled {#labelled}
+
 | Col1 | Col2 | Col3 |
 |------|------|------|
 | A    | B    | C    |
@@ -14,12 +17,24 @@ They should be styled by Quarto
 
 See @tbl-letters.
 
-## Computational table
+## non-labelled table {#non-labelled}
+
+| Col1 | Col2 | Col3 |
+|------|------|------|
+| A    | B    | C    |
+| E    | F    | G    |
+
+: A non-labelled table with a caption
+
+## Computational table {#computation}
 
 <!-- This is equivalent to intermediate markdown from a `knitr::kable()` output with `echo: false` -->
 
-:::: cell
-::: cell-output-display
+:::: {.cell}
+::: {.cell-output-display}
+
+Table: A caption
+
 | Sepal.Length | Sepal.Width | Petal.Length | Petal.Width | Species |
 |-------------:|------------:|-------------:|------------:|:--------|
 |          5.1 |         3.5 |          1.4 |         0.2 | setosa  |

tests/docs/smoke-all/table/appearance-bottom-cap.qmd

@@ -0,0 +1,96 @@
+---
+title: Table Appearance
+tbl-cap-location: bottom
+format: html
+_quarto:
+  tests: 
+    html:
+      ensureHtmlElements:
+        - ['table tbody tr.odd', 'table tbody tr.even']
+        - ['table tbody tr:not(.odd):not(.even)'] # All table should have .odd .even class for styling 
+---
+
+### Md table (w/caption) {#captioned}
+
+A short sentence that makes a paragraph.
+
+| Default | Left | Right | Center |
+|---------|:-----|------:|:------:|
+| 12      | 12   |    12 |   12   |
+| 123     | 123  |   123 |  123   |
+| 1       | 1    |     1 |   1    |
+
+: Demonstration of pipe table syntax
+
+### fancy table
+
+A short sentence that makes a paragraph.
+
+| fruit  | price  |
+|--------|--------|
+| apple  | 2.05   |
+| pear   | 1.37   |
+| orange | 3.09   |
+
+: Fruit prices {.striped .hover}
+
+
+### xref table
+
+A short sentence that makes a paragraph.
+
+| Col1 | Col2 | Col3 |
+|------|------|------|
+| A    | B    | C    |
+| E    | F    | G    |
+| A    | G    | G    |
+
+: My Caption {#tbl-letters}
+
+See @tbl-letters.
+
+### subtables
+
+A short sentence that makes a paragraph.
+
+::: {#tbl-panel layout-ncol=2}
+| Col1 | Col2 | Col3 |
+|------|------|------|
+| A    | B    | C    |
+| E    | F    | G    |
+| A    | G    | G    |
+
+: First Table {#tbl-first}
+
+| Col1 | Col2 | Col3 |
+|------|------|------|
+| A    | B    | C    |
+| E    | F    | G    |
+| A    | G    | G    |
+
+: Second Table {#tbl-second}
+
+Main Caption
+:::
+
+See @tbl-panel for details, especially @tbl-second.
+
+### HTML Table
+
+```{=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>First Column</td>
+    <td>Second Column</td>
+    </tr>
+  </tbody>
+</table>
+```

tests/docs/smoke-all/table/appearance.qmd

@@ -1,6 +1,12 @@
 ---
 title: Table Appearance
 format: html
+_quarto:
+  tests: 
+    html:
+      ensureHtmlElements:
+        - ['table tbody tr.odd', 'table tbody tr.even'] 
+        - ['table tbody tr:not(.odd):not(.even)'] # All table should have .odd .even class for styling 
 ---
 
 ### With header
@@ -22,7 +28,7 @@ left 1       right 1
 left 2       right 2
 -----------  ------------
 
-### Md table (w/caption)
+### Md table (w/caption) {#captioned}
 
 A short sentence that makes a paragraph.
 
@@ -85,4 +91,24 @@ A short sentence that makes a paragraph.
 Main Caption
 :::
 
-See @tbl-panel for details, especially @tbl-second.
+See @tbl-panel for details, especially @tbl-second.
+
+### HTML Table
+
+```{=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>First Column</td>
+    <td>Second Column</td>
+    </tr>
+  </tbody>
+</table>
+```

tests/integration/playwright/tests/html-tables.spec.ts

@@ -1,10 +1,17 @@
 import { test, expect } from '@playwright/test';
 
-test('Markdown tables are styled correctly', async ({ page }) => {
-await page.goto('html/markdown-tables.html');
-await expect(page.getByRole('figure', { name: 'Table 1: My Caption' }).locator('table')).toHaveScreenshot()
-await expect(page.locator('a.quarto-xref[href="#tbl-letters"]')).toContainText('Table 1');
+async function testTables(page, path: string) {
+  await page.goto(`html/tables/${path}`);
+  await expect(page.locator('#labelled table')).toHaveScreenshot();
+  await expect(page.locator('a.quarto-xref[href="#tbl-letters"]')).toContainText('Table 1');
+  await expect(page.locator('#non-labelled table')).toHaveScreenshot();
+  await expect(page.locator('#computation table')).toHaveScreenshot();
+}
 
-await expect(page.locator('#computational-table table')).toHaveScreenshot()
+test('Markdown tables are styled correctly', async ({ page }) => {
+  // Test with default caption position
+  await testTables(page, 'markdown-tables.html');
 
-});
+  // Test with bottom caption
+  await testTables(page, 'markdown-tables-cap-bottom.html');
+});