2列 50行のテーブルを簡単に作成したいです


現在は下記のようにひとつひとつ行を作っています。

[code]

    <table id="sampleTable" class="tablesorter">
        <thead>
            <tr>
                <th>都道府県名</th>
                <th>読み</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>東京都</td>
                <td>とうきょうと</td>
            </tr>
            <tr>
                <td>大阪府</td>
                <td>おおさかふ</td>
            </tr>
        </tbody>
    </table>
    
[/code]

しかし、50行のテーブルとなるとソース量が多くなってしまうので、  
もっと簡単な記述方法があればご教授をお願いしたいです。  
因みに、javaScriptを使用しても大丈夫です。




jQueryを利用した方法は以下になります。

[code]

    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script>
      $(function(){
        var data = [
          {name:'東京都', yomi:'とうきょうと'},
          {name:'大阪府', yomi:'おおさかふ'},
          {name:'北海道', yomi:'ほっかいどう'}
          // ...略（最後の要素にはカンマを付けないように）
        ];
    
        data.forEach(function(v){
          html = '<tr><td>'+v.name+'</td><td>'+v.yomi+'</td></tr>';
          $('#sampleTable tbody').append(html);
        });
      });
    </script>
    
    <table id="sampleTable" class="tablesorter">
      <thead>
        <tr>
          <th>都道府県名</th>
          <th>読み</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
    
[/code]




jQueryを利用した方法は以下になります。

[code]

    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script>
      $(function(){
        var data = [
          {name:'東京都', yomi:'とうきょうと'},
          {name:'大阪府', yomi:'おおさかふ'},
          {name:'北海道', yomi:'ほっかいどう'}
          // ...略（最後の要素にはカンマを付けないように）
        ];
    
        data.forEach(function(v){
          html = '<tr><td>'+v.name+'</td><td>'+v.yomi+'</td></tr>';
          $('#sampleTable tbody').append(html);
        });
      });
    </script>
    
    <table id="sampleTable" class="tablesorter">
      <thead>
        <tr>
          <th>都道府県名</th>
          <th>読み</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
    
[/code]

