はじめに

Markdownが大好きなのですが、Markdownで表をつくるのは嫌いです。
なのでTSVとかからMDに変換するツールを
GitHub.ioにhtmlファイルとして置いてきたのでぜひ使ってください。
改行とかはいってると駄目だし、結合とかされてる表だと駄目とか
いろいろありますが普通に使う分には使えると思います。

結果

エクセルからコピペするだけでMarkdownの表に変換してくれます。
JS使っているのでGitHubが落ちていない限りすぐ作れると思います。

CSVかTSVかのデータを入力して
"Create ✓"か"➜"みたいなのを押すと変換してくれます。

GitHub.ioからどうぞ。

サンプル画像

データ

地区  チーム   創設年   本拠地
サウスウェスト   ダラス・マーベリックス DAL  Dallas Mavericks 1980    テキサス州ダラス アメリカン・エアラインズ・センター
    ヒューストン・ロケッツ HOU  Houston Rockets  1967    テキサス州ヒューストン トヨタセンター
    メンフィス・グリズリーズ MEM  Memphis Grizzlies 1995    テネシー州メンフィス フェデックス・フォーラム
    ニューオーリンズ・ペリカンズ NOP  New Orleans Pelicans    1988    ルイジアナ州ニューオーリンズ スムージー・キング・センター

これがこうなるのでheadを入れ替えて

|head|head|head|head|
|:-:|:-:|:-:|:-:|
|地区|チーム|創設年|本拠地|
|サウスウェスト|ダラス・マーベリックス DAL  Dallas Mavericks|1980|テキサス州ダラス アメリカン・エアラインズ・センター|
||ヒューストン・ロケッツ HOU  Houston Rockets|1967|テキサス州ヒューストン トヨタセンター|
||メンフィス・グリズリーズ MEM  Memphis Grizzlies|1995|テネシー州メンフィス フェデックス・フォーラム|
||ニューオーリンズ・ペリカンズ NOP  New Orleans Pelicans|1988|ルイジアナ州ニューオーリンズ スムージー・キング・センター|

# headを入れ替える
|地区|チーム|創設年|本拠地|
|:-:|:-:|:-:|:-:|
|サウスウェスト|ダラス・マーベリックス DAL  Dallas Mavericks|1980|テキサス州ダラス アメリカン・エアラインズ・センター|
||ヒューストン・ロケッツ HOU  Houston Rockets|1967|テキサス州ヒューストン トヨタセンター|
||メンフィス・グリズリーズ MEM  Memphis Grizzlies|1995|テネシー州メンフィス フェデックス・フォーラム|
||ニューオーリンズ・ペリカンズ NOP  New Orleans Pelicans|1988|ルイジアナ州ニューオーリンズ スムージー・キング・センター|

地区	チーム	創設年	本拠地
サウスウェスト	ダラス・マーベリックス DAL Dallas Mavericks	1980	テキサス州ダラスアメリカン・エアラインズ・センター
	ヒューストン・ロケッツ HOU Houston Rockets	1967	テキサス州ヒューストントヨタセンター
	メンフィス・グリズリーズ MEM Memphis Grizzlies	1995	テネシー州メンフィスフェデックス・フォーラム
	ニューオーリンズ・ペリカンズ NOP New Orleans Pelicans	1988	ルイジアナ州ニューオーリンズスムージー・キング・センター

こんな感じになります。

コード

