テーブル

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

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

HTML初心者もコピペで簡単!テーブルタグの作り方

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

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

1.まずは表計算ソフトで表を作ろう(Google スプレッドシートでのやりかた)

+アイコンをクリック
クリックで拡大

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

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

表の内容を入力
クリックで拡大

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

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

セルの内容をコピー
クリックで拡大

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

2.コピペでテーブルタグを自動生成!

表のデータを貼り付け
クリックで拡大

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

オプションを選択
クリックで拡大

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

HTMLタグをコピー
クリックで拡大

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

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

3.アドレスバーで改行を取り除いてブログに貼り付け

アドレスバーのタグをコピペ
クリックで拡大

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

ブログの投稿にタグを貼り付け
クリックで拡大

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

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

CSSでテーブルタグを装飾する方法

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

テーブルのCSSのサンプル

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

テーブルの色:

サンプルプレビュー
thead th thead th
thtd
thtd
thtd
CSS編集貼り付けコード

CSSを貼り付ける場所

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

CSSを貼り付け

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

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

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