9.いろいろなテクニックを学ぶ(その2)

【表を作る】

@基本的な表(テーブル)の作り方

テーブルを作るには、<TABLE>〜</TABLE>タグを用い、 その中に各行を<TR>〜</TR>で表し、さらに各列を <TD>〜</TD>で記述します。
<TABLE>タグには、テーブル全体のサイズを指定するwidth及びheight、外枠の太さを決める border、表のなかの各項目を区切る枠線のサイズを指定するcellspacing、各項目で枠線とテキストの 間の余白を指定するcellpadding等の多くの属性があり、必要に応じこれらを指定します。
 
    <TABLE width="◇" height="◆" border="☆" cellspacing="★" cellpadding="※">

  数値は、いづれもピクセルで指定します。但し、width及びheightは全画面に対する
パーセント(%)でも指定可です。
簡単な２行３列の表を例示します。


 
      <TABLE border="2">
      <TR><TD>１行１列</TD><TD>１行２列</TD><TD>１行３列</TD></TR>
      <TR><TD>２行１列</TD><TD>２行２列</TD><TD>２行３列</TD></TR>
　　　</TABLE>

　　上のようにソースプログラムを記述すると、ブラウザには次ぎのように表示されます。


　　　
１行１列１行２列１行３列
２行１列２行２列２行３列


A表枠を合成する―複数行あるいは複数列にわたるセル(表枠)の作成―

　　横(行)方向の枠を合成するには、合成を開始するセルの<TD>タグにcolspan="合成する枠の数" を記入します。縦(列)方向の枠を合成するには、合成を開始するセルの<TD>タグにrowspan="合成する枠の数" を記入します。いづれも合成することによって消えるセルの記述は削除します。

　　例として、3行3列の9セルある表で、１行目の1列から3列までを合成し、2行目の1列と3行目の１列を合成 することを行なってみましょう。


 
    <TABLE border>
    <TR><TH colspan="3">１行１列</TH></TR>
    <TR><TD rowspan="2">２行１列</TD><TD>２行２列</TD><TD>２行３列</TD></TR>
    <TR><TD>3行２列</TD><TD>3行３列</TD></TR>　　　
    </TABLE>

(注)<TH>タグは、<TD>タグと 同様の機能を持っていますが、それ以外にセル内のテキストを中央に揃え、かつ太く表すというテーブルヘッダーとしての役割もします。

　　上のようにソースプログラムを記述すると、ブラウザには次ぎのように表示されます。


　　　
１行１列
２行１列２行２列２行３列
３行２列３行３列



Bテーブルに色彩を施す

<TABLE>、<TR>および<TD>に属性bgcolorを加えることでテーブル全体、特定の行に、あるいは 特定のセルに背景色を付けることが出来ます。

 
      <TABLE bgcolor="#add8e6" border >
      <TR bgcolor="#ffd700"><TH colspan="3" >１行１列</TH></TR>
      <TR><TD rowspan="2" >２行１列</TD><TD>２行２列</TD><TD>２行３列</TD></TR>
      <TR bgcolor="#ffc0cb"><TD>3行２列</TD><TD bgcolor="#ee82ee">3行３列</TD></TR>　　　
      </TABLE>

　　上の例は、テーブル全体の背景色をライトブルー("#add8e6")にし、第１行目を黄金色("#ffd700")に指定し、第３行を ピンク色("#ffc0cb")とし、更に３行３列をヴァイオレット("#ee82ee")に指定しています。
　　このようにソースを記述すると、ブラウザには次のように表示されます。　　
　　　
１行１列
２行１列２行２列２行３列
3行２列３行３列


(注)<TABLE>タグの背景色の指定は全てのセルに、 <TR>ではその行全体に、<TD>ではそのセル単独に働きます。
そして、上の例からも分かるように <TABLE>の指示よりも<TR>の指示が優先し、<TR>の指示よりも<TD>の指示が優先していることが 理解できますね。

【表の応用(例)】

@画面に余白を設ける
画面の左右に余白を取る機能がある<BLOCKQUOTE>という引用文のタグを学習しましたね。<BODY>を使って 
             < BODY leftmargin="☆" topmargin="★">  
                           　　                     (☆、★は、ピクセル数)
と記述することで、前後、左右にマージン(余白)を取ることが出来ます。
　しかし、残念なことにこの機能はインターネットエクスプローラには有効ですが、ネットスコープナヴィゲータには ぜんぜん効果がありません。
　そこで<TABLE>タグを使って、例えば、次ぎのように記述すると前後にそれぞれ ５％の、左右にそれぞれ４％のマージンを取ることが出来ます。 
              <BODY>
              <TABLE height="90%" width="92%">
                  　　　(　本　文　)
　　　　　　　</TABLE>
              </BODY>
A画像･写真などのイメージとそのテキストをバランスよく配置する
ある行に２つのセルを設け、一方に画像を、他方に説明文を貼り付け見栄えのよい画面構成とする。
｢例｣
　　　　　<TABLE>
          <TR><TD>画像１</TD><TD>テキスト１</TD> </TR> 
          <TR><TD>画像２</TD><TD>テキスト２</TD> </TR> 
　　　　　</TABLE>
　　　　
Ａ社製パソコン
大特価、７万５千円
　　 Ｂ社製パソコン
大奉仕品、６万８千円

B各項目に背景色がある定義型リストを作る
｢例｣
　　　　　<TABLE>
          <TR><TD bgcolor="#ff69b4">タイトル</TD></TR> 
          <TR><TD bgcolor="#ffc0cb">項目１  </TD></TR> 
 　　　　 <TR><TD bgcolor="#90ee90">説明文１</TD></TR> 
          <TR><TD bgcolor="#ffc0cb">項目２  </TD></TR> 
　　　　　<TR><TD bgcolor="#90ee90">説明文２</TD></TR>
　　　　　<TR><TD bgcolor="#ffc0cb">項目３  </TD></TR> 
 　　　　 <TR><TD bgcolor="#90ee90">説明文３</TD></TR> 
          </TABLE>
　 　
プロフィール
名前/ハンドル名
本名- - -山田　三郎
ハンドル名- -権太為造
出身地/生年月日
滋賀県栗東町で、昭和二十五年三月生まれる
趣味
競馬、囲碁、釣り、美人鑑賞、ジャズ鑑賞
外国旅行、読書、パソコン通信