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




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


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

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

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


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

2010年02月12日

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

■ 5-19 テーブルの細部設定


ブログは、ホームページと異なって、ページ表現するにも制約があります。

その制約の元で、レイアウト的にホームページのような仕様に近づけるためには、テーブル機能を十分に使いこなすことが必要ですし、欠かせないものになっています。

とくに、物販のアフィリエイトでは、訪問した方に商品の画像を見せたり、商品の詳細を説明するのにテーブル機能が頻繁に使われています。

前回は
テーブル内の改行スペースが外に追い出される現象での、空白行を取り去る方法の

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


解決方法(1)を確認しました。

参照 
テーブル作成とその応用(1)
●統計データなどに使うテーブルを作成する
http://tosiji-dreamafi.seesaa.net/article/140029583.html


テーブル機能を確認して、タグの使い方を確認します。

(2)テーブルタグのみを改行無しでの入力。

テーブル内に自動で入力される改行(空白行)が存在するため、
テーブルの外に改行(空白)が追い出されて、意図もしない場所に空白が表示される結果になる。

と言う現象でしたら、

「テーブルを作るHTMLを、自動改行しなければいい」

と言うことになりますね。

テーブル内の改行を取り払って確認して見ましょう。

確認の前に
「この記事の詳細設定」の項目 ⇒ 「改行を<br/>タグに変換しない」
に設定変更した項目を、初期設定の
  ⇒ 「改行を<br/>タグに変換する
に戻しておきます。

【例1】
<
自動改行有りの入力

<div class="samp table">
<table>
<tr>
<th bgcolor="#e0ffff">
ホテルA
</th>
</tr>
<tr>
<td width="110">
宿泊:20,000円 
予約可能
送迎出来ます。
</td>
</table>
</div>

の<br>改行ありの形式で入力していた各タグを
  ↓

【例2】
改行無しの入力

<div class="samp table"><table><tr><th bgcolor="#e0ffff">ホテルA</th></tr><tr><td idth="110">宿泊:20,000円<br>予約可能<br>送迎出来ます。</td></table></div>

の<br>改行なしの形式に変更します。
  ※<br>のタグの表示は見えませんが、自動的に<br>タグが
   入力されています。
  ※記事やタグの入力に邪魔になるので隠されています。

改行を取り払うと言うことは
タグ入力で空白を作らずに「例2」のように連続で入力することです。

テーブルのHTMLをその形式で入力してしまえば、
影響を受けていた記事部分でも「自動改行」を生かしたままでいいと言うことになりますね。

文頭から、改行を直接入力していく流れより、
テーブルの箇所だけの「改行無しの入力」の方が簡単ですね。

「例2」の赤文字で示した<br>
テーブル内での箇条書きのように、改行が必要なところにだけ、直接入力して強制改行をする方法です。

改行が無ければ一行で、また、長いテキストはセル内で「折り返えし」で表示されます。

テーブル作成の時は、
最初は「例1」のように記入したタグが分かりやすい入力の方法で記入して、
HTMLタグが間違いないことを確認してから「例2」のように「改行無し」の形式に変更することが望ましいです。

初めから「改行無し」の形で入力したら、
項目やデータ数の多いテーブルではタグの流れが掴みにくく、余計に煩らわしくなりミスも出やすくなります。

(2)の方法は割と簡単に出来ましたね。

その形式を使って、難しいと思っていたテーブル作成が上手くいきます。


■テーブル作成で比較的によく使うタグ。

テーブルの表示を細かく設定するタグは、数多く有りますが、比較的に使われているタグをまとめてみました。

【資料】
比較的使用されるタグ

【テーブル】
align 
align left
align right
caption
caption align 
【罫線】
border
border-color
border-style
border-collapse

【セル】
width
height
col
cellpadding
cellspacing

colspan 
rowspan  
【背景・背景画像】
bgcolor 
background
【文字】
text-align
font-size
font weight

font-color
font-face
line-height


= テーブルの表示位置(記事内)
= テーブルの回りこみ(右)
= テーブルの回りこみ(左)
= テーブルに名前を付ける
= テーブルの名前の表示位置

= 罫線を表示・罫の太さ
= 罫線の色
= 罫線の種類
= 罫線を重ねる(単線)

= セルの横幅
= セルの縦幅
= セルの横幅(table属性)
= テキスト位置からの余白
= セルとセルの間の空き
= セルの結合(横)
= セルの結合(縦)

= 背景色(各セル毎指定可)
= 背景画像(各セル毎指定可)

= 文字の表示位置
= 文字サイズ
= の字の太さ
= 文字色
= 書体
= 行間(行送り)


各プロパティ(属性)には、属性値が付きます。
属性値はテーブルのデザインを考えて設定するのが望ましいです。

一覧の赤文字で表示してあるプロパティ

基本的にはCSSに組み込み、その他はテーブル作成の時にHTMLとして入力した方が、融通の利く多様なテーブルが作れます。

参照 
テーブル作成とその応用(1)
●CSSのセレクタに、基本的に組み込んだ方がいいプロパティ類
http://tosiji-dreamafi.seesaa.net/article/140029583.html


例えばCSSに「width:100px;」のように、固定したセルの横幅を定義してしまうと、新しくテーブルを作る時にも、そのサイズが反映されたセルが作られてしまいます。

テーブル作成時にHTMLで「<width="●">」(下記:注参照)と入力した方が、応用の利いた、形の異なるテーブルの作成が楽になります。

