エクセルで作成した表をHTMLタグにする方法

サイトの作り方

記事の中に表を入れる場合、<td>とか<th>といったHTMLタグを入力してかなければいけないのですが、これが結構面倒ですよね。

なんか便利な方法があるだろうと、調べてみたらやっぱりありました!!
みなさん、結構困っていて、解決してくれる方がいるんですね。

私がやってみてこれは便利!簡単!と思った方法をご紹介します。

スポンサーリンク

エクセルで作成した表を直接エディターに貼り付ける

これが一番簡単な方法だと思います。

  1.  作成した表をコピーしてエディターに貼り付ける
  2.  表の体裁を整える

作成した表をコピーしてエディターに貼り付ける

エクセルで作成した表をコピーして、エディターに貼り付けます。

例として以下の表をエクセルで作成しました。

これを普通に右クリックでコピーします。

エディターで記事にエクセルで作成した表を貼り付けます。

貼り付けるときの注意点として、右クリックの貼り付けではなく、Ctrl+Vキーを押して貼り付けます

これで表が貼り付けられました。

こんな感じに表示されます。

曜日 営業時間
月曜日 10時~20時
火曜日 10時~21時
水曜日 10時~22時
木曜日 定休日
金曜日 10時~24時
土曜日 10時~25時
日曜日 10時~26時

表の体裁を整える

上の表示でオッケーならばこれで終了ですが、すべてデータセル(<td>タグ)になりますし、見出しもはっきりとしませんので、必要に応じて体裁を整えます。

体裁を整えるには記事作成画面をテキストに変更して、HTMLタグを調整しても良いのですが、結構面倒ですので、「TinyMCE Advanced」というプラグインを利用して体裁を整える方法をおススメします。

「TinyMCE Advanced」をインストールするには、WordPress管理画面から「プラグイン」を選択し、「新規追加」より「TinyMCE Advanded」を検索して、インストールし、有効化します。

有効化が完了すると、エディターのメニュー欄に編集メニューとボタンが表示されます。

これを利用して、データセルから見出しセルに変更したり、セルを結合したり、等の調整が簡単に行うことが出来ます。

簡単な表でしたらこれで十分かと思います。

「TinyMCE Advanced」をインストールすると、投稿画面からCocoonの「スタイル」ボタンが消えてしまいます。

その場合は、管理画面の左側メニューの「プラグイン」から、「「TinyMCE Advanced」の設定を選択し、「スタイル」ボタンをドラッグして表示するようにします。

任意の場所に表示できるようにしたら、忘れずに変更を保存をクリックします。

Webサイトを利用して表をHTMLに変換する

これもなかなか簡単で、見出しの範囲や背景色、文字色、セルの結合なども設定することが出来ます。

Webサイトの名前は「エクセルシートをHTMLテーブルに変換しちゃう君(ββ)」です。

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)
  1.  エクセルの表をコピーしてサイトに貼り付け
  2.  オプションを選択して変換
  3.  HTMLタグをコピーしてエディターに貼り付け

これで完成しちゃいます。

エクセルの表をコピーして貼り付け

エクセルの表部分をコピーし、サイト上部の「STEP.1エクセルとかからCSV(TSV)をコピーして貼り付け」欄に貼り付けます。

サイト中段の「STEP2.オプションを選択して変換」にて設定を行い「▼変換▼」をクリックします。

「▼変換▼」を実行すると、変換後の表イメージを確認することができます。

イメージ通りに表示されていれば、サイト下段の「STEP3.HTMLタグをコピーして使う」欄に表示されたHTMLタグをコピーしてエディターの記事画面に貼り付けて完了です。

こんな感じで記事に反映されます。

曜日 営業時間
月曜日 10時~20時
火曜日 10時~21時
水曜日 10時~22時
木曜日 定休日
金曜日 10時~24時
土曜日 10時~25時
日曜日 10時~26時

まとめ

いかがでしたでしょうか。

表の作成は面倒なので私は文章で表現したり、以前はエクセルの表を画像にして貼り付けていたりしました。

これらの方法であれば簡単にHTMLで表が作成できるので見やすい記事なる様、積極的に表を作成していきたいと思います。


ブログランキングに参加しています。
↓ご参考になりましたらクリックお願いします↓
ブログランキング・にほんブログ村へ

コメント