表作りシリーズの第３回目です。今回はまず、表の全体の大きさを指定する練習をやってみたいと思います。
たとえば、前回こんな表を表示させました。
この時のセル幅は、各セルの幅の中の一番大きいデータに合わせられて表示されています。
一番左の縦三行の場合、「みつりん」「にゃんこ」「幽」の三つのデータが入っていますが、「みつりん」と「にゃんこ」が
共に四文字なのでこのデータの幅にセルの幅が自動的に合わせられます。ですから、「幽」の隣にはスペースが自動的に
作られます。
これではつまらないので、表全体の大きさ、縦と横のサイズを変えてみたいと思います。たとえば次のようにです。
こんな表示をさせたい時には、画像の表示の時に登場した、WIDTH （幅・横） HEIGHT （高さ・縦）を指定するタグを使うことができます。幅を広げたいならWIDTH="300"（ピクセル数）と書くか、WIDTH="50%" のように記述します。
ピクセル、覚えてらっしゃいますよね。画面の小さな小さな点の最小単位のことで、お漬け物のことではなかったです。（そりゃ、ピクルスや！）
パーセントで指定する場合は、ブラウザのウィンドウの縦と横の幅に対する相対的な割合での表示になりますし、ピクセルで指定する場合は「この大きさで表示しなさい」という絶対的な指定になります。
上の画像のタグは以下のとおりです。
今までのものに、 WIDTH="80%" HEIGHT="50%" を挿入しているだけです。( table10.htm )
<table border align="left" width="80%" height="50%">
<caption align="top">ふろよんオールスターズ</caption>
<tr>
<td>ハンドル</td>
<td>ショップ定食</td>
<td>講座</td>
<td>夕食</td>
</tr>
<tr>
<td>Sortie</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>
<tr>
<td>幽</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
</table>
なお、この例の場合、縦横をそれぞれ 80% 50% と相対的な割合で指定していますので、開いているブラウザの縦と横のサイズにより表の見え方が変化するはずです。ブラウザの縦横のサイズを変更して、表のサイズがそれによって変化することを確かめてみましょう。
では、今度はピクセル数で絶対的にサイズを指定してみましょう。
今度は、ブラウザの縦横のウィンドウサイズを変更しても、表全体の大きさが変化しないことを確認してください。
さきほどの table10.htm にちょっと変化を加えて、次のようにしてみました。変わったのは、「あそこ」ですが、おわかりですよね。（ table11.htm ）
<table border align="left" width="500" height="180">
<caption align="top">ふろよんオールスターズ</caption>
<tr>
<td>ハンドル</td>
<td>ショップ定食</td>
<td>講座</td>
<td>夕食</td>
</tr>
<tr>
<td>Sortie</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>
<tr>
<td>幽</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
</table>
これを table11.htm とでも名付けて保存し、ブラウザで確認してみるとこうなります。
今度は表全体のサイズを絶対指定しているので、ブラウザのウィンドウサイズを変えても、表のサイズは変化しません。
では、次の練習に入ります。
今度は、セルの列数（横の並び数）や行数（縦の並び数）に変化を持たせて
見せることに挑戦してみます。
こんな表示をさせてみようというわけです。
つまり、一番左端の縦のセル（行）をすべて結合させて、ひとつのセルのように表示させています。
このように複数のセルをまたがって、ひとつのセルとして表示させる時は<TD>～</TD>に変化を付けて、次のようにタグを書きます。
<TD ROWSPAN="またがるセルの数">データの中身</TD>
ROW（ロウ）は行のことで、SPAN（スパン）は幅という意味かな。上の表示例の場合、縦の行数を五つまたがって、一つのセルのように
表示させようとしていますから、
<TD ROWSPAN="5">神戸自作オフ</TD>のように書くことになります。
しがたって、上の例のように表示させたい場合は、次のようなタグになるはずです。（ table11.htm に変更を加えています ）
<table border align="left" width="500" height="180">
<caption align="top">ふろよんオールスターズ</caption>
<tr>
<td rowspan="5">神戸自作オフ</td>
<td>ハンドル</td>
<td>ショップ定食</td>
<td>講座</td>
<td>夕食</td>
</tr>
<tr>
<td>Sortie</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>
<tr>
<td>幽</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
</table>
（ table12.htm ）
では、本日最後の練習は、複数の列（横の並び）にまたがるセルを作りましょう。
今度は COLSPAN を用います。 COL はコラム（列）の略語、SPANは幅でしたよね。
ということは、さっきの ROWSPAN="またがるセルの数">データ</TD> と似たような
書き方をすれば良いわけです。
イメージとしては、こんな表示をさせたい場合に、どんなふうにタグを書けば
良いでしょうか。
横に四つのセルをまたがって表示させることになるので COLSPAN="4" を使えば良いということになりますね。あとは、一列ごとに <tr>を一組ごとにもしくは単独で使えば、上のような表示ができるはずです。僕はこんなふうに書いてみました。
<table border align="left" width="500" height="180">
<caption align="top">ふろよんオールスターズ</caption>
<tr>
<td colspan="4">神戸自作オフ</td>
</tr>
<tr>
<td>ハンドル</td>
<td>ショップ定食</td>
<td>講座</td>
<td>夕食</td>
</tr>
<tr>
<td>Sortie</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>
<tr>
<td>幽</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
</table>
次回は枠線の表示に変化をもたせたり、セルの背景に色を付けてみたいと思います。
では、また次回まで。(^_^)/~
