Excelの表をHTMLのコードに置き換えてくれるWebサービス

2015年4月6日

この記事は最終更新日から9年経過しています。内容が古い可能性があります。

今回の土日はWebサイトを地道に作っていました。その中で、Excelにある表をHTMLとして表示しないといけなかったのですが、そのときに見つけた「Excelの表をHTMLのコードの置き換えてくれるWebサービス」が便利だったのでそれについて書きます。

記事をざっと見る

ExcelにはHTML出力があるじゃない？

最初、ExcelにはHTML出力があるじゃん、ということで「別名で保存」で保存してみたのです。

例えば、

こんな感じの表があったとして、

これをExcelの「別名で保存」でHTMLに保存してみました。

ブラウザで表示するとこんな感じです。なるほどシート名とかも付いていてExcelみたいですね！

はき出されたHTMLをWordPressの固定ページに貼り付けようと思って、ソースを開いて見ると、

おおおおお！なんかすごく複雑なコードになってる。で、TABLEは？と探しましたが望むような単純な形では存在していませんでした。Excelの再現性を高めるためにかなり複雑なコードになっているようで、そういう使用のときにはすばらしいと思うのですが、今回私の求めていた　単純なTABLE組み　ではありませんでした。

Excelの表をHTMLのコードに置き換えてくれるWebサービス　を探す

ということはきっと、フリーソフトかWebサービスがあるはず、とググりました。可能なら今すぐ使えるWebサービスがいいなと思って、

Excel to HTML　Excelの表をHTMLのテーブルタグに変換します

こちらを発見しました。

ExcelでTABLE組みにしたい範囲をコピーして、

2　変換したいExcel表を貼り付けます　に貼り付けて、変換する をクリック。すると、

このようにTABLE組みのコードがテキストエリアに表示されるので、

すべて選択　して　コピー　します。

<table>
    <tr>
        <th>月</th>
        <th>食費</th>
        <th>消耗品</th>
        <th>雑費</th>
    </tr>
    <tr>
        <th>1</th>
        <td>40520 </td>
        <td>4890 </td>
        <td>10986 </td>
    </tr>
    <tr>
        <th>2</th>
        <td>39871 </td>
        <td>10389 </td>
        <td>3987 </td>
    </tr>
    <tr>
        <th>3</th>
        <td>53689 </td>
        <td>7890 </td>
        <td>4908 </td>
    </tr>
    <tr>
        <th>4</th>
        <td>49075 </td>
        <td>4654 </td>
        <td>1789 </td>
    </tr>
    <tr>
        <th>5</th>
        <td>49280 </td>
        <td>3017 </td>
        <td>1096 </td>
    </tr>
    <tr>
        <th>合計</th>
        <td>232435 </td>
        <td>30840 </td>
        <td>22766 </td>
    </tr>
    <tr>
        <th></th>
    </tr>
</table>

このようにきれいなHTMLコードとなっていました(^^)/

これをWordPressの投稿に貼り付けてみると

HTMLのテーブルとして表示されました。これで、Excelの表からHTMLに書き出すのが簡単になりました(^^)/

注意点があります！

今回のように金額など大きな数字の場合、

カンマ区切りを使うことが多いのですが、これを変換すると

このように、カンマ区切りがセルの区切り　と判断されて、カンマのところで別のセルという表現になってしまいます。

カンマ区切りがある場合は一旦、コピーした内容をテキストエディタなどにペーストして、カンマを別のもので使われてない文字(今回の場合だったら　、　とか)に全置換して、それを貼り付けTABLE組みにし、TABLE組みにした後にもう一度先ほど変換した文字からカンマに置き換える　とかの作業をすれば大丈夫です。