ただし、項目のセル<th>やデータセル<td>に<width="●">と個々に横幅を設定するよりも、table属性の<col>を使用して
  
   ※ col = column(カラム、欄)

  <table border="1">  ← テーブル全体の罫線
    <col width="100">  ← 1列目の横幅
    <col width="150">  ← 2列目の横幅
     <tr>
     <th>
      ・ 
  </table>    

table要素での指定の方法が一般的です。

同じく
table bgcolor="#ffffff">
の指定では、テーブル全体のバックカラー(background-color・bgcolor)が指定され、

td bgcolor="#ffffff">
だと、該当するセルのみのバックカラーになります。

このことは
<table>要素は、テーブル全体を設定する親要素の役割を持ち、
その中に<tr>や<th><td>の子要素を包括(入り子)していることになります。

また<th>や<td>は<table>の管理の下にあるが
おのおの独立している機能が働くと捉えることが出来ます。


table用のCSSのセレクタは、いろいろな形のテーブルを作成する目的で、
各テーブルが共通、共有出来ることを考えて定義します。

記事を書くごとに新しいtableセレクタをCSSに定義する状態は避けましょう。


■項目数を増やす。
テーブル内の項目数を横に増やすには

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

の形式です。
<tr>〜</tr>で括られた
<th></th>を連続で必要項目数分を追加します。

■データ表示用の行を増やす。
データ入力用の行を下の方に増やすには、

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

の形式で、
<tr></td>〜</tr></tr>で締められる形の
括り部分を1単位として追加していきます。

■<tr>要素に収めるセルの数は合わす。
項目数が3列のテーブルに、データ列を2個しか設定していないと、列数が合わないことになります。

そのような時のテーブルの表示は、
罫線の無いセルが表示されるか、またはテーブルが崩れることになります。

列数を合わすには
<td></td>で中身(テキスト)の無いセルを作り、その空セルで数を合わします。

空セルで数を合わしても罫線が表示されなければ、
テキストの代わりに「&hbsp;」(小文字入力:非改行スペースの意)を入力します

テーブルにはシンプルなものから、統計表のような複雑なものまでありますので、項目の増やし方、データ部分の増やし方は理解しておきましょう。


■セルの結合
テーブルを作っていると、
セルを2個、3個分横に結合して使いたいとか、あるいは
縦に繋げたいと言うことも出てきます。

セルの結合の仕方は
横結合 = colspan="n"  ←nは任意の数字
縦結合 = rowspan="n"
  
のタグで、繋ぎたいセルの数(n)を入力します。
ただし、セルの数を合わすことに注意して下さい。

【例3】
セルの結合・セルのバックカラー

<div class="samp table">
<table border=1 cellspacing="16" bgcolor="#cccccc"
col width="80"
col width="150"
<tr>
<th>@列</th>
<th>A列</th>
</tr>
<tr align="center">
<td rowspan="2" bgcolor="#cbffff">縦セルの結合とバック色</td>
<td width="100">A</td></tr>
<tr align="center">
<td>B</td></tr>

<tr align="center">
<td colspan="2" bgcolor="#ffff00">横セルの結合とバック色</td>
</tr>
</table>
</div>

【下記のHTMLタグは確認しておきましょう】

「テーブル要素の属性・属性値」
●cellspacing="16"

 
●bgcolor="#cbffff"  
●col width="●"  
⇒ セルとセルの間隔を「16px」空ける。
  ※普通はcellspacing="0"を設定。
   サンプルの為、設定を変えています。
⇒ テーブル全体のバック色。
⇒ セルの横幅。
 
「データ要素の属性・属性値」
●rowspan="2" 
●colspan="2" 
⇒ 縦にセルを2個繋ぐ(数字は繋ぐセルの数)
⇒ 横にセルを2個繋ぐ(数字は繋ぐセルの数)

■「例3」の表示例
   ↓

@列A列
縦セルの結合とバック色
横セルの結合とバック色

■cellspacing="0"の時の表示例
   ↓

@列A列
縦セルの結合とバック色
横セルの結合とバック色

■CSS使用の表示例
   ↓

@列A列
縦セルの結合とバック色
横セルの結合とバック色


<table>の属性・属性値を変更することで、
見た目の異なるテーブルが作成できましたね。

とくにCSSを利用したテーブルは、テキストの表示位置から、罫線までの間にスペース(padding)を取っていますので、スッキリした感じの表になります。

今回、確認したことは、
ブログにテーブルを上手く利用して、ページのレイアウトをしていく基本になります。

次回は、ブログで使うことの出来る
物販のアフィリエイトで使用されている
テーブルと画像の組み合わせやリンクの設定を確認します。



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

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



タグ:HTML TABLE TR Th TD 罫線
この記事へのコメント
利さん、倭人です。

テーブルや
セルの結合は
いま、丁度PC教室で
学んでいたところでした。

タグではなく
HPビルダーでの操作方法を
単に学んでいるだけですが、
少し進歩です^^

では、応援します。
Posted by 倭人 中高年ブログで稼ぐアフィリ大百科 at 2010年02月12日 10:21
こんばんは
例3の表示例など私でも理解できました。
cellspacingの使い方でテーブルの
見栄えが違いますね。
応援です。
Posted by hebaseijin at 2010年02月12日 21:02
相変わらずの情報量ですね!

何度かお邪魔して少しずつ勉強させて頂きます。
HTMLは苦手・・・と言ってはいけませんよね!

まずは応援致しました。
Posted by いずっち at 2010年02月23日 00:46
すごい情報量ですね!
はじめてお邪魔しましたが、びっくりです。
これからも少しずつ勉強させて頂きにお邪魔します。
HTMLはさわりだけしか分かりませんので。
まずは応援です
Posted by 情報商材口コミレビュー at 2010年04月17日 15:10
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

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

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