HTMLテーブルをMarkdownの表に変換
左側にHTMLを貼り付けると、右側にGitHub Flavored Markdown形式の表がそのまま出力されます。変換はすべてブラウザ内で行われ、内容がアップロードされることはありません。
HTMLの表をMarkdownに変換するには？
表のHTMLを変換ツールに貼り付けると、各<tr>がパイプ区切りの1行に書き換えられ、先頭行が見出し行に繰り上がり、その下に --- の区切り行が挿入されます。セルの文字はそのまま残り、タグは取り除かれ、本文中のパイプ記号は自動でエスケープされるため列構造が崩れません。
<!-- HTML入力 -->
<table>
<tr><th>名前</th><th>年齢</th></tr>
<tr><td>田中</td><td>25</td></tr>
</table>
<!-- Markdown出力 -->
| 名前 | 年齢 |
| --- | --- |
| 田中 | 25 |見出しセルがMarkdownの1行目になり、ハイフンの行が列を定義し、残りの<tr>がそれぞれパイプ区切りのデータ行になります。
HTMLテーブルをMarkdownの表に変換を使う
HTML入力
Markdown出力
プレビュー
HTMLの表がMarkdownにどう対応するか
Markdownの表はHTMLの表よりもずっと単純です。1行が1レコード、セルの区切りはパイプ、列の宣言はハイフンの行だけです。ほとんどの変換は情報を失いませんが、HTML側の一部の機能にはMarkdownに対応する書き方がありません。このツールがそれぞれをどう扱うかを順に説明します。
見出しセルと thead / tbody
<th>が並んだ行がMarkdownの見出し行になります。行は文書順に読み取られるため、<thead>や<tbody>といったラッパー要素の有無は出力結果に影響しません。
<table>
<thead>
<tr><th>商品</th><th>価格</th></tr>
</thead>
<tbody>
<tr><td>キーボード</td><td>7,900円</td></tr>
</tbody>
</table>| 商品 | 価格 | の見出し行に続いて | --- | --- | の区切り行が入り、キーボードのデータ行が1行出力されます。
見出し行がない表
Markdownの表には見出しが必須のため、最初の<tr>は<td>だけで構成されていても見出しに繰り上げられます。その行が実データの場合は、変換前にHTML側へ<th>の行を足してください。
<table>
<tr><td>キーボード</td><td>7,900円</td></tr>
<tr><td>マウス</td><td>2,900円</td></tr>
</table>「キーボード」と「7,900円」が列見出しになり、データとして残るのはマウスの行だけになります。
セル内のパイプ記号
エスケープされていないパイプは、セルを2列に分割してしまいます。セルのテキストに含まれるパイプにはバックスラッシュが自動で付くため、シェルコマンドや正規表現もそのまま変換できます。
<td>cat access.log | grep 500</td>| cat access.log \| grep 500 | となり、パイプは列を増やさず記号としてそのまま表示されます。
colspan と rowspan
Markdownにはセルの結合がありません。列をまたぐ行はセル数が足りなくなるため、いちばん広い行に合わせて空セルが補われます。表としては正しいままですが、値の配置は手作業で見直すことをおすすめします。
<table>
<tr><th>項目</th><th>数量</th><th>合計</th></tr>
<tr><td colspan="2">小計</td><td>10,800円</td></tr>
</table>2行目は | 小計 | 10,800円 | | と3列分になり、結合は末尾の空セルとして平坦化されます。
セル内のリンク・太字・画像
セルはテキスト内容だけを使って変換されるため、内側のHTMLは平坦化されます。リンクや強調が重要な場合は、変換後にMarkdownの記法を書き足してください。
<td><a href="https://example.com">ドキュメント</a></td>
<td><strong>売り切れ</strong></td>| ドキュメント | 売り切れ | となり、aタグと<strong>は取り除かれます。URLはMarkdown側には引き継がれません。
複数の表をまとめて変換する
入力に含まれるすべての<table>が文書順に変換され、空行で区切られて出力されます。表を1つずつ処理せず、ページ全体のHTMLをそのまま貼り付けられます。
<table><tr><th>Q1</th></tr><tr><td>12%</td></tr></table>
<table><tr><th>Q2</th></tr><tr><td>18%</td></tr></table>Q1とQ2に対応する独立したMarkdownの表が2つ、空行で区切られて出力されます。
Markdownの表が実際に表示される場所
表はCommonMarkの中核仕様には含まれておらず、GitHub Flavored Markdownの拡張です。そのため、このツールの出力がきれいに表示されるサービスと、パイプ記号がそのまま見えてしまうサービスがあります。
| プラットフォーム | 対応状況 | 備考 |
|---|---|---|
| GitHub / GitLab | 対応 | README、Issue、PR、コメント、WikiでGFMの表が表示されます。 |
| Qiita / Zenn | 対応 | どちらもGFM準拠の表に対応しており、貼り付けるだけで表示されます。 |
| はてなブログ | 対応 | Markdown記法モードであれば、パイプ表がそのまま表として表示されます。 |
| Obsidian | 対応 | 閲覧ビューでもライブプレビューでも表示され、列の寄せ指定も使えます。 |
| VS Code | 対応 | 標準搭載のMarkdownプレビューが、設定なしでGFMの表に対応しています。 |
| Notion | 一部 | Markdownの表を貼り付けるとNotionのテーブルブロックに変換され、パイプ記法は残りません。 |
| Discord | 非対応 | 表の記法がなくパイプがそのまま表示されます。コードブロックに入れれば列は揃います。 |
| Slack | 非対応 | 表の記法はありません。コードブロックに貼るか、スニペットとして添付してください。 |
HTMLの表をMarkdownに変換する手順
HTMLを貼り付ける
左側のHTMLエディターに表のコードを貼り付けます。<table>要素1つでも、ページ全体のHTMLでも構いません。変換されるのは表の部分だけです。
ファイルから読み込む
貼り付ける代わりに、アップロードボタンで .html、.htm、.txt ファイルを端末から直接読み込むこともできます。
結果を確認する
入力を編集するたびにMarkdownが自動で生成し直されます。下のプレビューと見比べて、列がずれていないか確認してください。
コピーまたはダウンロードする
Markdownをクリップボードにコピーするか、.mdファイルとして書き出してリポジトリにそのまま追加できます。
よくある質問
HTMLの表をMarkdownに変換するには？
このページのエディターにHTMLを貼り付けるだけです。入力に含まれるすべての<table>要素が解析され、各行がパイプ区切りの1行になり、見出しの下にハイフンの区切り行が追加され、セル内のパイプ記号はエスケープされます。Markdownはその場で生成され、コピーも .mdファイルとしての書き出しも可能です。
MarkdownファイルにHTMLの表をそのまま書いてもいいですか？
GitHubや多くの静的サイトジェネレーターでは、Markdownファイル内のHTMLもそのまま表示されます。ただしプレーンテキストで読む場面、HTMLをサニタイズするエディター、MarkdownからPDFに変換する処理では崩れます。ネイティブのパイプ表のほうが記述が短く、Gitでの差分もきれいで、ソースのまま読めるため、変換しておく価値は十分にあります。
colspanやrowspanは変換するとどうなりますか？
Markdownの表はセルを結合できないため、結合は平坦化されます。2列をまたぐ行は他の行よりセル数が少なくなるので、すべての行が同じ幅になるよう空のセルが補われます。Markdownとしては正しいままですが、結合された見出しや小計の行は公開前に自分で確認してください。
ExcelやGoogleスプレッドシートの表をMarkdownにできますか？
できます。Excel、Numbers、Googleスプレッドシートで範囲をコピーすると、クリップボードにはHTMLの表が入っているため、そのままHTMLエディターに貼り付けられます。スプレッドシート側の書式は捨てられ、先頭行を見出しにしたプレーンなMarkdownの表が得られます。
セル内のリンクや太字は残りますか？
残りません。セルはテキスト内容だけを使って変換されるため、aタグはリンク文字列に、strong要素はただの文字になります。出力が予測しやすく、どこに貼っても安全になるためです。リンクが必要な場合は、変換後にそのセルへMarkdownのリンク記法を書き足してください。
Markdownの表が表示されないのはなぜですか？
よくある原因は3つです。見出しのすぐ下にハイフンの区切り行がない、DiscordやSlackのように表自体に対応していないサービスを使っている、セル内のエスケープされていないパイプが列を1つ増やしてしまっている、のいずれかです。厳密なパーサーでは、表の直前に空行を入れておくと確実です。
ソースのパイプは縦に揃える必要がありますか？
必要ありません。パーサーが見ているのは1行あたりのパイプの数だけで、見た目の位置は関係しないため、| 名前 | 年齢 | と |名前|年齢| は同じように表示されます。桁を揃えるのは、後からソースを編集する人が読みやすいようにするためだけの配慮です。
表のセルの中で改行するには？
Markdownの表の行は本物の改行を含められないため、複数行にわたるHTMLのセルは変換時に半角スペースでつないだ1行にまとめられます。変換後に見た目の改行を入れたい場合は、そのセルに<br>タグを書けば、GFM互換のレンダラーはすべて改行として扱います。
複数の表を一度に変換できますか？
できます。HTMLはどれだけ貼り付けても構いません。入力に含まれるすべての<table>要素が文書順に変換され、生成されたMarkdownの表どうしは空行で区切られます。ドキュメント1ページ分の表をまとめて処理できます。
貼り付けたHTMLはサーバーに送信されますか？
送信されません。解析と変換はブラウザ内蔵のDOMパーサーを使って端末内だけで行われるため、内容が外部に出ることはありません。社内資料や未公開のドキュメントでも安心して使えますし、ページを開いた後はオフラインでも動作します。