TOP ブログの基本 アフィリエイト アクセスアップ カスタマイズ ブログ・HTML ブログ・CSS




ハイサイ(ようこそ)利爺のブログへ


●ブログの基本、アフィリエイト、HTML・CSSまで
初めての方にも分かり易いように下記のシリーズで纏めています。

・・・・・・・・・・・・・・・・ 各章の項目(目次) ・・・・・・・・・・・・・・・
= 現在、シリーズ記事を書いているブロックです。

エントリー順に確認できるように【目次】を作ってありますので
上段のコンテンツバー(menu)または上記の項目から各ブロックに入れます。


●本文中に表示しているアイコンは
= 参照記事  = 頁中の章  = 注釈  = 記事ブロック
を表します。

2010年02月07日

テーブル作成とその応用(1)

■ 5-18 統計データなどに使うテーブルを作成する


■ テーブルを構成する要素(基本)
table(テーブル)とは
表計算ソフトのような「表」のことで、多くのマス目で成り立っています。

項目やデータで使っているマス目をセル(Cell=細胞、蜂の巣の穴)と呼び、用途に合った統計データ表の表記、あるいはそのテーブル機能を応用して、文章の段落やアフィリエイト用の商品紹介ページの作成など、ブログにも多用されています。

セルをまとめてテーブルを作る要素は、下記の四つのタグで構成されています。

【語意】
<table>
<tr>
<th>
<td>


= 表、目録、食卓
= table row ( row:並び、列 )
= table header ( head:頭 )
= table data ( データ )


<table>

<tr>

<th>

<td>



「テーブル(表)全体を定義」。<table></table>の中にテーブルを収めます。
●テーブルの中の「行を定義」。。<tr></tr>の中に<th>や<td>要素を収めます。
「項目を定義」。
<th></th>の中に一件の項目を指定します。
「データを定義」。<td></td>の中にデータを収めます。

の条件のもとで
各タグを組み合わすことでテーブル(表)が作成されます。

■テーブルの基本形


【画像1】
table05.png
 ↑ 画像をクリック・元画像が開きます。

各要素(属性、属性値)の使用方法は
「画像1」の形式になります。

実際に「画像1- 例2」の形式でテーブルを作ってみましょう。
【テーブルタグの形式】

<table border="1">
<tr>
<th>項目名@</th>
<th>項目名A</th>
</tr>

<tr>
<td>データ@</td>
<td>データA</td>
</tr>
</table>


【表示】

項目名@項目名A
データ@データA

シンプルなテーブルが表示されましたね。

HTMLタグの使用方法は

<table>
<tr><th>…</th></tr>
<tr><td>…</td></tr>
</table>

の形式がテーブル作成の基本です。

項目数の増やし方、データの行数の追加の方法は
次回の応用編で確認します。


■テーブルの罫線を調整する

罫線を表示するには<table>要素にborder属性を追加します。
  ※border=へり、ふち(縁)

<table border="1"
  ※border="1"の数字は線の太さを指定します。
   単位はpxですので、この例では「1px」の太さになります。

属性値「border」の指定がないと、文字だけが表示され
罫は表示されません。

表示されているサンプルのテーブルは
セルとセルの間隔が空いて、二重線になって表示されています。

このことは<table><th><td>の各要素

●table要素
●th要素
●td要素

= テーブルの外側
= セルの周囲
= セルの周囲

各要素ごとに別々に罫線を引いた結果です。

罫線の間隔を調整するHTMLタグはありますが
各要素に個別に記入するのは面倒ですので

CSSに新しいセレクタを定義して
HTMLの「table要素」では線の種類や太さなどの
細かい指定をする必要がないようにしましょう。

CSSに定義して適応すれば、テーブルを作るたびに
何度も同じタグを記入しなくてもいいようになります。

また、入力の間違いやソースが分かり難いなど
煩雑で非効率な作業が軽減されます。


■ 新しいtableセレクタをCSSに追加

CSSにはテーブル作成の上で基本的な

●項目やデータを表記する書体
●文字サイズ
●セル内の行送り
●文字の表示位置
●線(罫)の太さ
●線(罫)の色
●線(罫)の表示調整
●セルの内側の余白

を定義して

●セルのサイズ
●セルのバック(下地)色
●文字の色

などは
テーブル作成時に
直接にHTMLで書き込む形式にした方が簡便です。

CSSを適用することは
定義したプロパティを利用することで
形(種類)の異なるテーブルも作りやすい利点があります。

いくつかの形の異なるテーブルを作って表示した時にも
「見出し」や「罫線の太さ・色」「データ」の表示など、統一された見やすいレイアウトになります。

