HTML テーブル Markdown 変換 | thead と align も拾う GFM 変換

ブログ記事を HTML から Markdown に移植する途中で、表だけがうまく変換できず手動で | を並べ直した経験はないだろうか。本ツールは貼り付けた HTML の <table> を GitHub Flavored Markdown の表に書き出し、thead の見出し行・align 属性のアラインメント・colspan / rowspan の結合セルまで一度に処理する。

💡 このツールについて

ありがちな HTML→Markdown 変換は、<table> の見出し行を本文行と区別できず、すべての行を「| セル | セル |」で並べてしまう。区切り行が無いため GFM レンダラは見出しを認識できず、<th> で書いてあったヘッダが本文行のひとつとして表示されてしまう。

本ツールは <thead> を見出し行として切り出し、align="left|center|right" または style="text-align:..." の inline 指定から区切り行の :--- / :---: / ---: を自動で組み立てる。colspan / rowspan で結合されたセルは、行列展開のうえ左上にテキストを残し、残りを空セルで埋める。Markdown は結合セルを表現できないので、情報の欠落が起きるとオレンジ色のバナーで知らせる仕組みにしている。

DOMParser で読むのですべての処理はブラウザ内で完結し、貼り付けた HTML が外部サーバへ送られることはない。

🧐 よくある質問

Q. Excel や Numbers からコピーした表を直接貼り付けても変換できますか? A. 多くの表計算ソフトはコピー時に内部 HTML を一緒にクリップボードに載せている。試しに Ctrl+V ではなく「形式を選択して貼り付け」で HTML を取り出すか、HTML エクスポートしてから本ツールに貼ると変換できる。

Q. <th> が無く、見出し行のない表はどう扱われますか? A. 見出し行を空 (| | | |) として 1 行追加し、その下に区切り行と本文行を並べる。GFM は見出し行が必須なので、見出しがない表でも崩れずレンダリングされる。

Q. セル内に <a> や <strong> がある場合は? A. 「テキストのみ」を選ぶとリンクや装飾が剥がれてテキストになる。「タグを残す」を選ぶとインライン要素を HTML タグのまま Markdown 表に残し、GFM レンダラに解釈させる。Zenn / Qiita はインライン HTML を許容するのでそのまま動く。

Q. | を含むセルはどうなりますか? A. Markdown 表のパイプ記号と衝突するため、\| にエスケープして出力する。GFM レンダラ側で正しくセル内テキストとして復元される。

Q. 1 ページに複数の <table> がある HTML を貼ったら? A. 出現順に変換し、空行を挟んでまとめて出力する。tools.json のような複数表が混じる文書も 1 度に流し込める。

Q. <colgroup> や <caption> はサポートしていますか? A. 現状はサポートしていない。<caption> は GFM では表上の見出しとして表現する標準がなく、<colgroup> の列幅指定は Markdown の射程外なので、いずれもスキップする。

📚 豆知識

GFM の表記法は GitHub が 2014 年に発表した拡張で、もとの CommonMark には表構文自体が存在しなかった。区切り行で :--- を書くアラインメント指定は、もともと Markdown Extra (PHP 製、2004 年頃) が導入した記法を GFM が踏襲したもの。最近の MDX や Astro Content Collections もこの構文をそのまま扱える。

なお HTML 仕様には、テーブル直下に置いた <table> 以外のタグを内部に flow content として吸い込む parser fallback が存在する。本ツールが「<table> だけ抽出して tr / th / td に絞る」アプローチを取っているのは、この parser fallback で意図しない子要素が混ざるのを避けるためだ。