コピペで簡単！HTML・CSSでテーブル（表）タグを作る方法

ブログやHPにお小遣いサイトの収入公開や節約の家計簿を載せたり、比較サイトを作る時に便利なHTMLタグがテーブル（表）です。

tableタグって複雑で、初心者にはちょっと難しい所があるのですが、コピー＆ペーストで簡単にテーブルが作れる便利なサービスを使えばHTMLを知らない人でも簡単に表が作れちゃいます♪

今回ご紹介するテーブルタグの作り方は、
表計算ソフトで作った表をコピー＆ペーストするだけでテーブルタグを自動で作ってくれる
「エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」という、とてつもなく便利なWEBサービスを使います。

エクセルなどの表計算ソフトお持ちで無い方は、オープンオフィスという無料ソフトや、ソフトを入れなくてもGmailのアカウントがあればネット上で使えるGoogle スプレッドシートを使うのが便利です。

クリックで拡大

まずはGoogleスプレッドシートにアクセスをして、Gmailのアカウントでログインをします。

右下の緑の丸の「＋」アイコンをクリックしてください。

クリックで拡大

セル（四角いマス）をクリックして、表にしたい内容を入力していきましょう。

←左の画像では、架空のポイントサイトのお小遣い帳を作っています。

クリックで拡大

入力したセルの内容をShiftを押しながら選択をして、Ctrl+Cでコピーをしましょう。

クリックで拡大

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)に行って、STEP1.の枠の中に、コピーしておいた表の内容をCtrl+Vで貼り付けましょう。

クリックで拡大

STEP2.の右側の「CSSを出力しない」にチェックを入れて、下の「変換」ボタンをクリックしてください。

クリックで拡大

テーブルタグの表示の確認が出てくるので、右上の×で閉じます。

STEP3.の枠の上をクリックして、Ctrl+Aで全選択後、Ctrl+Cでコピーをします。

クリックで拡大

ブラウザのアドレスバーにコピーしたテーブルタグを貼り付けた後に、全選択→コピーをしてください。これでタグの改行が取り除かれます。

クリックで拡大

後はブログ記事投稿にコピーしておいたテーブルタグを貼り付けて完了です♪

タグが文字として、そのままブログに表示されてしまった場合は、HTML編集モードに切り替えてから貼り付けをしてくださいね。

テーブルタグは投稿できたけど、ブログを見ると枠とか無いし全然テーブルじゃない！！！という場合は、CSS編集でテーブルタグを装飾してあげましょう。

テーブルの色を選んで、右側のコードをCSS編集に貼り付けて下さいね。

テーブルの色： ■ ■ ■ ■ ■ ？

FC2ブログでしたら、「テンプレートの設定」ページの「スタイルシート編集」に貼り付けてください。貼り付ける場所がわからない場合は、一番下がおすすめです。

CSSを貼り付け

PC用はもちろん、スマートフォン用のスタイルシート編集にも同じように貼り付けておいてくださいね。

お小遣いサイトなどのネット収入を記録するならば、表計算ソフトが集計がとりやすくて便利です。今回ご紹介した方法なら自分のお小遣い帳も作れて、ブログのテーブルタグも作れるので一石二鳥！

表を作ってみたいけどなんだか難しそう・・・という方も、やってみれば意外と簡単なので、是非チャレンジしてみてくださいね♪