htmlファイル一つに収めてる件ときれいなコードじゃない件で
ごめんなさいと言いたいですが、サンプル載せて置きます！！


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Set Table</title>
  <link rel="shortcut icon" href="https://avatars2.githubusercontent.com/u/25813519?v=3&u=d753df8c82ccc1c536b10d3dc771ad0faaaa8b62&s=400">
  <!-- min jQuery CDN -->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <style>
    ul {
      -webkit-padding-start: 0px;
    }
    li {
      /*background-color: #222222;*/
      margin-left: 20px;
      display: inline-block;
      font-size: 14px;
    }
    ul > li > span {
      margin-left: 15px;
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
            <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
          </a>
        </div>
      </div>
    </div>
  </nav>
  <div class="container">
    <!-- テーブル整形 -->
    <div class="input-group">
      <span class="input-group-addon"><span class="glyphicon glyphicon-circle-arrow-right create_table" aria-hidden="true" id=""></span></span>
      <div class="form-control" style="border-bottom: 0px; height: 47px;">
        <div class="btn-group select_csv_tsv" data-toggle="buttons">
          <label class="btn btn-default check_btn active" id="csv_check">
            <input type="radio" autocomplete="off" checked="checked"> CSV
          </label>
          <label class="btn btn-default check_btn" id="tsv_check">
            <input type="radio" autocomplete="off"> TSV
          </label>
          <label class="btn btn-default" id="write_sample">
            <span>Sample入力</span>
          </label>
          <label class="btn btn-default" id="delete_sample">
            <span>Sample削除</span>
          </label>
          <label class="btn btn-default create_table" id="create_table">
            <span>Create <span class="glyphicon glyphicon-ok" aria-hidden="true"></span></span>
          </label>
          <label><span class="error"></span></label>
        </div>
      </div>
      <textarea class="form-control" rows="5" id="input_check" style="border-radius: 0px;" placeholder="input&#13;&#10;-----------&#13;&#10;sample1,sample2&#13;&#10;sample3,sample4" ></textarea>
      <textarea class="form-control" rows="8" id="output" style="border-radius: 0px; border-top: 0px;" placeholder="output&#13;&#10;-----------&#13;&#10;|head|head|&#13;&#10;|:-:|:-:|&#13;&#10;|sample1|sample2|&#13;&#10;|sample3|sample4|"></textarea>
    </div>
  </div>
  <script>
    (function(){
      $('#csv_check').on('click', function(){
        $('#input_check')[0].placeholder = "input\n-----------\nsample1,sample2\nsample3,sample4";
      });
      $('#tsv_check').on('click', function(){
        $('#input_check')[0].placeholder = "input\n-----------\nsample1 sample2\nsample3    sample4";
      });
      $('#write_sample').on('click', function(){
        $('#tsv_check input')[0].click();
        $('#input_check').val("sample1\tsample2\nsample3\tsample4");
      });
      $('#delete_sample').on('click', function(){
        $('#input_check').val("");
      });
      $('.create_table').on('click', function(){
        // Create head of a Table
        function set_head(num) {
          var line1 = "|";
          var line2 = "|";
          for (var i = 0; i < num; i++) {
            line1 += "head|";
            line2 += ":-:|";
          }
          return line1 + "\n" + line2 + "\n";
        }
        // Create body of a Table
        function set_body(lines) {
          // 配列からbodyを作る
          function set_line(arr) {
            var line = "|";
            for (var i = 0; i < arr.length; i++) {
              line += arr[i] + "|";
            }
            return line + "\n";
          }
          var body = ""
          for(var i = 0; i < lines.length; i++) {
            line = lines[i]
            line_split = line.split(separate);
            body += set_line(line_split);
          }
          return body;
        }
        // Select a Separate symbol
        var idname = "csv_check";
        $('.select_csv_tsv label').each(function(){
          if ($(this).hasClass("active")) {
            idname = $(this).attr("id");
          }
        });
        var separate = "\t";
        if (idname == "csv_check") { separate = ","; }
        // Check input text
        var text = $('#input_check').val();
        if (text.trim().length == 0) { return; }
        var lines = text.split("\n");
        var width = lines[0].split(separate).length;
        // Create text for output
        var output = set_head(width);
        output += set_body(lines);
        $('#output').val(output);
      });
    })();
  </script>
</body>
</html>

エクセルからのコピペでMarkdownの表作成(TSV or CSV to md)

はじめに

結果

データ

コード