一般的に「table」要素には、細かい設定がされていませんので
CSSに定義して、自由度を広げておきましょう。


●テーブル用のCSSセレクタの記入例
セレクタ名を仮に「samp table」とします。

【CSS】
独自のテーブルセレクタを定義


.samp table {
font-size:12px;
line-height:1.3em;
padding:10px;
border:1px;
border-style:solid;
border-color:#b0c4de;
border-collapse:collapse;
}

.samp th {
font-size:14px;
font-weight:bolder;
text-align:center;
padding:10px;
}

.samp td {
font-size:12px;
font-weight: normal;
text-align:left;
padding:10px;
}


CSSに「class適用」のテーブル対応のセレクタを設定しました。



      参照の「 class・id 属性」は確認しておきましょう。
      CSSの定義で頻繁に使用します。

上記のテーブル用の「独自のテーブルセレクタを定義」のセレクタの記入例では
同じ内容の「プロパティ」「値」を各 class 毎(.samp table/.samp th/ .samp td) に定義していますが

table構造の親セレクタ「.samp table」に
使用書体・大きさ・罫線の太さや色・行送りなど、共通(共用)する定義は、まとめても構いません。


「.samp th」「.samp td」の各セレクタは入り子になりますので、親セレクタと異なる「プロパティ」だけの定義でもいいのです。

上位の「.samp table」の定義がそのまま適用(継承)されます。

CSSを適用して横3列・縦2行の
サンプルのテーブルを作成して見ましょう。

サンプルで作るテーブルのHTMLタグの形式は以下の通りです。

【HTML】

<div class="samp table">
<table>
<tr>
<th bgcolor="#e0ffff">ホテルA</th>
<th bgcolor="#ffe4e1">ホテルB</th>
<th bgcolor="#e0ffff">ホテルC</th>
</tr>
<tr>
<td width="110"
宿泊:20,000円
予約可能
送迎出来ます
</td>
<td width="110"
<font color="cd5c5c">
宿泊:6,300円
12日15日満室
送迎可能です
</font>
</td>
<td width="110"
宿泊:15,000円
週末予約可
送迎車あり
</td>
</tr>
</table>
</div>



「表示例」
  ↓

ホテルAホテルBホテルC
宿泊:20,000円
予約可能
送迎出来ます。
宿泊:6,300円
12日15日満室
送迎可能です。
宿泊:15,000円
週末予約可
送迎車あり。


    注
   ●プラウザの「Firefox」では、各要素の罫線が離れて表示
    されます。
    CSSに定義した罫線を重ねて表示するプロパティとその値
    「border-collapse:collapse;」がうまく作用していませんので、
   ●tableのHTMLに直接
    <table style="border-collapse:collapse;">
    を書き込めば、重なって一本の線になります。

「表示例」
  ↓

ホテルAホテルBホテルC
宿泊:20,000円
予約可能
送迎出来ます。
宿泊:6,300円
12日15日満室
送迎可能です。
宿泊:15,000円
週末予約可
送迎車あり。
   

テーブルは上手く作成されていますか。

作成したテーブルの上に数行にわたる空白があり、記事(文章)部分と離れた位置にテーブルが表示されますね。

このことは
teble作成時に自動的に入力された空白(<br>)が追い出された結果です。

見えない空白(<br>)がtableと記事の間に有ることが原因になります。


【空白行を取り去る方法】

空白行を取り去る(表示させない)には

(1)ページの全改行を直接入力。
(2)テーブルタグのみを改行無しでの入力。

の二つの解決方法がありますので、個々に確認します。

(1)ページ内の全改行を直接書き込む

空白行が表示される解決方法の一つで
文書に自動入力される改行<br>を直接入力に変更する方法。

  ⇒ ■ seesaaブログ・ヘルプ
    テーブル作成に関する注意事項


@ブログの「記事入力欄」の下方(※「画像2」参照)「この記事の詳細設定」の項目の
「改行HTMLのタグ変換」

「改行を<br/>タグに変換しない」
のラジオボタンをクリックして、改行タグを直接(手動)で入力する方式に切り替えます。

【画像2】
kizi01.png
 ↑ 画像をクリック・元画像が開きます。

Aブログの入力設定では
キーボードの「エンターキー(Enter)」を押すと自動な改行になっています。

テーブルを作成するときに
自動改行になっているとテーブル内に存在する改行(空白)がテーブルの外側に追い出され
予想もしない位置で改行が働く結果になり、テーブルの表示位置(場所)が大きくずれます。

B「改行を<br/>タグに変換しない」にすると、自動的に実行していた「改行」が無くなります。

