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

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

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

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

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

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

photo by Kian Mehrabi

基本的な使い方

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

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

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

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

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

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

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

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

WordPress向け設定例。

.post table {
    border-collapse: collapse;
}
.post th {
    border: solid 1px #666;
    color: #000000;
    background-color: #eee;
}
.post td {
    border: solid 1px #666;
    color: #000000;
    background-color: #ffffff;
}
.post th, .post td{
    padding: 5px;
}

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

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

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

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

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

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

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

ExcelのHTMLテーブル化フォーム（簡易版）

ExcelのHTMLテーブル化フォーム（簡易版）

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

WordPress向けスタイル設定例。

.post .odd td {
    background-color: AliceBlue;
}
.post .even td {
    background-color: LavenderBlush;
}

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

Excel to HTML

Excel to HTML

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

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

まとめ

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

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