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




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


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

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

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


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

2010年06月24日

文章の段組み(2):table

■ 5-25 <teble>タグで段組みを作る

前回は<float>による記事の段組みを確認しましたので、
同じ段組みの形式を<table>タグを使って作成する方法を確認します。

<table>要素は
情報を整理して、統計表やグラフなどを作成する機能に優れ、表だけではなく記事や画像などの配置に自由度の高いHTMLタグになっています。

テーブル作成機能を使うことで、罫囲みや段組みなどに応用して、結構使われています。

<table>は、細かい設定ができ、表を作り慣れている人にとって、ある程度の出来上がりのイメージが掴みやすい重宝するプロパティです。

便利な反面
表(テーブル)を作るためにはタグを数多く使用するので
HTML構文が複雑になり、表示や処理速度が遅くなるのではという懸念もあります。

<table>はCSSプロパティとして推奨されています。

基本的には、HTMLだけの使用を考えるより
CSSに定義して装飾することが望ましい流れになっています。

CSSに定義するには
HTMLの構造や理屈が理解できないと、HTMLの範囲、CSSの領域の判断がつきかねます。

<table>で段組みを作成するにも
<table>の機能がよく理解できていないと段を組むことも難しいです。

段組みを作成しながら
<table>の特性と、そのCSSの定義を確認します。

<table>の機能は下記の参照を。




【<table>段組使用】

【<table>の構造形】

<table>
 <tr>
    <th>●</th>
 </tr>
 <tr>
    <td>●</td>
 </tr>
</table>

⇒tableの親要素(表・目録)
⇒table row(tableの並び・列)
⇒table header(頭・タイトル)


⇒table data(データ)


の形式ですね。

文章の段を左と右に組むので、
<td>のデータセル(ボックス)は、左セル用と右セル用の2個作ります。

<td>の横へのセルの並びは
  <tr>
    <td> 文章@ </td><td> 文章A </td>
  </tr> 
<tr>タグの中に
<td>タグを2個、横に並べて記入する形ですね。

<th>〜</th>の
項目タグは「段組み」には必要のないタグですので削除します。


段組みを作成してみましょう。

■ 段組み作成

テーブルタグ記入

<table border="1px" cellspacing="12" cellpadding="0">
<col width="48%>
<col width="48%>
<tr>
<td> 文章@ </td>
<td valign="top"> 文章A </td>
</tr>
</table>

……………………

タグの説明

<table
border="1px" cellspacing="12" cellpadding="0">

<col width="48%">
<col width="48%">
<tr>
<td valign="top">
文章@
</td>
<td valign="top">
文章A
</td>
</tr>
</table>

⇒テーブルの設定(開始)
⇒罫線の太さ
⇒セルとセルの間隔
⇒セルと文章との間隔
⇒左のセル(ボックス)のサイズ
⇒右のセル(ボックス)のサイズ
⇒テーブル行の設定
⇒左データセル開始・topから表示
⇒文章表示
⇒左データセル閉じる
⇒右データセル開始・topから表示
⇒文章表示
⇒右データセル閉じる
⇒テーブル行の閉め
⇒テーブルの閉め

<table>で作成する、段組みの順序が分かりやすいように
最初は罫線を入れたテーブルを作り表示します。

<table>タグの種類は、下段にまとめていますので、タグを確認しながら
HTMLタグを記入をします。

●<table>の開始タグに

 <border>     ← 罫線の有無(px単位)
 <cellspacing>  ← セルとセルの間(スペース)
 <cellpadding>  ← セル内の文章の表示(セルの罫線からの空き)

必要な属性と属性値を指定します。

●<col width="48%>
は文章を表示するデータセル<td>の左右サイズです。
親要素の<table>で指定することによって、入り子になっている<td>に適応されます。

また、該当する<td>タグの中にセルの幅を直接書いてもかまいません。

  例 = <td width="48%>

<td>にセルの幅を記入したときには、親要素の<table>の
<col width="">の属性は必要の無いタグになりますので、削除します。

●<tr>は「table row」の意味ですね。テーブルの横の「行」の定義です。

「row」は「列」という英語ですが
ここでは「行の定義」ですので意味を取り違わないように。
(縦に<td>を配置するときは<tr>との組み合わせ方があります)

<tr>タグ
記入を忘れると、テーブルは完成しません。

<td>は「table data」の省略形。
データセルです。
文字や画像など、テーブル内に表示する要素を入れ込みます。

