HTML テーブルを Markdown 表に変換する
HTML の <table> を README や GitHub の Issue、Notion 用に Markdown の表として使いたいときは、FormatArc の HTML to Markdown 変換ツールに HTML を貼り付けて結果をコピーするだけです。処理はすべてブラウザ内で完結し、データは外部に送信されません。
- HTML to Markdown ツールを開く
- HTML を貼り付ける(
<table>要素全体、またはそれを含むページの一部) - 「実行」を押し、出力された GitHub Flavored Markdown の表をコピーする
以下では、この変換が具体的に何をするのか、表が崩れないようにどう処理するのか、そしてどこに限界があるのかを説明します。


HTML テーブルの変換例(変換前と変換後)
次のようなシンプルな HTML テーブルがあるとします。
<table>
<tr><th>名前</th><th>役割</th><th>チーム</th></tr>
<tr><td>葵</td><td>エンジニア</td><td>基盤</td></tr>
<tr><td>蓮</td><td>デザイナー</td><td>Web</td></tr>
</table>
これを変換ツールに貼り付けると、GitHub Flavored Markdown(GFM)の表になります。
| 名前 | 役割 | チーム |
| --- | --- | --- |
| 葵 | エンジニア | 基盤 |
| 蓮 | デザイナー | Web |
先頭の <tr> がヘッダ行になり、区切り線(---)は自動生成されます。出力は左寄せの GFM なので、GitHub・GitLab・Notion・多くの Markdown エディタでそのまま正しく表示されます。
崩れやすい表を自動で処理
HTML から Markdown 表への変換で難しいのは、うまくいくケースではなく、セルの中身が表をこっそり壊すケースです。よくある 2 つのパターンは自動的に処理され、行が崩れないようになっています。
セルにパイプ(|)が含まれる場合
Markdown では | が列の区切り文字なので、セル内にそのまま | があると行が意図しない位置で割れてしまいます。変換ツールはこれをエスケープします。
<td>a | b</td>
は出力で a \| b になり、列数が崩れません。
セルに改行が含まれる場合
セル内に改行があると、本来はそこで行が分割されて表が壊れます。セル内の改行は半角スペース 1 つにまとめられ、各行が 1 行に収まります。
行ごとにセル数が違う場合
ヘッダより多い、あるいは少ないセル数の行があっても、変換ツールはすべての行をヘッダの列数に揃えます。余分なセルは切り捨て、足りない行は空セルで補います。これで列ずれのない正しい表になります。
フォーマット自体のルールは Markdown 表の書き方 と GFM テーブル チートシート を参照してください。
Web ページの表をコピーして変換する
HTML ソースが手元になく、ページ上に表示された表を見ているだけ、という場面も多いはずです。Markdown にする確実な方法は 2 つあります。
HTML をコピーする
ブラウザで表を右クリックして「検証」を選び、DevTools 上の <table> 要素を右クリックして「コピー」「要素をコピー」を選びます。その HTML を HTML to Markdown ツールに貼り付けて変換します。
セルをコピーする
表示されているセルを選択してコピーする(またはスプレッドシートからコピーする)と、HTML ではなくタブ区切りのテキストになるのが普通です。その場合はタブ区切り・カンマ区切りの行を読み取る CSV to Markdown ツールが適しています。同じやり方は Excel・Google スプレッドシートを Markdown にで詳しく扱っています。
つまり、実際の HTML は HTML to Markdown に、コピーしたセルは CSV to Markdown に貼り付けるのが使い分けの目安です。
結果がおかしいとき
変換ツールは一般的な HTML テーブルを対象にしています。一部の構造は Markdown 表に素直には対応できません。Markdown の表自体がそれらをサポートしていないためです。
- ヘッダ行がない場合 — 先頭の
<tr>が必ずヘッダとして扱われます。ヘッダのない表では最初のデータ行がヘッダになるので、必要なら出力側でヘッダを足してください。 - 結合セル(
rowspan/colspan) — Markdown の表に結合セルはないため、結合は展開されません。結合セルに依存した表は完全には再現できないので、先に結合を解除してください。 - ネストした表 — セルの中の表は行の走査に混ざってしまい、きれいには変換できません。内側の表は別に変換してください。
- セル内のリンクや太字 — セルの中身は平文(テキスト)として扱われるため、装飾やリンクはテキストに平坦化されます。必要なら出力側で Markdown のリンクを付け直してください。
- 列の揃え — 出力は左寄せです。中央寄せや右寄せにしたい場合は、区切り行(例:
:---:)を後から書き換えてください。詳しくは Markdown 表の書き方を参照してください。
表が崩れて出てきたときは、ほぼ確実に上記のどれか(結合セルかネストした表)が原因です。表だけでなく HTML 文書全体(見出し・リスト・リンクなど)を変換したい場合は、より広い HTML to Markdown 変換ガイドをご覧ください。
ブラウザ完結・アップロードなし
変換は JavaScript でブラウザ内で実行されます。貼り付けた HTML はサーバーに送信も、ログ記録も、保存もされません。表に社内データ(顧客の行、価格、非公開ダッシュボードの内容など)が含まれるときに、これは重要です。多くのオンライン変換ツールは貼り付けた内容をアップロードしますが、FormatArc は送信しません。この違いがなぜ重要かは オンライン変換ツールは安全かで解説しています。
よくある質問
HTML テーブルを Markdown 表に変換するには?
HTML(<table> 要素、またはそれを含む一部)を FormatArc の HTML to Markdown ツールに貼り付けて「実行」を押します。先頭行がヘッダになり、コピーできる GitHub Flavored Markdown の表が得られます。
変換した Markdown の表が崩れるのはなぜですか?
最も多い原因は、Markdown の表で表現できない結合セル(rowspan / colspan)とネストした表です。セル内のパイプや改行は自動処理されるので、列がずれているときは結合セルかネストした表を探して、先に解除してください。
セル内のリンクや太字は残りますか?
残りません。セルの中身は平文として変換されるため、リンクや装飾はテキストになります。必要なら出力側で Markdown のリンクを付け直してください。
HTML テーブルにヘッダ行がない場合はどうなりますか?
先頭の <tr> が必ずヘッダとして扱われます。ヘッダのない表では最初のデータ行がヘッダになるので、出力側で調整してください。
Web サイトからコピーした表も変換できますか?
できます。DevTools で <table> 要素を「要素をコピー」し、その HTML を HTML to Markdownに貼り付けます。表示セルをコピーした場合は、タブ区切りの行を読み取る CSV to Markdownに貼り付けてください。
まとめ
- HTML の
<table>を HTML to Markdownに貼り付けると GitHub Flavored Markdown の表になる - パイプはエスケープされ、セル内の改行はスペースに、セル数の違う行は揃えられるので表が崩れない
- 結合セル・ネストした表・セル内リンクは Markdown 表に対応できないため、先に解除する
- スプレッドシートや Web ページからコピーしたセルは CSV to Markdownがタブ区切りで読み取る
- すべてブラウザ内で完結し、アップロードはなし