Markdown table alignment ignored

[jedbrown]

Describe the problem

One should be able to create tables with specified alignment, as in

Left Aligned	Centered	Right Aligned
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

| Left Aligned | Centered | Right Aligned |
| :---         | :---:    | ---:          |
| Cell 1       | Cell 2   | Cell 3        |
| Cell 4       | Cell 5   | Cell 6        |

Using MyST, it seems to be at the discretion of the theme. For example, RTD looks like this

while the PyData theme looks like

Link to your repository or website

No response

Steps to reproduce

Paste the above markdown table into a document parsed by MyST.

The version of Python you're using

3.9.6

Your operating system

Arch Linux

Versions of your packages

MyST-Parser 0.15.1

Additional context

No response

[chrisjsewell]

Heya, so basically the intention in the markdown parser, is to set a style on each cell: you can see if you put this table into https://markdown-it.github.io, you'll get e.g.

<table>
<thead>
<tr>
<th style="text-align:left">a</th>
<th style="text-align:center">b</th>
<th style="text-align:right">c</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">1</td>
<td style="text-align:center">2</td>
<td style="text-align:right">3</td>
</tr>
</tbody>
</table>

However, with docutils/sphinx there is no way to propagate a style into the HTML, so currently it is setting these as classes

e.g. the same output in sphinx is

<table class="colwidths-auto table">
<thead>
<tr class="row-odd">
<th class="text-align:left head"><p>a</p></th>
<th class="text-align:center head"><p>b</p></th>
<th class="text-align:right head"><p>c</p></th>
</tr>
</thead>
<tbody>
<tr class="row-even">
<td class="text-align:left"><p>1</p></td>
<td class="text-align:center"><p>2</p></td>
<td class="text-align:right"><p>3</p></td>
</tr>
</tbody>
</table>

There are actually two things not ideal with this table (a) we don't need the paragraph tags (I checked with RST and that also outputs <p>), and (b) the text-align are classes rather than styles

If you want to fix this with the current myst-parser then, the way would be to add some custom CSS to your project:

.text-align\:left, text-align\:left > p {
  text-align: left
}
.text-align\:center, text-align\:center > p {
  text-align: center
}
.text-align\:center, text-align\:right > p {
  text-align: right
}

A minimal fix here would be to at least document this workaround, probably improve the naming of the CSS classes, and maybe reach out to some of the main themes to include it in their CSS

cc @choldgraf (sphinx-book-theme), @pradyunsg (furo) what is your preference for the class names

[choldgraf]

Good point about documenting the CSS classes that are output. @jedbrown what Sphinx theme are you using?

[jedbrown]

Thanks. This workaround seems adequate. I currently have sites on PyData and RTD themes, though the RTD site should migrate to a newer/mobile-friendly theme (likely PyData or Book). (I notice that Book tables are almost confusingly minimalist.)

[pradyunsg]

I vote for text-left, text-right, text-center. :)

[choldgraf]

This was surfaced in Furo recently as well (pradyunsg/furo#279).

From that conversation, @pradyunsg suggested that we re-use the CSS classes that Sphinx uses in other situations where it left/right aligns things:

Can the parser instead use align-center / align-left / align-right class then, like all the other content that can be aligned (eg: images, figures)? Or use some sort of text-center / text-left / text-right class?

EDIT: looks like @pradyunsg beat me to it :-)

[pradyunsg]

^>^

[choldgraf]

Another way to think about it is to piggy-back on what other common frameworks use. Right now Boostrap uses text-left, text-right, text-center, though v5 is going to use text-start and text-end instead

v4 Bootstrap: https://getbootstrap.com/docs/4.0/utilities/text/
v5 Bootstrap: https://getbootstrap.com/docs/5.0/utilities/text/

[ianhi]

A related issue (I think) is that when I use :align: center in a table directive it doesn't seem to have any effect on the generated HTML (so the custom css workaround doesn't work).

Following the table directive example I found here (https://myst-parser.readthedocs.io/en/latest/syntax/optional.html?highlight=center#code-fences-using-colons)
I would expect the below to generated a centered table
Top line has triple backticks followed by {table} (but I can't that to render properly in GitHub issue.

:align: center

|loooooooong | small | small|
|--- | --- | --- |
|small | loooooooooooong | loooooooooooong|

but with the sphinx-book-theme it generates this:

<table class="colwidths-auto table">
<thead>
<tr class="row-odd"><th class="head"><p>loooooooong</p></th>
<th class="head"><p>small</p></th>
<th class="head"><p>small</p></th>
</tr>
</thead>
<tbody>
<tr class="row-even"><td><p>small</p></td>
<td><p>loooooooooooong</p></td>
<td><p>loooooooooooong</p></td>
</tr>
</tbody>
</table>

[chrisjsewell]

A related issue (I think) is that when I use :align: center in a table directive it doesn't seem to have any effect on the generated HTML (so the custom css workaround doesn't work).

This is because of pydata/pydata-sphinx-theme#524
Note, a workaround would be to add :class: align-center