<td>属性に値を書き込むことによって、変化が付けられます。
属性と属性値には

 <background-color="・"> ← セル内のバックの色(下地) 
 <align="center"> ← データ(文章)の表示位置  
 <valign="top">  ← データ(文章)の表示を開始する位置

などがありますね。


<table>で実際に文章データを入力して段組みにします。
「文章」には利爺の書いた記事の一部を使用します。


テーブル作成の基本は、下記の
●【HTMLの形式】のような改行無しでの各タグの記入ですね。

「改行無し」の詳細については、上記リンクのページ参照。
  ■ テーブル作成とその応用(1)

【HTMLの形式】
<table border="1px" cellspacing="12" cellpadding="0"><col width="48%><col width="48%><tr><td>中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ド</td><td valign="top">ラマである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。</td></tr>></table>

   ↓
【表示1】
中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ド
ラマである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。


【表示1】はテーブルの作成ですので、罫線が表示されています。

@記事表示領域内におけるテーブルの位置と上下左右の各余白
Aテーブル内の各セルの余白の取り具合を確認して

問題が無ければ
<table border="1px" cellspacing="12" cellpadding="0">
  ↓
<table border="0px" cellspacing="12" cellpadding="0">

赤字の罫線の値を「border="0px"」にするか、削除して罫線を表示しないようにします。

【表示2】

「段組みの表示」
…………
中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ド
ラマである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。
…………

罫線を表示しない段階で
<table>で作る「文章の段組み」の完成です。



【注意すべき点】

【表示1、2】では、文章の送りに微妙な違いがありますね。

【表示1】では<table border="1px">の罫線(1px)が表示されているため、
個々のデータセル内の文章領域から、左右の罫線の太さの「計:2px」のスペースを使っているためです。

わずか「2px」でも、表示に影響がでますので
罫線無しの表示を確認して、文章の切れ目を調整することが望ましいです。

下記の【表示3】【表示4】も同じ理屈です。

<float>で作る段組みより、<table>で作る方が割と簡単に出来ますね。


■ 文章の段組を罫線で囲ってみる。

参考記事や引用記事、あるいは記事を文章を罫で囲んで強調するときがありますね。
罫囲みのタグの組み合わせは
今回の段組を作った<table>要素全体を<div style="margin:>〜</div>で括ることで楽に作成出来ます。

<margin>で指定する外罫(破線)は、<table>の表の外側の罫と同じ位置に引きます。

<table>の表の外側の罫と同じ位置の<margin>指定は
<div style="margin:0px 12px 0px 0px; border:1px dotted;border-color:blue;">
または
<div style="margin-right:12px; border:border:1px dotted;border-color:blue;">

として、破線の色は「青」にしています。

【HTML】
<div style="margin:0px 12px 0px 0px; border:1px dotted;border-color:blue;"> 【 table 要素 】
</div>

<table>要素を外罫の表示のための<margin>で括ります。
   ↓
【表示3】
中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ド
ラマである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。


<table>の外罫と<margin>の罫が重なって表示されていますが
破線の色が青のため確認しにくいです。

テーブル内の余白も全て、思い通りの空きになっています。

<table border="1px" cellspacing="12" cellpadding="0>
の「 border="1px"
を削除して、罫線無しにします。
   ↓
【表示4】
中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ド
ラマである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。


囲み罫の中に、段組みの文章が表示されました。

この例では、ブログの記事表示域内に表示されるように
<col width="48%>
「%」を使い、相対サイズで設定しています。

CSSで定義しているブログの記事域はほとんど「px」の単位で設定しています。

「px」のような絶対サイズで指定する時には、表示域のサイズを超えないように気を付けましょう。

<table>では、各セルのサイズが決まっているため
表示領域内にスムーズに表示できるので「カラム落ち」の心配があまり有りませんね。

    注
   ●カラムとは(column) 縦の列を言い
   ホームページやブログレイアウトのフレームで構成する列数のこと。
   1カラムは1列、2カラムは2列、3カラムは3列の構成となる。

………

以上の形が<table>を使った「段組み」の方法です。
罫線を表示しないことによって、前回確認した<float>の段組みと同じような形になりましたね。

段組みの方法を応用することで
文章と画像、画像の組み合わせなど、適切なレイアウトができます。

