表
<table>
表はモザイク2.5から使用できるようになりましたが、まだまだ未完成でした。その点、ネットスケープやインターネット･エクスプローラ(Microsoft社)ではHTML3.0の機能を満たしており、独自な拡張も施されています。
表作成
表を作成するには、中のテキストや画像を開始タグ<table>と終了タグ</table>で囲み、その前後が改行されます。また、border属性で罫線を表示したり、入れ子にもできます。そして、表の作成ばかりでなく、<table>タグを画像の額縁として利用でき、これが一番シンプルな使い方かもしれません。たとえば、｢beach_s.jpg｣という画像に額縁を付けたい場合は以下のとおりです。
<table border=10 align=center>
<td>
<img src="../images/beach.jpg">
</td>
</table>
このように、<table>〜</table>の間へは、さらに表を構成する以下のようなタグを挟みます。
横列要素 <tr>： |
表の横列を指定。 |
|
ヘッダセル <th>： |
表の横縦列の見出しに使用し、テキストはボールドで中央寄せ。 |
|
データセル <td>： |
表のデータに使用。 |
|
標題 <caption>： |
表のタイトルに使用。 |
| ヘッダ | ヘッダ | ヘッダ |
|---|
| データ | データ | データ |
| データ | データ | データ |
| データ | データ | データ |
| ←───────横列要素───────→ |
標 題
表の中に表のタグを使用しない文書を挿入した場合、その部分は表の枠外上部へ表示されます。
<table border>
<tr><td>データ</td></tr>
<h4>天気予報</h4>
今日の天気は雪です。
</table>
| |
|
横列要素
<tr>
<tr>〜</tr>に表の横列要素を入れます。横列を複数またがせる場合は、rowspan属性を使用します。
ヘッダセル
<th>
<th>〜</th>に項目の見出しを入れます。この部分は太文字(ボールド)体となり、ほとんどのブラウザがデフォルト(初期設定)は中央寄せ(align=center)の状態となっていますが、ネットスケープでは6.0から左寄せ(align=left)に変更されました。
データセル
<td>
| aaaaaa | bbbbbb | cccccc |
| dddddd | eeeeee |
| ffffff | gggggg | hhhhhh |
中段のデータセルを１
つ少なく設定した場合
<td>〜</td>に表データ(データセル)を入れます。各横列はセルの数を同一に揃えますが、揃ってない時は足らないデータセルの部分がブランクとなります。データは左寄せ(align=left)、縦中央(valign=middle)に指定できます。trとtdで位置が指定してあった場合は、tdで指定したほうが優先されます。
標題
<caption>
これは表のタイトル(標題)を表すタグで、<table>タグの中に置かなければなりません。横列要素タグの中以外なら、<table>タグ内のどこへ置いてもかまいません。デフォルトでは標題が表の上(align=top)に表示されますが、下に置きたければ<caption align=bottom>〜</caption>と設定します。なお、標題は必ず中央寄せされます。
ここまでの説明で、基本的な表を作成できるようになりました。
<table border>
<tr>
<th>aaaaaa</th><th>bbbbbb</th><th>cccccc</th>
</tr>
<tr>
<td>aaaaaa</td><td>bbbbbb</td><td>cccccc</td>
</tr>
<tr>
<td>aaaaaa</td><td>bbbbbb</td><td>cccccc</tf>
</tr>
<caption><b>基本的な表</b><caption>
</table>
| |
| aaaaaa | bbbbbb | cccccc |
|---|
| aaaaaa | bbbbbb | cccccc |
| aaaaaa | bbbbbb | cccccc |
基本的な表
|
<table>タグの属性
罫線
(border、bordercolor)
この属性は<table>タグで使用され、表中セルの周りに罫線が引かれます。ただし、borderを指定しなければ、罫線は引かれません。また、ネットスケ＝プなどではvalueで罫線の幅をピクセル単位に指定できます。
<table border=20>
<tr>
<th>aaaaaa</th><th>bbbbbb</th><th>cccccc</th>
</tr>
<tr>
<td>aaaaaa</td><td>bbbbbb</td><td>cccccc</td>
</tr>
<tr>
<td>aaaaaa</td><td>bbbbbb</td><td>cccccc</td>
</tr>
<caption><b>罫線幅が20ピクセルの表</b><caption>
</table>
| |
| aaaaaa | bbbbbb | cccccc |
|---|
| aaaaaa | bbbbbb | cccccc |
| aaaaaa | bbbbbb | cccccc |
罫線幅が20ピクセルの表
|
罫線幅の値を０(border=0)に指定すると罫線は引かれず、borderを指定しない場合と同じ効果を得られます。
<table border=0>
<tr>
<th>aaaaaa</th><th>bbbbbb</th><th>cccccc</th>
</tr>
<tr>
<td>aaaaaa</td><td>bbbbbb</td><td>cccccc</td>
</tr>
<tr>
<td>aaaaaa</td><td>bbbbbb</td><td>cccccc</tf>
</tr>
<caption><b>罫線幅が０ピクセルの表</b><caption>
</table>
| |
| aaaaaa | bbbbbb | cccccc |
|---|
| aaaaaa | bbbbbb | cccccc |
| aaaaaa | bbbbbb | cccccc |
罫線幅が０ピクセルの表
|
HTML3.0からは罫線の色をbordercolor属性で指定できます。
<table border=20 bordercolor=#ff0000>
<tr>
<th>aaaaaa</th><th>bbbbbb</th><th>cccccc</th>
</tr>
<tr>
<td>aaaaaa</td><td>bbbbbb</td><td>cccccc</td>
</tr>
<tr>
<td>aaaaaa</td><td>bbbbbb</td><td>cccccc</tf>
</tr>
<caption><b>赤い罫線の表</b><caption>
</table>
| |
| aaaaaa | bbbbbb | cccccc |
|---|
| aaaaaa | bbbbbb | cccccc |
| aaaaaa | bbbbbb | cccccc |
赤い罫線の表
|
また、インターネット･エクスプローラなどではbordercolorright、bordercolorleft属性で表の立体的な罫線側面の色を指定するころができます。ただし、ネットスケープなどは、これら側面の色を指定する属性をサポートしておりません。
| aaaaaa | bbbbbb | cccccc |
|---|
| aaaaaa | bbbbbb | cccccc |
| aaaaaa | bbbbbb | cccccc |
罫線幅が20ピクセル
罫線右側面が赤い表
| |
| aaaaaa | bbbbbb | cccccc |
|---|
| aaaaaa | bbbbbb | cccccc |
| aaaaaa | bbbbbb | cccccc |
罫線幅が20ピクセル
罫線左側面が赤い表
|
表、セル、標題の位置
(align)
align属性は表を構成する４つのタグで、それぞれ位置を指定します。まず、<table>(表作成)タグでalign属性を使った場合、左(left)、中央(center)、右(right)が指定でき、<img>タグの時と同じように続くテキストを回り込ませたり、hspaceやvspaceも使用可能です。
<table border align=left hspace=16 vspace=6>
<tr>
<th>左</th><th>中央</th><th>右</th>
</tr>
<tr>
<td>aaaaaa</td><td>bbbbbb</td><td>cccccc</td>
</tr>
<tr align=center>
<td align=left>a</td><td align=center>b</td><td align=right>c</td>
</tr>
<caption><b>表本体の位置</b></caption>
</table>
文書が続きます。文書が続きます。文書が続きます･･････。
| 左 | 中央 | 右 |
|---|
| aaaaaa | bbbbbb | cccccc |
| a | b | c |
表本体の位置
文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。
次に<tr>, <th>, <td>タグでalign属性を使った場合、セル中のテキストや画像の水平位置を制御できます。指定できる位置は<table>タグの時と同じく、左(left)、中央(center)、右(right)があり、｢左寄せ｣がデフォルト位置です。
| 左 | 中央 | 右 |
|---|
| aaaaaa | bbbbbb | cccccc |
| a | b | c |
セルデータの位置
| |
<table>
<tr>
<th>左</th><th>中央</th><th>右</th>
</tr>
<tr>
<td>aaaaaa</td><td>bbbbbb</td><td>cccccc</td>
</tr>
<tr align=center>
<td align=left>a</td><td align=center>b</td><td align=right>c</td>
</tr>
<caption><b>セルデータの位置</b></caption>
</table>
最後に<caption>(標題)タグでalign属性を使った場合は、これまでの記述例で示したとおり表の上(top)か下(bottom)が指定できます。デフォルトは上(top)です。
セル中テキストの縦位置
(valign)
<tr>, <th>, <td>タグで指定できるvalign属性はセル中のテキストや画像の縦位置を制御します。指定できる位置は上(top)、中央 (middle)、下(bottom)、ベースライン(baseline)があり、｢中央寄せ｣がデフォルト位置です。
<table border>
<tr valign=top>
<th>上</th><td>aaaaaa<br>
aaaaaa</td><td>aaaaaa</td>
</tr>
<tr>
<th>中央</th><td>bbbbbb<br>
bbbbbb</td><td>bbbbbb</td>
</tr>
<tr valign=bottom>
<th>下</th><td>cccccc<br>
cccccc</td><td>cccccc</td>
</tr>
<tr valign=baseline>
<th>ベースライン</th><td>dddddd<br>
dddddd</td><td>dddddd</td>
</tr>
<caption><b>テキストの縦位置</b><caption>
</table>
| |
| 上 | aaaaaa
aaaaaa | aaaaaa |
|---|
| 中 | bbbbbb
bbbbbb | bbbbbb |
|---|
| 下 | cccccc
cccccc | cccccc |
|---|
| ベースライン | dddddd
dddddd |
dddddd |
|---|
テキストの縦位置
|
<[th | td] nowrap>
表は各セルのテキスト長とブラウザのウィンドウ幅を考慮して、うまく収まるようセル幅が決められるため、テキストは任意の位置で改行されてしまいます。<th>か<td>タグのnowrap属性を使えば、セル内のテキストが改行しないよう設定でき、nowrapを指定したセル中のテキストを改行する時は<br>タグを使ことで、ユーザが任意に改行できるわけです。
<b> nowrapを指定しない場合</b><br>
<table border width=30%>
<tr><th>aaaaaa</th><th>bbbbbb</th></tr>
<tr><td>aaaaaa</td><td>nowrapを指定していないこの表では、
テキストの改行位置が表の幅で決まります。</td></td>
</table>
<b> nowrapを指定した場合</b><br>
<table border width=30%>
<tr><th>aaaaaa</th><th>bbbbbb</th></tr>
<tr><td>aaaaaa</td><td nowrap>nowrapを指定したこの表では、
テキストが表の幅より長くなっても、明示的に指定<br>
しない限り改行しません。</td></tr>
</table>
nowrapを指定しない場合
| aaaaa | bbbbb |
|---|
| aaaaa | nowrapを指定していないこの表では、テキストの改行位置が表の幅で決まります。 |
nowrapを指定した場合
| aaaaa | bbbbb |
|---|
| aaaaa | nowrapを指定したこの表では、テキストが表の幅より長くなっても、明示的に指定
しない限り改行しません。 |
<[th | td] colspan=value>
セルを複数の縦行にまたがせるよう指定できる属性で、１がデフォルト値です。<th>か<td>タグで使用し、以下の記述例では<th colspan=2>というタグが縦２列にまたがるセルで、次の横２列のセル分を意味します。
<table border>
<tr>
<th>aaaaaa</th><th colspan=2>bbbbbb</th>
</tr>
<tr>
<td>aaaaaa</td><td>bbbbbb</td><td>cccccc</td>
</tr>
<tr>
<td>aaaaaa</td><td>bbbbbb</td><td>cccccc</td>
</tr>
<caption><b>colspanを使った表</b><caption>
</table>
| |
| aaaaaa | bbbbbb |
|---|
| aaaaaa | bbbbbb | cccccc |
| aaaaaa | bbbbbb | cccccc |
colspanを使った表
|
<[th | td] rowspan=value>
セルを複数の横行にまたがせるよう指定できる属性で、１がデフォルト値です。<th>か<td>タグで使用し、以下の記述例では<th rowspan=2>というタグが横２列にまたがるセルで、次の縦２列のセル分を意味します。
<table border>
<tr>
<th>aaaaaa</th><th>bbbbbb</th><th>cccccc</th>
</tr>
<tr>
<td>aaaaaa</td><td rowspan=2>bbbbbb</td><td>cccccc</td>
</tr>
<tr>
<tr>aaaaaa</td><td>cccccc</td>
</tr>
<caption><b>rowspabを使った表</b><caption>
</table>
| |
| aaaaaa | bbbbbb | cccccc |
|---|
| aaaaaa | bbbbbb | cccccc |
| aaaaaa | cccccc |
rowspanを使った表 |
cellpaddingはセルの中身(テキスト、画像)と罫線との間隔を指定する属性で、デフォルト値が１です。
<table cellspacing=value>
celspacingは罫線の太さを指定する属性で、デフォルト値が２です。以下の作例ではborderで外枠幅、cellpaddingで罫線と中身の間隔も指定してみました。
<table border=20 cellpadding=5 cellspacing=10>
<tr>
<th>aaaaaa</th><th>bbbbbb</th><th>cccccc</th>
</tr>
<tr>
<td>aaaaaa</td><tf>bbbbbb</td><td>cccccc</td>
</tr>
<tr>
<td>aaaaaa</td><tf>bbbbbb</td><td>cccccc</td>
</tr>
<caption align=bottom><b>borderが20、cellpadding
が10、cellspacingが10の表</b><caption>
</table>
|
| aaaaaa | bbbbbb | cccccc |
|---|
| aaaaaa | bbbbbb | cccccc |
| aaaaaa | bbbbbb | cccccc |
borderが20、cellpadding
が10、cellspacingが10の表
|
borderを指定しないか、あるいはborder=0でcellpaddingやcellspacingを指定すると、スペースのみが取られるため、広がった表を作成できます。
| aaaaaa | bbbbbb | cccccc |
|---|
| aaaaaa | bbbbbb | cccccc |
| aaaaaa | bbbbbb | cccccc |
罫線のない表の画面
<[table | th | td] width=value>
width属性を用いれば、表全体の幅やセル毎の幅を指定できます。幅はピクセル値か、<table>タグで用いる場合、文書が表示されているウィンドウ幅に対して、<th>、<td>タグで用いる場合、表全体の幅(th、td)に対する割合(パーセンテージ)で指定します。指定した幅は、それが表を作る上で狭すぎると無視されます。
<table border width=50%>p
<tr>
<td width=70%>幅が70％のセル</td><td width=30%>幅が30％のセル</td>
</tr>
<tr>
<td>aaaaaa</td><td>bbbbbb</td>
</tr>
<caption><b>幅が50％の表</b></caption>
</table>
| 幅が70％のセル | 幅が30％のセル |
aaaaaa | bbbbbb |
幅が50％の表
<[table | th | td] height=value>
height属性を用いれば、表全体の高さやセル毎の高さを指定できます。高さはピクセル値か<table>で用いる場合、文書が表示されているウィンドウ幅に対して、<th>、<td>で用いる場合、表全体の高さ(th、td)に対する割合(パーセンテージ)で指定します。指定した高さは、それが表を作る上で低すぎると無視されます。
<table border width=50% height=15%>p
<tr>
<td>高さが15％のセル</td><td>高さが15％のセル</td>
</tr>
<tr>
<td>aaaaaa</td><td>bbbbbb</td>
</tr>
<caption><b>高さが15％の表</b></caption>
</table>
| 高さが15％のセル | 高さが15％のセル |
| aaaaaa | bbbbbb |
高さが15％の表
表の入れ子
表は入れ子に出来ます。表の中へ表を作ることで、より複雑な表の作成が可能です。
<table border>
<tr>
<th>作曲家</th><th>作品</th>
</tr>
<tr>
<td>ベートーベン</td><td>
<table border width=100%>
<tr><td>交響曲</td><td>第９</td></tr>
<tr><td>ピアノ協奏曲</td><td>第５</td></tr>
<tr><td>ヴァイオリン協奏曲</td><td>第１</td></tr>
</table>
</tr>
<tr>
<td>ブラームス</td><td>
<table border width=100%>
<tr><td>交響曲</td><td>第４</td></tr>
<tr><td>ピアノ協奏曲</td><td>第２</td></tr>
<tr><td>ヴァイオリン協奏曲</td><td>第１</td></tr>
</table>
</tr>
<caption><b>２人のＢ</b></caption>
</table>
|
| 作曲家 | 作品 |
|---|
| ベートーベン |
| 交響曲 | 第９ |
| ピアノ協奏曲 | 第５ |
| ヴァイオリン協奏曲 | 第１ |
|
| ブラームス |
| 交響曲 | 第４ |
| ピアノ協奏曲 | 第２ |
| ヴァイオリン協奏曲 | 第１ | |
２人のＢ
|
空セル
ネットスケープの表では空のセル(<th></th>、<td></td>)を無視するため、たとえ記述しても｢例１｣のように空いたところがつながってしまいます。これは、項目の境界であればとくに問題ないのですが、他のセル部分では少し違和感があるかもしれません。そこで空セルの罫線を表示させる方法として、セル内へ<br>(改行)タグか全角スペースを挿入し、｢<th><br></th>｣や｢<td> </td>｣と記述すれば、｢例２｣のような表示になります。ただ、<br>(改行)タグと全角スペースの両方を挿入すれば｢例３｣のようになり、全角スペースの代わり半角スペースを挿入しても機能しないので、ご注意ください。
| aaaaaa | bbbbbb | cccccc |
| aaaaaa | bbbbbb |
| aaaaaa | bbbbbb |
例１
| |
| aaaaaa | bbbbbb | cccccc |
| aaaaaa | bbbbbb |
|
| aaaaaa | bbbbbb |
|
例２
| |
| aaaaaa | bbbbbb | cccccc |
| aaaaaa | bbbbbb |
|
| aaaaaa | bbbbbb |
|
例３
|
空のセルも使い道はあり、たとえば縦横の罫線を一部だけ太くしたい時に利用できます。横方向なら<tr></tr>、縦方向なら<th></th>か<td></td>を使用します。
<table border>
<tr><th>項目１</th><th></th>
<th>項目２</th><th>項目２</th></tr>
<tr></tr><tr></tr>
<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>
| |
| 項目１ | | 項目２ | 項目２ |
|---|
|
|
| データ１ | | データ２ | データ３ |
| データ４ | | データ５ | データ６ |
| データ７ | | データ８ | データ９ |
|
ネットスケープやエクスプローラなどでは、bgcolor属性によってデータセル(<th>、<td>タグ)へ背景色を付けることが可能です。
<th | td [bgcolor=#rrggbb | color_name]>
たとえば、
<table align=right border=1 width=50%>
<tr><th bgcolor=#eee8aa>タイトルの背景色は｢palegoldenrod｣</th></tr>
<tr><td bgcolor=#ffb6c1>第１セルの背景色は｢lightpink｣</td></tr>
<tr><td bgcolor=#98fb98>第２セルの背景色は｢palegreen｣</td></tr>
</table>
| タイトルの背景色は｢palegoldenrod｣ |
|---|
| 第１セルの背景色は｢lightpink｣ |
| 第２セルの背景色は｢palegreen｣ |
セルの背景画
ネットスケープやエクスプローラなどでは、background属性によってデータセル(<th>、<td>タグ)の背景へ画像を張り付けることが可能です。
<table align=right border=1 width=50% height=60>
<td background="../images/raindrop.gif" valign=top>
<font color=#f08040><h3>背景に画像を使ったセル</font></h3></td>
</table>
表の応用
ネットスケープなどの表ではセルに入る文書の特別な制限がなく、見出し、図、リスト、フォームや水平線なども挿入できます。下記の例では、それぞれのセルに見出し、図、リスト、フォーム、水平線を入れてみました。
<table border width=80% bgcolor=#b0c4de>
<tr><td><h3>テスト</h3>これはレベル３の見出しです。</td>
<td align=center><img src="../images/wallpapr.gif" vspace=6></td></tr>
<tr><td><form> お名前： <input size=10 text=text></form></td><td>
<ul>
<li>１番目の項目
<li>２番目の項目
</ul>
<form> コメント： <input size=40 type=text></form>
</td></tr>
<tr><td cilspan=2><br>
これは幅が表の90パーセント、厚さが10ピクセルの水平線です。<br>
<hr size=10 noshade><br><p align=right>以上 </p></td></tr>
<caption><b>見出し、図、リスト、フォーム、水平線を挿入した表</b></caption>
</table>
テストこれはレベル３の見出しです。 |
 |
|
|
これは幅が90パーセント、厚さが10ピクセルの水平線です。
以上 |
見出し、図、リスト、フォーム、水平線を挿入した表
このように表のセル内へ自由に文書や画像を置けるのを利用すれば、｢マルチコラム｣の機能を使わず複数コラムの文書を作成することができます。論文などで利用するダブルコラム(２段組)の場合は次のように記述し、同じ基本構造で３段組、４段組も可能です。なお、rowspanやcolspan属性を応用すれば、もっと複雑なレイアウトが可能になります。
<table size=100%>
<tr>
<td valign=top size=50%>
左側のテキスト
</td>
(段の切れ目は文書をプレビューしながら、ちょうどよい場所を選んで下さい)
<td valign=top size=50%>
右側のテキスト
</td>
</table>
また、水平線を使って次のような表を作ることも可能です。
<table>
<tr><td colspan=3><hr size=3 noshade></td></tr>
<tr><th>名 前</th><th>年齢</th><th>性別</th></tr>
<tr><td colspan=3><hr size=1 noshade></td></tr>
<tr><td>山田太郎</td><td>36歳</td><td>男性</td></te>
<tr><td>山田花子</td><td>27歳</td><td>女性</td></tr>
<tr><td>John Smith </td><td>32歳</td><td>男性</td></td>
<tr><td>Mary Smith</td><td>30歳</td><td>女性</td></td>
<tr><td colspan=3><hr size=2 noshade></td></tr>
</table>
| |
|
| 名 前 | 年齢 | 性別 |
|---|
|
| 山田太郎 | 36歳 | 男性 |
| 山田花子 | 27歳 | 女性 |
| John Smith | 32歳 | 男性 |
| Mary Smith | 30歳 | 女性 |
|
|
あるいは、３Ｄの罫線が嫌なら、入れ子にした表の背景色を利用すればいいわけです。
<table border=0 cellpadding=1 cellspacing=2 align=center>
<td bgcolor=#008040 align=center>
<table border=0 cellpadding=4 cellspacing=1>
<tr><th><font color=#dcdcdc>名 前</font></th>
<th><font color=#dcdcdc>年齢</font></th>
<th><font color=#dcdcdc>性別</font></th></tr>
<tr><td bgcolor=#ffffff>山田太郎</td>
<td bgcolor=#ffffff>36歳</td>
<td bgcolor=#ffffff>男性</td></tr>
<tr><td bgcolor=#ffffff>山田花子</td>
<td bgcolor=#ffffff>27歳</td>
<td bgcolor=#ffffff>女性</td></tr>
<tr><td bgcolor=#ffffff>John Smith</td>
<td bgcolor=#ffffff>32歳</td>
<td bgcolor=#ffffff>男性</td></tr>
<tr><td bgcolor=#ffffff>Mary Smith</td>
<td bgcolor=#ffffff>30歳</td>
<td bgcolor=#ffffff>女性</td></tr>
</table></td>></table>
| |
| 名 前 | 年齢 | 性別 |
|---|
| 山田太郎 | 36歳 | 男性 |
| 山田花子 | 27歳 | 女性 |
| John Smith | 32歳 | 男性 |
| Mary Smith | 30歳 | 女性 | |
|
|
ヘッダセルの背景色がグリーン系なので、その部分の文字だけ薄いグレーを使っています。データセルの背景と同じ白を使わなかった理由は、読者がこの文書を普通の(つまり白い)紙で印刷する時、ブラウザの性格上、背景の色や画像を無視した場合に文字は飛んでしまうからです。印刷したら何も写っていなかったということが、黒っぽい背景を使ったページではよくあるので、注意したほうがいいでしょう。 | |
