Tables with a column of th elements

[matklad]

As per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th, th element can be used to mark both a row and a column of cells, to create a 2D table:

<table>
  <caption>
    Alien football stars
  </caption>
  <tr>
    <th scope="col">Player</th>
    <th scope="col">Gloobles</th>
    <th scope="col">Za'taak</th>
  </tr>
  <tr>
    <th scope="row">TR-7</th>
    <td>7</td>
    <td>4,569</td>
  </tr>
  <tr>
    <th scope="row">Khiresh Odo</th>
    <td>7</td>
    <td>7,223</td>
  </tr>
  <tr>
    <th scope="row">Mia Oolong</th>
    <td>9</td>
    <td>6,219</td>
  </tr>
</table>

As far as I understand, Djot's current syntax doesn't allow expressing this, but it feels like a common pattern! At least, I need such a table right now :)

[bpj]

In MediaWiki tables you can replace the pipe to the left with a bang to get a header cell anywhere, which is nice. Applied to djot it would look something like

|:---|:---|:---|:---|:---
! th ! th ! th ! th ! th
|:---|:--:|---:|:---|:---
! th | td | td ! th | td
! th | td | td ! th | td
! th | td | td ! th | td
|:---|:---|:---|:---|:---
! th ! th ! th ! th ! th
! th | td | td ! th | td
! th | td | td ! th | td
! th ! th ! th ! th ! th

Pros:

1. You can have header cells anywhere.
2. The specification of alignments becomes wholly decoupled from the specification of header rows/cells.

Some minor cons:

3. A space must be required between the cell separating ! or | and the following text to distinguish between these:

   foo ! [a link in the next cell](bar)
   
   foo ![an image in the same cell](bar)

4. Literal bangs within cells would have to be escaped as \! but I can’t see that as a problem since this is already the case with literal pipes inside cells.

If that is too radical an alternative would be to replace pipes with bangs in the separator line to indicate a head (stub) column. That is less flexible, but it would probably cover most real situation, at the price of losing the chance to decouple alignment specification from header cell specification.

Meanwhile you can use a class on the table, CSS compound selectors and the :first-child pseudo-class if you are content with getting the visual effect, or you could use XSLT or other HTML massaging tools (in my case that would be Mojo::DOM).