ブログの「アフィリエイト」の商品紹介でも、<table>機能を使って、
商品と画像をうまく組み合わせて、訪問した方の目をひいています。

<table>は、いろいろな形に応用ができ、便利な機能を持っていますが
あくまでも表作成が目的だと言う流れです。

段組みに<table>を使うことは、流れに背くようですが

個人的には
代替できるHTMLタグは、タグの使い方を間違えなければ、大いに使っていいと思っています。

……

■ 段組み用のテーブルをCSSに定義する

段組み用のクラス(セレクタ)を
「.dangumi table」  と名前を仮に付けます。
クラス名の最初の「 . 」は必ず付けます。

段組み用テーブル:CSS

.dangumi table{
text-align:left;
vertical-align: top;
cellspacing:12px;
cellpadding:0px;
}

.dangumi td {
text-align:left;
vertical-align: top;
}

⇒classの呼び出し
⇒文章の開始位置(左揃え)
⇒文章の表記位置(上から)
⇒セルとセルの間隔
⇒罫線と文章の余白
⇒セレクタ閉め

⇒データセルの呼び出し
⇒文章の開始位置(左揃え)
⇒文章の表記位置(上から)
⇒セレクタ閉め

CSSには
セレクタ(クラス)名に属性(プロパティ)と属性値(値)を記入します。

文字の
●文字の大きさ    
●文字の種類   
●行の高さ(行送り)

⇒ font-size:12px;
⇒ font-weight:bolder;(normal)
⇒ line-height:1.5em;

などは定義しなくてもいいですね。
CSSのセレクタ「body」や「text」で定義しているので、
定義が無ければ形式が継承され適用されます。

段組み内の
表示書体の形状を変えたい時は、上記の要領でCSSに定義しておきます。

今回は
文章を段組みで表示するためのテーブル機能を使用しますので

段組みの表示には、テーブルの罫やセルの罫などの細かい定義は必要ないですが

このクラスを使って統計表などのテーブルを作るだろう
ことを考えてCSSには定義しておきます。


●罫の太さ  
●罫の種類  
●罫の色

⇒ border:1px;
⇒ border-style: solid;
⇒ border-color:#000000;

は統計表などを作る時は必要な要素ですので定義しておきまます。

セルの
●バックの色
 
⇒ bgcolor:#000000;

も必要ないですが、
段組みの強調のために使うことも有りますね。

段組み用HTMLタグの記入

<div class="dangumi table">
<table>
<col width="48%>
<col width="48%>

<tr>
<td>文章@</td>
<td>文章A</td>
</tr>
</table>
</div>

HTMLタグに記入している
●<col width="48%>のセルのサイズは
CSSに定義せずに、

HTMLタグの直接記入で使いましょう。

CSSにサイズを指定しておくと
他のテーブル作成に使う時にも
定義されたセルのサイズで表示されてしまい、応用が難しくなります。

【表示A】
中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。


文章を罫で囲む時は
<div style="margin:0px 12px 0px 0px; padding:12px;border:1px dotted;border-color:blue;">【入れ子】</div>

のタグに
<div class="dangumi table">〜</div>を入れ子にします。
   ↓

【表示B】
中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公
開された根強い人気の歴史ドラ
マである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。


以上がCSSを使った「段組み」になります。

テーブルを使った、文章の段組みでは
各セルに文章を行数などを考え、バランスよく入れる
と言う作業があります。

各セルが独立していますので、AセルはAセルに流し込まれた文章を、
BセルはBセル用の文章を表記するようになっています。

ブログでは「組版」をそれほど重要視していませんので、

例えば、
新聞や印刷・出版で人気のある「組版ソフト」の「クォーク・エクスプレス」(QuarkXPress)のように、セルとセルを連結(リンク)しておけば、一連の長い文章を流し込むと、Aセルで溢れる文章は、自動的にBセルに流れていく仕組みがありません。

その仕組みであれば、文章を気にすることなく、左右にセルを配置して、文章を流し込むという簡便な作業で済みますが、HTMLのテーブルでは無理なようです。

    注
   ●IE7やFirefox、Opera、Safariなどでサポートされる
    CSS3の「Multi Column」の機能では可能と言う情報が
    ありますが、未確認です。  

いづれ、ウエブで使うHTMLも、組版の考え方を取り入れる時代が
来るでしょうが、
 
今は
あるがままの機能を応用して十分に使い切りましょう。



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

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



この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


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

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

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