Markdown の表を HTML の表へ

パイプ表は CommonMark の一部ではありません。GitHub Flavoured Markdown 由来なので、変換する側がそれを自分で有効にする必要があります —— していないものもあります。ここではしています。

必要なものは三つ。見出しの行、その下のハイフンの行、そして内容の行が少なくとも一行。三つのどれかが欠けると、出てくるのは段落です。

見出しのセルは太字の <td> ではなく <th scope="col"> として出てきます。スクリーンリーダーが「Qty、12」と読み上げられるのは、ひとえにこの属性があるからです。これがないと、どの列のものか分からない数字が一つ読まれるだけになります。

コストはゼロで、それが「表」と「数字の並び」の分かれ目になります。div で組んだ見た目だけの表ではこれを表現できません —— そう組むべきでない一番強い理由です。

ハイフンの行に置いたコロンが、列ごとの配置を決めます。左にコロンで左寄せ、両側で中央、右で右寄せ —— 数字の列に欲しいのは最後のものです。

HTML に出てくるのはインラインスタイルではなくクラスです。align-left、align-center、align-right の三つ。このサイトの出力ではインラインスタイルを一切残していません。style 属性は CSS を注入するときの入口そのものだからです。

つまりページ全体モードでは配置がそのまま効いています —— <head> のスタイルシートがこの三つのクラスを定義しています。フラグメントモードではそれをあなたの CSS に委ねます。それがフラグメントモードの意味です。一行のルールを三つ書けば、サイトと戦うのではなくサイトに馴染みます。

原因は三つ、よく起きる順に。

セルのなかではインラインの Markdown が効きます。太字、斜体、インラインコード、リンク。ブロックレベルのものは効きません —— リストも段落もフェンス付きコードブロックも入りません。これは表の構文そのものの制約で、この変換ツールの制約ではありません。

セル内で改行するには、<br> を手で書く必要があります。Markdown のなかの生の HTML はエスケープせずそのまま通しているので機能しますし、出るときにはほかと同じくサニタイズされます。