きまぐれAWA's Life

アクセスカウンタ

zoom RSS テーブルタグ〜応用編:エクセルを使って簡単にテーブルタグを組む方法

<<   作成日時 : 2012/02/20 18:37   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 2 / トラックバック 0 / コメント 8

ウェブリでテーブルタグを組むのを簡素化するためにエクセルを使った方法を書いてみます。
これまでのシリーズで紹介したテーブルの組み方だと簡単な表ならなんとか管理出来ますが、
セルの数が増えれば増えるほど実用的にも管理的にも無理が生じてきます。

なので今回の記事ではエクセルを利用して、管理のしづらさを根本的に解決する方法を記述します。
※説明は『Microsoft Excel 2010』でさせて頂きます。

こちらの記事を読むまでに、ウェブリでテーブルを組むシリーズの記事も目を通しておいて下さい。
(ほし)テーブルタグでウェブリの記事に表を書く〜基礎編
(ほし)テーブルタグ 〜 応用編:セルの結合【colspanとrowspan】
(ほし)テーブルタグ〜応用編:ウェブリでのテーブルデザインについて

エクセルを使って簡単にテーブルタグを組む方法


ではまず、表はエクセルを開いて作ってしまいましょう。
サンプルでは下記SSのような表を書いてみました。


画像
※SSではデザイン指定がしてありますがわざわざデザインをする必要はありません。


これを今まで書いたシリーズのような書き方で記事作成するととんでもなく大変です。
正直な話、実際に書いてみたりしたくありません(笑)

ではここでチョットひと工夫。
下記のようにデータの入ったセルとセルのあいだに空白の列を挿入します。

画像

画像


ここまで出来ましたら今度はテーブルを組むためのタグを書き込む作業に移ります。
今回使用するタグのセット(それぞれ一列分)は以下の6個になります

<table bgcolor="#000000" cellspacing="1" cellpadding="5"><tr bgcolor="#cccccc"><th>
</th><th>
</th></tr><tr bgcolor="#ffffff"><td>
</td></tr><tr bgcolor="#ffffff"><td>
</td><td>
</td></tr></table>


画像


これをエクセルの開いたところにコピペしてそれぞれ色分けすると作業が楽かもしれません(ん)
区別しやすいようにタグの前に数字を振ってみました。

それではタグを該当するセルに書きこんでいきます。

 ステップ1 :(1)のタグを【A2】にコピペ
 ステップ2 :(2)のタグを【C2】にコピペ、同様に【E2】【G2】【I2】にもコピペ
 ステップ3 :(3)のタグを【A3】にコピペ
 ステップ3 :(4)のタグを【A4】にコピペ
 ステップ4 :(5)のタグを【C3】にコピペ、同様に【E3】【G3】【I3】にもコピペ
 ステップ5 :(6)のタグを【A9】にコピペ


画像


ここまでが第一段階になります。
あとのコピーはセル右下角にカーソルを合わせてドラッグしてコピーをする方法を利用します。


画像


 ステップ6 :【A4】のセルを右下角ドラッグで【A8】までコピー
 ステップ7 :同様に【C3】→【C8】【E3】→【E8】【G3】→【G8】【I3】→【I8】もコピー



画像


ここまでの作業でテーブルタグの書き込みは完成です。

あとは【A2】〜【J9】までのセルを選択して作成記事にコピペすればOKです(ん)
下記表はエクセルからコピーしたものを貼りつけたものになります。

画像


エクセルからコピペして出来た表です ρ(@にこ)

見出し1 見出し2 見出し3 見出し4 見出し5
セル1A セル1B セル1C セル1D セル1E
セル2A セル2B セル2C セル2D セル2E
セル3A セル3B セル3C セル3D セル3E
セル4A セル4B セル4C セル4D セル4E
セル5A セル5B セル5C セル5D セル5E
セル6A セル6B セル6C セル6D セル6E


これで表の作成や管理も少しは楽になるでしょうか(にこ)
表のレイアウトやデザインなどは前回までの記事を参考にして下さい。


エクセルで表を作った場合の注意点


(それ)セル間のタブスペース

