|
表（テーブル）の利用
|
|---|
| 目次 | 1.はじめに | 2.セルを連結する | 3.データの表示 |
| 4.テーブルの区切に色をつける | 5.テーブルの応用 | 6.セクションの見出しについて |
下のような表をテーブルと呼んでいる。このテーブルは3行4列となっている。テーブルはデータを整理して表示するためにいろいろな方法で利用されている。ここではテーブルの基礎から中級程度の応用まで説明する。皆さんもいろいろな応用方法を考えてもらいたい。
図6-1のテーブルは、次のように定義したものである。
<table width="75%" border="5" cellpadding="2" cellspacing="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td> 注意：<td>と</td>の間のスペースは全角文字にすること
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
テーブルは <table></table>で定義する。
行は <tr></tr>で定義する。例では３行であるので<tr></tr>が３回繰り返されている。
列（セル）は <td></td>で定義する。各行のなかに４列あるので<tr></tr>のなかに<td></td>が４回繰り返されている。セルの中に書かれるデータは<td></td>のなかに書かれる。
widthはテーブル全体の幅を定義する。％指定したときは開いた画面の幅に対する相対的な幅となる。数字のみ指定したときはピクセル指定となり、絶対的な変更できない幅となる。この数字を変更し、ブラウザの横幅を変更してテーブルがどの様に表示されるか確認すること。
borderはテーブルの周りの枠のことである。この数字（単位はピクセル）を変更することで、どの様にテーブルが変わるか確認すること
cellpaddingは、セルの枠と内容との隙間調整を行うものである。セル内の上下左右の余白をかえるものである。この数字（単位はピクセル）を変更することで、どの様にテーブルが変わるか確認すること。
cellspacingは、セルとセルとを区切る枠の幅を調整するものである。この数字（単位はピクセル）を変更することで、どの様にテーブルが変わるか確認すること。
このテーブル定義は面倒なものであるので、エクセルで基本的な表を作成しておきＨＴＭＬで保存機能を利用して作成中のＨＴＭＬ文書に追加することで簡単に作成できる。作業手順はここをクリックする。
ＩＥでは次のようにＢＯＲＤＥＲＣＯＬＯＲＬＩＧＨＴ、ＢＯＲＤＥＲＣＯＬＯＲＤＡＲＫを用いて、テーブルのボーダー部分に色をつけることができるが、ＮＳでは機能せずグレーで表示される。次の例は1行1列のテーブルの例である。
<table width="100" border="20" height="100" bordercolorlight="#33FFFF" bordercolordark="#0000FF">
<tr>
<td> </td>
</tr>
</table>
【問題】
このテーブルを額縁とみなして、中に画像を表示する方法を考えよ
【問題】
２行２列のテーブルを作成しなさい。なおボーダー＝５、セルパッディング＝２、セルスペーシング＝２としなさい。
次のテーブルでは、１行目のセルが３列分連結されている。このように横方向にセルを連結するには ｃｏｌｓｐａｎアトリビュートを使用する。
図６−３ セル横結合の例
これは、次のように記述したものである。
<table width="500" border="5" height="100" cellpadding="2" cellspacing="2"
align="center">
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
【問題】
上の例で、colspan＝”２”として、次のように記述したらどのようなテーブルになるか
<td colspan="2"> </td>
<td> </td>
【問題】
上の問題で、colspanを含む行を下にしたらどのようなテーブルになるか。
<td> </td>
<td colspan="2"> </td>
次のテーブルでは1列目のセルが３行分結合している。このように列方向にセルを結合するには、rowspanアトリビュートを使用する
図６−４ セル縦結合の例
これは次のように結合したものである
<table width="500" border="5" height="100" cellpadding="2" cellspacing="2"
align="center">
<tr>
<td rowspan="3"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
セルの横結合の時は、2行目以降のTD行は３行あったのに対し、この例では２行であることに注意する。
【問題】
次のように定義したテーブルはどのような形式となっているか
<table width="500" border="5" height="100" cellpadding="2" cellspacing="2"
align="center">
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
【問題】
次のように定義したテーブルはどのような形式となっているか
<table width="500" border="5" height="100" cellpadding="2" cellspacing="2">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
【問題】
次のようなテーブルは、どのように定義されているか。推定した結果を実行して、推定が正しかったか確認しなさい。
テーブルでデータを表示するには、表示したい文字を<td>文字列</td>のように記述すればよい。図６−１のテーブルで文字を表示させる。幅を７５％から５００ピクセルに変更する。
<table width="500" border="5" cellpadding="2" cellspacing="0">
<tr>
<td>地名</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
| 地名 | |||
図６−５ データの表示例
すると図６−５のように文字が左寄せで表示される。このように何も指定しなければテーブルのデータは左寄せで表示されるように定義されている。
これを右寄せにするには、下のように<div></div>定義を行い、align="right"とすればよい。中央寄せにするなら、align="center"とすればよい。
<tr>
<td><div align="right">地名</div></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
【練習】
地名という文字を、中央表示、右表示しなさい
図６−５では、セル幅が勝手に変更されています。これはセル幅を指定していないのでシステムが自動的に設定することによります。いま全体幅が５００ピクセルであるので、地名は２００ピクセル、残りは１００ピクセルと指定してみます。また知名は中央寄せとします。また、セルには背景色がつけられています。
|
地名
|
|||
図６−６ セルに背景色を指定したもの
<tr>
<td width="200" bgcolor="#66ffff"><div align="center">地名</div></td>
<td width="100"> </td>
<td width="100"> </td>
<td width="100"> </td>
</tr>
のように、それぞれのTDについて幅を指定します。
テーブルの背景色はBGCOLORで定義します。色の定義の仕方は、＃の次の2桁は赤、次の2桁は黄、次の2桁は青の明るさを指定しています。それぞれ０からＦまでの１６進数の2桁となっていますので、２５６階層の明るさを指定しています。全体で２５６×２５６×２５６種類の色を表現することができます。
テーブルには、区切部分に色をつける命令はありません。しかしゼミのホームページの中段には青色で区切られたテーブルが使用されています。これは背景色が青色のテーブルの中に目次表示用のテーブルを作成するという方法をとっているのです。
図６−６のテーブルの背景をすべて＃６６ｆｆｆｆとします。そのテーブルを背景が＃ｆｆ００００の１行１列のテーブルに入れると次のようになります。
|
どのような処理をしているか推定しなさい。
ＨＴＭＬには、データを一定の間隔で表示するいわゆるタブ機能はありません。
しかし次のような表を作成したりすることは多い。
|
故障の原因
|
主な原因
|
従たる原因
|
| 差動ギアのうなり | 軸受けベアリングの担体の仕上げ不充分 | 組み立て検査項目の設定間違い |
上の例では ボーダーを０に設定しているので、テーブル枠が表示されていない。
複雑な画面を設計するときは基本的な枠をテーブルで作成し、その内側に各種のテーブルを入れることもある
| この中にテーブルを入れる | この中にテーブルを入れる | この中にテーブルを入れる |
上の例は
<table width="510" border="1" cellspacing="0" cellpadding="0" height="200">
<tr>
<td width="170">この中にテーブルを入れる</td>
<td width="170">この中にテーブルを入れる</td>
<td width="170">この中にテーブルを入れる</td>
</tr>
</table>
となっている。この中にテーブルを入れるの部分に<table></table>で囲まれたものを書けばよいことになる。
そこで青色で定義した３列テーブル定義と赤色で定義した３行テーブル定義を書き込むと次のようになる
<table width="510" border="1" cellspacing="0" cellpadding="0" height="200">
<tr>
<td width="170">
<table width="170" border="1" cellspacing="1" cellpadding="1"
height="200">
<tr>
<td width="170"> </td>
<td width="170"> </td>
<td width="170"> </td>
</tr>
</table>
</td>
<td width="170">
<table width="170" border="1" cellspacing="1" cellpadding="1"
height="200">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td width="170">この中にテーブルを入れる</td>
</tr>
</table>
実際の実行結果は次のようになる
|
|
|
この中にテーブルを入れる |
このセクションの見出し部はテーブルを使用して作成している。テーブルを作成したとき<td></td>の間に文字を入れなければ、テーブルをブラウザで確認することはできない。このため、<td> </td>のように全角の空白文字を入れるように指示した。ところが、このセクションの見出しのように上下に高さ"5"ラインを入れているが、この低さにしようとしても、空白文字の高さがあり、それ以下にすることはできない。つまり、次の青文字のサンプルのように、文字を含ませないような指定をする必要がある。
もうひとつ、説明していないタグが使用されている。<th></th>である。これは<tr></tr>と同様であるが、「見出し部」として機能する。つまり、<h></h>と同じように、見出文字として強調表示する機能がある。
次のリストは、このセクションの見出し部の記述である。
<table width="630" border="0" cellspacing="0"
cellpadding="4">
<tr>
<td height="5" bgcolor="#0066FF"></td>
</tr>
<tr>
<th bgcolor="#99CCFF">
<div align="center"><font size="4">表（テーブル）の利用</font></div>
</th>
</tr>
<tr>
<td height="5" bgcolor="#0066FF"></td>
</tr>
</table>