Span rows or columns in the body of a grid table?

[jsx97]

From https://pandoc.org/chunkedhtml-demo/8.9-tables.html#extension-grid_tables:

A table header may contain more than one row: [...]

+---------------------+-----------------------+
| Location            | Temperature 1961-1990 |
|                     | in degree Celsius     |
|                     +-------+-------+-------+
|                     | min   | mean  | max   |
+=====================+=======+=======+=======+
| Antarctica          | -89.2 | N/A   | 19.8  |
+---------------------+-------+-------+-------+
| Earth               | -89.2 | 14    | 56.7  |
+---------------------+-------+-------+-------+

But it it possible to span rows or columns in the body of a grid table?

This is a table I have tried to convert to HTML, but the resulting HTML looks wrong:

+-----------------+----------+-------+------------------+
|                 | Lossless | Lossy | App              |
+=================+==========+=======+==================+
| For text        | PDF              | Preview          |
+-----------------+----------+-------+------------------+
| For images      | PNG      | JPEG  | Preview          |
|-----------------+----------+-------+------------------+
| For audio       | FLAC     | MP3   | QuickTime Player |
|-----------------+----------+-------+------------------+
| For video       | MOV              | QuickTime Player |
+-----------------+----------+-------+------------------+

[jgm]

What version of pandoc?

[jsx97]

pandoc --version:

3.1.13

input.md -o output.htm:

<table style="width:78%;">
    <colgroup>
        <col style="width: 25%" />
        <col style="width: 15%" />
        <col style="width: 11%" />
        <col style="width: 26%" />
    </colgroup>
    <thead>
        <tr class="header">
            <th></th>
            <th>Lossless</th>
            <th>Lossy</th>
            <th>App</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td>For text</td>
            <td colspan="2">PDF</td>
            <td>Preview</td>
        </tr>
        <tr class="even">
            <td rowspan="3"><h2 id="for-images">For images</h2>
                <h2 id="for-audio">For audio</h2>
                <p>For video</p></td>
            <td>PNG</td>
            <td>JPEG</td>
            <td>Preview</td>
        </tr>
        <tr class="odd">
            <td>FLAC</td>
            <td>MP3</td>
            <td>QuickTime Player</td>
        </tr>
        <tr class="even">
            <td colspan="2">MOV</td>
            <td>QuickTime Player</td>
        </tr>
    </tbody>
</table>

[jgm]

Let's make this a bug report. It is treating the left side as a big row-span with setext headings.
@tarleb I think you worked on this in #8202 - any ideas on why it is behaving this way?

[jgm]

Never mind - I see the problem. You need + characters on the cell corners on the left-hand side.

[jsx97]

Oops, sorry. Thanks.

[Rajabalibughio]

	Lossless	Lossy	App
For text	PDF		Preview
For images For audio For video	PNG	JPEG	Preview
	FLAC	MP3	QuickTime Player
	MOV		QuickTime Player