表データを画面操作でMarkdown/HTML/Text/LaTeX形式のテーブルに楽々変換する

# はじめに

[Excelの表をMarkdown形式に変換 - Qiita](http://qiita.com/QUENCH/items/d77d0983d4a6d9d7de8e)で紹介されていた[Tables Generator](http://www.tablesgenerator.com/markdown_tables)が非常に便利で日常的に使っていたのですが、意外に周りに浸透していなかったのでさらなる利用促進運動を。

MarkdownだけではなくHTML / Text(Ascii Art)にも変換可能なので、メールやチャットの本文に貼り付けることができ、ライトに情報共有したい時にも重宝します。

# 入力

サンプルに使う入力は以下のような時系列データです。
こちらを切り貼りして試してみます。

> | # | 00   | 01  | 02  | 03   | 04  | 05  | 06   | 07    | 08   | 09   | 10    | 11   | 12   | 13   | 14   | 15   | 16   | 17   | 18   | 19  | 20  | 21 | 22  | 23   |
|---|------|-----|-----|------|-----|-----|------|-------|------|------|-------|------|------|------|------|------|------|------|------|-----|-----|----|-----|------|
| A | 1    | 0   | 34  | 3    | 0   | 0   | 0    | 0     | 45   | 577  | 13442 | 683  | 796  | 1916 | 1971 | 4743 | 6711 | 6771 | 4659 | 890 | 424 | 80 | 36  | 9    |
| B | 209  | 0   | 19  | 0    | 0   | 8   | 42   | 503   | 3886 | 6602 | 5134  | 3084 | 1622 | 700  | 1359 | 1375 | 608  | 216  | 411  | 548 | 224 | 16 | 120 | 0    |
| C | 1070 | 635 | 301 | 1309 | 570 | 591 | 4619 | 11993 | 4767 | 2904 | 2180  | 1676 | 1338 | 1453 | 1634 | 1193 | 189  | 140  | 217  | 71  | 177 | 67 | 344 | 1194 |

# Markdownに変換

File＞Paste table data...を選択してクリップボード経由でCSV情報をペースト
![paste.png](https://qiita-image-store.s3.amazonaws.com/0/6463/96eea8ef-5cb9-0ef9-568c-801bb11d6027.png)

そうすると以下のように変換済みの情報が取得されるので、「copy to clipboard」でコピー可能。

![markdown.png](https://qiita-image-store.s3.amazonaws.com/0/6463/d51b6668-fd61-789c-2474-4aa05d3894c6.png)

Markdownのテーブル変換は他にも文字の左揃え、中央揃え、右揃えがあり、Excelライクな設定できます。
右クリックでコンテキストも用意されていますが、あまりメニュー数は多くないです。
ただし、```Ctl + C```で選択中のセル情報はコピー出来ないので、コピーしたいときはこのコンテキストメニューから```Copy```を選ぶ必要があります。

![context.png](https://qiita-image-store.s3.amazonaws.com/0/6463/64495e2f-23f4-c22e-9ac3-a37ecea35638.png)


操作が終われば、```Generate```ボタンを押して再生成すると、結果の情報に```|:-:|```といった文字寄せが行われたMarkdownテーブルが生成されます。

![中央揃え.png](https://qiita-image-store.s3.amazonaws.com/0/6463/ed64c269-8b79-6f5f-8e2c-8363bc7c13da.png)


# HTML

[HTML Tablesタブ](http://www.tablesgenerator.com/html_tables)をクリックして移動します。
情報を残してくれるので気軽に遷移できます。
Markdownに比べて機能がリッチで、驚いたのは **セルの結合**が出来る点です。

下図の窓枠のようなアイコン（赤枠の左側）をクリックすると、選択されたセルが結合します。

![セル結合.png](https://qiita-image-store.s3.amazonaws.com/0/6463/bdb3e726-df4e-6d9f-98a9-5c4d6ee97931.png)


他にも太文字、斜線、下線、文字サイズ、文字色、背景色が操作できます。
Themaではある程度のカラーパターンが選べるので、面倒くさい時はこれをよく選びます。
![テーマカラー.png](https://qiita-image-store.s3.amazonaws.com/0/6463/7da8110e-eb26-6073-8be7-d9466842e076.png)

Themaでオレンジを選び文字色などを変えて、```Generate```ボタンをクリックします。
出力されたHTMLを確認すると```th```タグごとに```class```を切って、先頭にCSSでまとめて設定されてました。
また、結合部分は```<td class="tg-031e" colspan="7" rowspan="2">0</td>```となってます。
さすが、賢い。

![テーマカラー３.png](https://qiita-image-store.s3.amazonaws.com/0/6463/1d110937-0f00-61ae-6b59-f54e66f3e65b.png)


# Text(Ascii Art)

[Text Tablesタブ](http://www.tablesgenerator.com/text_tables)をクリック指定して移動します。
文字寄せとセル結合が使えます。
![ascii_art.png](https://qiita-image-store.s3.amazonaws.com/0/6463/41c34229-d85d-8593-9144-91df1744793f.png)

実際のデータはこんなかんじです。
私はこのText(Ascii Art)変換を最もよく使います。
DBやExcelの情報をメールの本文に貼り付けてライトに共有できるため重宝します。
メールに張るときは等幅フォント（MSPゴシックなど）に変換する必要があるのでご注意を。

> ```
+---+------+-----+-----+------+-----+-----+------+-------+------+------+-------+------+------+
| # | 00   | 01  | 02  | 03   | 04  | 05  | 06   | 07    | 08   | 09   | 10    | 11   | 12   |
+---+------+-----+-----+------+-----+-----+------+-------+------+------+-------+------+------+
| A | 1    | 0   | 34  | 3    | 0                | 0     | 45   | 577  | 13442 | 683  | 796  |
+---+------+-----+-----+------+                  +-------+------+------+-------+------+------+
| B | 209  | 0   | 19  | 0    |                  | 503   | 3886 | 6602 | 5134  | 3084 | 1622 |
+---+------+-----+-----+------+------------------+-------+------+------+-------+------+------+
| C | 1070 | 635 | 301 | 1309 | 570 | 591 | 4619 | 11993 | 4767 | 2904 | 2180  | 1676 | 1338 |
+---+------+-----+-----+------+-----+-----+------+-------+------+------+-------+------+------+
```

# LaTeX

[LaTex Tables](http://www.tablesgenerator.com/latex_tables)をクリック指定して移動します。
文字寄せ、太字・斜体・下線、グリッド、セル結合、文字色、背景色とHTML版とほぼ同じ機能が実装されていまます。
残念ながらHTML版にはあったThemaはないようです。

![手振.png](https://qiita-image-store.s3.amazonaws.com/0/6463/2bd1b0ce-33e7-d91b-4078-0ceebb7b0d0d.png)

# おしまい

* ブラウザから簡単にテーブル作れるのって素晴らしいですね！
* また各操作が[handsontable](http://handsontable.com/)を使っているのか、むちゃくちゃExcelライクに使えるのに感動します
* Media Wiki形式も利用できるようですが試したことないので省略を