Add TOP, BOTTOM align as option for formatting Markdown table cells

[jimkohl]

Hello, thank you for your work on this it saved me a bunch of time.

I'm creating a table w rows of multiple cells containing lists of items.
Each item in the list is separated by
.

The length of these cell lists varies across cells,
while the largest list cell obviously consumes the most space,
adjacent smaller cells (lists) are aligned vertically as centered, which isn't great visually.
I would prefer being able to align to TOP.

I realize that Markdown doesn't support such a concept,
wondering if there any ways to style a column as Align.TOP, somehow getting renderer to add
style="vertical-align: top;" somehow into the html.

Considering the various flavors of markdown, I guess this wouldn't work.
Any ideas?

[thombashi]

Thank you for your feedback.

As far as I know, set vertical-align to a Markdown table could not possible with basic Markdown syntax only.
As you described, you would need to set styles via Markdown-extensions or HTML tag directory. However, that depends on Markdown processors. GFM ignore style tags.

HTML table might be a good choice to apply vertical-align to cells (GFM and most of the Markdown flavors accepts HTML tables).
pytablewriter has a table writer class for HTML (HtmlTableWriter).
I could possible to add vertical-align feature to HtmlTableWriter (and Style class) in the future.

Though, this may not what you trying to achieve to do.
What do you think about this?

[jimkohl]

That sounds like a good add to html table which I will try when you do it. I wish the md folks would progress a bit tho!

…

Sent from my iPhone

On May 12, 2019, at 1:05 PM, Tsuyoshi Hombashi ***@***.***> wrote: Thank you for your feedback. As far as I know, set vertical-align to a Markdown table could not possible with basic Markdown syntax only. As you described, you would need to set styles via Markdown-extensions or HTML tag directory. However, that depends on Markdown processors. GFM ignore style tags. HTML table might be a good choice to apply vertical-align to cells (GFM and most of the Markdown flavors accepts HTML tables). pytablewriter has a table writer class for HTML (HtmlTableWriter). I could possible to add vertical-align feature to HtmlTableWriter (and Style class) in the future. Though, this may not what you trying to achieve to do. What do you think about this? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[thombashi]

@jimkohl
You can use vertical_align style with HtmlTableWriter of pytablewriter 0.51.0 or later.

Example

import pytablewriter as ptw
from pytablewriter.style import Style

writer = ptw.HtmlTableWriter(
    table_name="vertical-align",
    headers=[
        "",
        "top",
        "middle",
        "bottom",
        "top-right",
        "middle-right",
        "bottom-right",
    ],
    value_matrix=[
        ["te\nst", "x", "x", "x", "x", "x", "x"],
    ],
    column_styles=[
        Style(vertical_align="baseline"),
        Style(vertical_align="top"),
        Style(vertical_align="middle"),
        Style(vertical_align="bottom"),
        Style(align="right", vertical_align="top"),
        Style(align="right", vertical_align="middle"),
        Style(align="right", vertical_align="bottom"),
    ],
)
writer.write_table()

Output:

<table id="verticalalign">
    <caption>vertical-align</caption>
    <thead>
        <tr>
            <th></th>
            <th>top</th>
            <th>middle</th>
            <th>bottom</th>
            <th>top-right</th>
            <th>middle-right</th>
            <th>bottom-right</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td align="left">te<br>st</td>
            <td align="left" valign="top">x</td>
            <td align="left" valign="middle">x</td>
            <td align="left" valign="bottom">x</td>
            <td align="right" valign="top">x</td>
            <td align="right" valign="middle">x</td>
            <td align="right" valign="bottom">x</td>
        </tr>
    </tbody>
</table>

The output will be rendered by GitHub as follows:

vertical-align

	top	middle	bottom	top-right	middle-right	bottom-right
te st	x	x	x	x	x	x