ブログへの表挿入に。エクセル表からHTMLテーブルを作ってくれるツールが便利すぎる

table

エクセルから表を作るのは簡単です。

そりゃ表計算ソフトって言われるくらいだから、表を作るのは朝飯前です。例えばこんな表ならものの1分もかからずに作れてしまいます。

表のサンプル

かたや、ブログエディターなどの表挿入は、枠組みを作るのは簡単ですが、データ入力を手軽に行えるようにはなっていません。

なので僕は、ブログへ表を挿入するときは、エクセルで表を作ってしまいます。そしてそこから、作成した表を、HTMLテーブルに変換してブログに貼り付けています。

今回は、そんな「エクセル→HTMLテーブル」変換ツールをいくつか紹介します。

photo by Kian Mehrabi

スポンサーリンク
レクタングル(大)広告

基本的な使い方

これからいくつかHTMLテーブル変換ツールを紹介しますが、基本的な使い方は全て同じです。

まずは、エクセルに作りたい表を作成します。オフィスを手元に持っていなくても、オンラインで使用できるMicrosoft Office Onlineで十分です。

表のサンプル

表ができたら、表全体を選択します。

エクセルの表を選択する

あとはそれをコピー(Ctrl+C)してツールの入力欄に貼り付け(Ctrl+V)ます。この例は、エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)を使用。

ツールに貼り付け

あと「変換」してHTMLテーブルを取得します。

HTMLテーブル変換後

WordPressエディターや、ブログエディターから貼り付ければ以下のようになります。

売上 利益
2014年1月 1000 100
2014年2月 1300 90
2014年3月 1100 110
2014年4月 1500 120
2014年5月 1700 140

大抵のWordpressテーマの場合は、これでOKです。

もし、使用しているテーマがテーブル表示のスタイルを設定してなくて、表示がずれてしまう場合は、以下のスタイルシートをCSSファイルに貼り付ければ、それなりの見栄えのテーブルが作成されます。あとは自分も好みに変更してください。

WordPress向け設定例。

エクセル→HTMLテーブル変換ツール

以下では、エクセルテーブル→HTMLテーブルに変換できるWEBツールをいくつか紹介します。

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)

今日の表見出しの範囲やセルの結合など細かいところまで設定できます。また、「CSSを出力しない」にすれば、テーマ独自のスタイルを適用することができます。

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)オプション

また、「変換」を実行すると、変換後の表の状態を確認できるのもユーザーに優しいです。

変換後の表の確認

作成後はこんな感じなります。

売上 利益
2014年1月 1000 100
2014年2月 1300 90
2014年3月 1100 110
2014年4月 1500 120
2014年5月 1700 140

ExcelのHTMLテーブル化フォーム(簡易版)

ExcelのHTMLテーブル化フォーム(簡易版)

こちらは、表のタイトルを設定できたり、奇数行と偶数行に異なったスタイルおつけてくれます。なので行ごとに表示を変更したい場合は、Classにそれぞれスタイルを割り当てると見やすい表がつくれます。

ExcelのHTMLテーブル化フォームオプション

WordPress向けスタイル設定例。

こんな感じの表がつくれます。

今月の業務成績
売上 利益
2014年1月 1000 100
2014年2月 1300 90
2014年3月 1100 110
2014年4月 1500 120
2014年5月 1700 140

Excel to HTML

Excel to HTML

これが最もシンプルで簡単に使えるかも。行と列に表見出しを使用するか指定するだけです。

見出しの設定

普通の表が表示されます。このツールで作成される表には、thead、tbodyなどはつきません。

売上 利益
2014年1月 1000 100
2014年2月 1300 90
2014年3月 1100 110
2014年4月 1500 120
2014年5月 1700 140

まとめ

これらのツールを使うようになってから、ブログに表を作成するのに億劫さはあまり感じないようになりました。

表を作るときは、Microsoft Office Onlineのエクセルなどで、パパっと作成。あとはツールでHTMLに変換すれば、結構な作業を軽減できます。