「改行」が自動で入力されないことは

●ページの頭から入力した「記事(文章)」も、改行無しのベタ表示になりますので、文章の最初から<br>改行タグを必要な箇所に、直接に入力する必要が出てきます。
●さらに空白行は必要な空白行数分の<br>改行タグを連続で入力します。
●table要素内のテキスト文にも<br>改行タグを直接書き込むまなければなりません。

上記の方法を纏めて見ると

【まとめ】
記事入力設定を「改行を<br/>タグに変換しない」にする。
●文章の改行位置に<br>改行タグを直接に書き込む。
●空白行はその空白行の数だけ<br>改行タグを書き込む。
●テーブル内のテキストにも<br>改行タグを書き込む。

<br>改行タグを直接に書き込む煩雑な入力作業を伴いますが
テーブルを使う利点が大きいので、解決方法の一つとして覚えましょう。

次回は、比較的に簡単な
(2)テーブルタグのみを改行無しでの入力 
  ※アフィリエイト用のテーブルタグが殆どこの形式になっています。
の方法を確認します。



▲HTMLの関連記事
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji-dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……



この記事へのコメント
ハイサイ、利爺さん☆

いつもお世話になっています、ありすです。

今回のテーブル記事、すごく分かりやすかったです!

HTML・CSSに今でも若干苦手意識が薄れない(汗)私でも、意味もなくテーブル作りたいかもと思っちゃいました♪

特に、ホテルA・B・Cのようなテーブルに挑戦してみたいですね!

応援ぽちです^^*
Posted by 超初心者ありすの稼ぐアフィリエイト戦略 at 2010年02月07日 03:02
はじめまして 利爺さん
倭人さんのブログから来ました小春です

倭人さんにガンプラーについての
レポートを教えていただき
先程読みました

残念ながら
MyJVNバージョンチェッカはなぜか
開けないという状況でしたが(T^T)

ガンプラーの説明がとてもわかりやすく
今まで分からんままに
ウイルスチェックやアップデートをしていたのが、やっと理解することができました

お礼のメールをしたかったのですが
メールフォームを見つけることができず
記事内容と違う文章で申し訳ないと思ったのですがコメント欄にてお礼させて頂きました

利爺さんのブログはカスタマイズについて
内容が充実していますね
困ったときは利爺さんのブログを思い出します

ではまた訪問させていただきますね
小春
Posted by 小春 at 2010年02月07日 09:01
再びごめんなさい
小春です
メールフォームをコメント投稿したあとに見つけました

申し訳ありません

コメントは読まれたら削除されて
全然構わないですから!


ホントおっちょこちょいで
お恥ずかしいです

それでは失礼します

Posted by 小春 at 2010年02月07日 09:03
今晩は。文三です☆

すっかりのご無沙汰で
大変申しわけありません <(_ _)>

いつもそうなのですが
利爺さんのブログに来ると
ついつい読みふけってしまいます。

「なんでもホントによく知ってるんだなァ〜・・・」と
いちいち感心、
そして何度もうなずきながら読ませて頂いております。

また、今回は
倭人さんのブログに
お名前を見つけ

なんだかとても
嬉しかったです♪

さすが利爺さん!
やる時はやりますネ ^^


それではまた
お邪魔します☆

気合いをこめて本気の応援!
Posted by やるんです!幸福を呼ぶ☆本気のブログ・アフィリエイト by文三 at 2010年02月08日 01:10
こんばんは。
ホテルの例のようなテーブル、以前一度挑戦して訳が分からなくなった苦い経験が・・・(苦笑)。
しかし、分かりやすい説明で、再度挑戦してみようかという気持ちになりました。

ますます、今後とも勉強に立ち寄らせて頂きます。

応援させて頂きます。

Posted by いずっち at 2010年02月09日 00:36
利さん、倭人です。

勝手にご紹介してしまいました^^

利さんをコメントお返し作業に
ひっぱり出さないと
いつも新年会していて
健康に悪いのではという
私の奥深い配慮でつ(爆

テーブル、
改めてじっくり
勉強しにまた来ます。

(いま、ちょっと時間がないので)


では、応援です。


Posted by 倭人 中高年ブログで稼ぐアフィリ大百科 at 2010年02月09日 12:24
こんにちは。文三です!

フライング〜♪
また来てしまいました(笑)

風邪など引いていませんか?

お身体を大切に☆

過去記事
勉強して帰ります。


それでは、また来ますネ♪ 応援します!
Posted by やるんです!幸福を呼ぶ☆本気のブログ・アフィリエイト by文三 at 2010年02月11日 14:43
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/140029583
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。