エクセルで作成したテーブルタグをコピーするとセルの区切りがタブスペース表示されます。
そのままでも問題ありませんが気になる方はテキストエディタでタブスペースを一括消去処理をしてもいいかもです。

(それ)セル内の改行

表の内容によってはセル内での改行(Alt+Enter)を利用するケースもあるかと思います。

画像

これをそのままコピペするとダブルクォーテーション『”』で括られて表示されます。
気になる場合は『”』を消去してください。
消去しても改行は行われるようですが、もし改行されない場合は個々に改行を入れて下さい。




この記事をもってウェブリでのテーブルタグの書き方シリーズは終了です(ん)
シリーズ最初の記事を書いた時はウェブリでテーブルはオススメ出来ないと思ってましたが、
エクセルを利用することによって少しは表作成や管理に光が見えたような気がします。

また何かいい活用方法が見つかったらシリーズ復活するかもしれません(笑)



それでは今回はこのくらいで(にや)

|ω・)ノシ See you♪

|彡 サッ



【関連記事リンク】
(ほし)テーブルタグでウェブリの記事に表を書く〜基礎編
(ほし)テーブルタグ 〜 応用編:セルの結合【colspanとrowspan】
(ほし)テーブルタグ〜応用編:ウェブリでのテーブルデザインについて





■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■


テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 2
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(8件)

内 容 ニックネーム/日時
むずかしそ〜〜w
私はごそっとコピペに一票w(@あらやだ)
新宿舞姫
2012/02/20 19:05
舞姫さん、いらっしゃいませ(ん)
これでも結構画期的な方法だと思うんです(あらやだ)
サンプルで書いたテーブルもエクセルなしじゃ書きたくありませんもんw
まぁごっそりコピーは登録商標ですな(やるおうる)
mairis
2012/02/20 21:14
なるほど、タグ埋め込んでごっそりコピペで表作り出すんですd(^-^)ネ!
これなら、カラーも見た目通りに来ますしいいです(ぺこ)
でも、σ(・ω・ )はブログ内で表活用したこと無いから(ぶーん)
これから挑戦してみます(むふ)
あちょ
2012/02/20 21:15
あちょさん、いらっしゃいませ(ん)
フツーにHTMLで直接書くならこんなに苦労はしないですけど、やっぱりウェブリの仕様に合わそうとするとこれが一番管理しやすいかな〜って思います。
セルでタグと表データを分けてしまうところがミソでしょうか。
ブログで表をどうしても書かなくちゃいけない時にお試し下さいw

あ、あとスマートフォン版だとテーブルタグは表示できませんので、テーブルの使い方には十分ご注意を(*・ω・)b
mairis
2012/02/20 21:23
(わぁ)うわあぁぁぁぁ
こんな活用法があるんだぁぁ(びっくり)
やってみたいけど(やるお)タグを組むのが面倒でもあり(やるおうる)・・・
私は、今まで通り、エクセルで作成したものを、そのままコピー&ペーストしてペイントで画像ファイルとして保存でペタットします(まじ)b
エネティ
2012/02/21 16:47
エネティさん、いらっしゃいませ(ん)
ブログに表を掲載する場合は画像化して載せてしまうのがお手軽簡単ですね。
テーブルを組むは特性を活かせる特殊なケースがあればって感じです。
mairis
2012/02/22 12:20
ぉお(゚ロ゚屮)屮
こういうやり方があったのね(えっ)
これならデータがいくら追加されようが、行セルを増やすだけで対応できますものね(にや)
φ(.. ) メモメモ・・・
松下禅尼
URL
2012/02/23 13:29
松下さん、いらっしゃいませ(にこ)
セルごとに分けて書けるのでデータ管理が楽かもです(ん)
説明ではウェブリ用にデザイン指定をタグに直接書いてますけど、タグにクラス値を当てていけばそのままWebサイトでも使えそうな?
と言いながらあんまりテーブル組みませんけどw(あらやだ)
mairis
2012/02/24 08:10

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

テーブルタグ〜応用編:エクセルを使って簡単にテーブルタグを組む方法 きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる