Markdownの表の書き方
Markdownの表は、パイプ（|）で列を区切って書きます。
2行目を区切り行にすると、1行目がヘッダとして扱われます。
たとえば、名前と説明の2列なら、次のような形です。
| 名前 | 説明 |
| --- | --- |
| 山田 | 東京 |
| 佐藤 | 大阪 |
区切り行の両端にコロンを付けると、列の配置も指定できます。
:--- は左寄せ、:---: は中央寄せ、
--- は標準の左寄せ、---: は右寄せです。
このツールでは既存のMarkdown表を読み取り、列幅を揃えた表として出力できます。 CSVやTSVを貼り付けた場合も、自動的に入力形式を判定して表へ変換します。
日本語で桁が揃わない理由
日本語の表を手作業で揃えるときに起きやすいのが、 「文字数は同じように見えるのに、表示位置が揃わない」という問題です。
原因は、文字数と表示幅が同じではないためです。
たとえば あいう は3文字ですが、等幅フォントでは
ひらがな1文字が半角文字のおおむね2文字分の幅を持つため、
表示幅は6として扱う必要があります。
一方、abcdef は6文字で、ASCIIの半角文字なので表示幅も6です。
このツールの displayWidth() は、
String.length の文字数ではなく、表示上の幅を計算します。
ひらがな、カタカナ、漢字、全角記号、全角英数字などを幅2、
ASCIIや半角カナなどを幅1として扱います。
さらに、絵文字などは単純にコードポイントごとに数えると途中で分割される
ことがあります。そのため Intl.Segmenter を使って
書記素クラスタ（人間が1つの文字として認識する単位）に分けてから幅を判定します。
たとえば、ZWJで結合された絵文字は途中の結合文字を別々の文字として数えず、
1つのクラスタとして幅2に扱います。
その結果、次のような表では、文字数ではなく表示幅を基準に空白を追加できます。
| 名前 | 説明 |
| ------ | ------ |
| あいう | 3文字 |
| abcdef | 6文字 |
あいう は3文字でも表示幅6なので、
abcdef と同じ幅として扱われます。
このように表示幅を基準にすると、日本語と英数字が混在するMarkdown表でも
等幅フォント上で列位置を揃えやすくなります。
CSVから表を作る
表計算ソフトからコピーしたデータは、TSV（タブ区切り）として クリップボードへ入ることがあります。このツールではタブ区切りを自動判定し、 Markdown表へ変換できます。
CSVをそのまま貼り付けた場合も、カンマ区切りとして判定できれば表に変換します。 入力形式は「判定結果」に表示されるので、変換前に何として認識されたかを確認できます。
CSVやTSVでは、1行目がヘッダなのかデータなのかを機械的に判断できません。 そのため既定では1行目をヘッダとして扱い、 必要なら「1行目をヘッダにしない」に切り替えられます。
セル内で改行したい場合
Markdownの表では、セル内に通常の改行をそのまま入れると
行の区切りと区別できなくなります。
このツールではCSVなどからセル内改行を含むデータを受け取った場合、
セル内の改行を <br> に変換して出力します。
そのため、1つのセルに複数行の内容を保持したい場合でも、 表全体の行構造を壊さずにMarkdownへ変換できます。
列数が揃っていない場合
行によって列数が違う場合、このツールは最も列数の多い行に合わせて
足りないセルを空セルとして追加します。空セルには
- などの文字を勝手に入れません。
列数が揃っていない入力では警告も表示します。 警告には元の行数・列数に関する情報が含まれるため、 整形によって空セルが追加されたことを確認できます。