Lesson 8 HTMLの表機能
Lesson 7までの「けいさんれんしゅう」では， ダイアログボックスを使って問題を１問ずつ表示しては答えを入力してもらって， ブラウザのウィンドウには簡単なメッセージを書いただけでした。 それなりに計算の練習にはなるでしょうが， 利用者の使い勝手（使いやすさ）を考えると大きな改良の余地がありそうです。
たとえば， ショッピングのサイトではウェブページ内に住所や名前などをまとめて入力， 表示する機能が備わっています。 最初のダイアログで住所， 次のダイアログで名前などと， ひとつひとつ入力するのでは面倒でしょう。 計算問題も１問やるたびに答えを合わせるのではなく， 10問とか20問とかまとめて問題を解いてから， 最後に答合わせをしてくれた方が使いやすいでしょう。 図8-1のようなページにしたいところです。
|
| 図8-1 計算練習ページ |
このページを表示すると， 20問の練習問題を２列に並べて表示してくれ， 答えを記入して， ［さいてん］ボタンを押すと採点をしてくれます（図8-2）。 また， ［つぎのもんだい］ボタンを押すと， 別の問題（20問）を表示します。
|
| 図8-2 計算練習ページの［採点］機能 |
このページは小学生が見慣れている「プリント」に似ているので， なじみもあり， 戸惑うことなく計算練習ができそうです。 このようなプログラムを目指しましょう。 まず一旦HTMLに戻り， 要素をきれいに並べるために表関連のタグを覚え， つづいてJavaScriptによる表の生成方法を身につけます。
簡単な表の作成
HTML（ウェブページ）の「表（table）」の本来の使い方は， 文字どおり「表」を作ることです。 まず， 図8-1のような単純な表を作ってみましょう。
|
| 図8-3 簡単な表 |
この表を作るには， プログラム8-1のようなHTML文書を作ります。
プログラム8-1 example08-01.html 簡単な表
HTMLのコードを詳しく見るのは久しぶりなので， <body>から</body>までの本体部分をひと通り追ってみましょう。 まず10行目はLesson 2で見たように， 見出し（header）です。 align属性を用いて， align="left"とすると左寄せ， align="center"で中央揃え（センタリング）， align="right"で右寄せが指定できます。
12行目から23行目が表の部分ですが， これは下で詳しく検討しましょう。 24行目は</body>で本体部分の終わり， 25行目は</html>でHTML文書の終わりを示すものでした。
表を囲むタグ ── <table>...</table>
では， 表の部分（12-23行目）を見ましょう。 まず， 12行目は<table>タグです。 表（テーブル）は<table>タグで始まって</table>で終わります。 この<table>タグにはborder属性とalign属性がついています。 align属性は上でも見た<h1>と同じ指定です。
border="1"の指定は表の升目を区切る罫線の太さを指定するものです。 ここでは"1"を指定しています。 すぐ下で出てきますが， border="0"とすると罫線を書かないようにできます。
１行を囲むタグ ── <tr>...</tr>
この表は図8-3を見るとわかるように10行×３列ですが， リストの12-22行目がその中身を表しています。 <tr>...</tr>で囲まれた部分が横１行分を表しています。 たとえばリストの13行目は次のようになっています。
13 <tr><td>1</td> <td>右</td> <td>磯川</td> </tr>
HTMLの表は， このように上から下に１行ずつ要素を指定していきます。
項目を囲むタグ ── <td>...</td>
<tr>...</tr>で囲まれた１行の中身を見てみると<td>...</td>というペアが３組あることがわかります。 たとえば， 13行目では， 「１」「右」「磯川」の３つの項目が<td>...</td>に囲まれています。 このそれぞれが罫線で区切られて表示されるわけです。 中身をよく見てみれば， それほど複雑ではありませんね。 では， 計算問題に戻りましょう。
表機能を使ったレイアウト
HTML（ウェブページ）の表（テーブル）の本来の使い方は， 上の例のような文字どおりの「表」を作ることですが， これを使って画像や文字列， 入力を受け取るための「フォーム」やボタンなどを思い通りに配置することができます。 このため， 多くのウェブページで整列の道具として表機能が使われています。 ここでも， この整列機能を使って， きれいに計算問題を並べてみましょう。
計算プリント
まず， 第１段階として図8-3のようなページを考えてみましょう。 小学校でよく配られるような計算練習の「プリント」のようなページです。
|
|
| 図8-3 「計算プリント」のページ |
このページでは， 問題を横２列で並べなければならないので， Lesson 2で学んだ単純なパラグラフ用のタグ（<p>...</p>）では間に合いません。 空白文字などをうまく使えばできるかもしれませんが， かなり大変です。 このために， 表機能を使いましょう。 まずは， JavaScriptでどう生成するかは忘れて， HTMLの世界でこのようなページを表示する方法を見ましょう。
10行２列の表を作るのも， 2行2列の表を作るのも本質的な違いはないので， まずはHTMLの「コード」の量が少なくてすむ2行2列の表を考えてみましょう。 あとで「２行」のところを「10行」に拡張すればよいのです。 図8-4のようなページを作ることにします。
|
| 図8-4 2行2列の問題のページ |
このページのコードは， たとえばプログラム8-2のようになります。
プログラム8-2 example08-02.html 計算練習９
11行目からが表部分です。 まず， <table>タグです。 上の例ではなかったwidth属性がついています。
13 <table width="500" border="0" align="center">
<table>タグの属性としてその幅（width）をピクセル単位で（画面上に描ける最小の点を単位として）指定しています。 最近のモニタは最小でも幅640ピクセル×高さ480ピクセル程度の大きさがあるので， ここで指定したように500ピクセルの幅を仮定しても， 「画面からはみ出して見えない！」と文句を言われることはないでしょう（携帯電話などでは見られませんが， ここではそういった機器は対象としないことにしておきましょう）。
ここでは， border="0"と太さを0に指定して罫線は描かないようにします。 これによって， 線を描かずにレイアウトのためだけに使うわけです。
次の４行のHTMLコードは， 表示の１行に相当するものです。 表で表示される１行が長いので， コードでは４つの行に分けて書きました。
14 <tr><td align="right">7 ＋ 6</td> <td>＝ </td> 15 <td width="20%"> </td> 16 <td align="right">13 ＋ 4</td> <td>＝ </td> 17 </tr>
<tr>...</tr>で表の横１行でした。 １行に現れる各要素は<td>...</td>で区切ります。 この例だと「7 ＋ 6」「＝ 」「 」「13 ＋ 4」「＝ 」の５つの要素が一番上の行に並ぶことになります。 ３番目の「 」では文字は何も表示されないで空欄になります。
<td>タグにも位置を決めるalign属性は指定できて， その枠の中で（とは言っても， この例では実際には枠は見えないのですが）左寄せ， 右寄せ， センタリングを指定できます。
<td width="20%">のwidth="20%"は， この升目の幅を表全体の20%にするよう指定する属性です。 これによって， 左側の問題（「7 ＋ 6＝ 」の後に表全体の20%分の幅をとって答を書くだけのスペースをあけています。 なお， 表全体の横幅が500ピクセルでその20%なので， ここは「width="100"」と書いても通常は同じことになります。
メモ
「通常は同じことになります」と書いたのは， じつはブラウザによっては同じにならない場合があるからです。 升目の幅や高さはいろいろなところで指定可能なので， ブラウザが実際に表示する幅や高さを決めるアルゴリズムはかなり複雑になります。 たとえば， 表全体の幅を指定したり， 「この升目の幅は指定するが， 残りは適当にやってくれ」といった指定ができます。 さらに， <td>タグのwidth属性に指定した幅の合計が100%を超えてしまっても何とか表示するといった処理もしています。 このため， 場合によっては上のように単純に計算したら同じ幅になるはずのものでも， 同じにならない場合があるのです。 エラーといえばエラーには違いないのですが， ブラウザを作る側の立場に立つと大変なところではあります。
上の例のように， <tr>...</tr>の中に<td>...</td>が入れ子になっていることを字下げ（インデント）で表現しておくと， コードの意味がわかりやすくなります。 HTMLによる列挙の表現やJavaScriptのループや条件分岐（if文）などと同じです。
ところで， この２行は次のようにしてもかまわないように思えます。
<tr><td>7 ＋ 6 ＝ </td>
<td width="20%"> </td>
<td>13 ＋ 4 ＝ </td>
</tr>
このコードでは問題ひとつを<td>...</td>で囲んで， あいだに空きを入れてあります。 しかし， こうすると， たとえば図8-5のように「＝」の位置がバラバラになってしまいます。 これでは見栄えが悪いですし， 答を書くのは「＝」の隣なので， これがそろっていないと解答を書きにくいでしょう。 ちょっとしたことですが， 使う人の立場に立ってできるだけ使いやすく， しかもできれば見栄えよく作るために， プログラム8-1ではわざわざ「＝」だけを別の項目としました。
|
| 図8-5 「=」の位置が揃わないレイアウト |
メモ
<td>...</td>の中には， <img>タグを使って図を入れたり， これから学ぶ「ボタン」や入力用の「フォーム」などを指定することもできます。 <table>を使うと， さまざまな要素がきれいに並べられます。
なお， 「スタイルシート」の機能を使っても要素の配置を制御することができます。 ここでは， スタイルシートは用いずに， 比較的単純な表機能（<table>...</table>）を使っておきます。
さて， まだ表の１行目の２問しか終わっていませんでした。 15行目からの４行のHTMLコードで表の２行目の２問を表示しています。 これは上とまったく同じ構造なのでおわかりでしょう。
18 <tr><td align="right">16 − 3</td> <td>＝ </td> 19 <td width="20%"> </td> 20 <td align="right">7 − 1</td> <td>＝ </td> 21 </tr>
今見ているのは２行２列の表なので， これで升目の部分はおわりですが， たとえば10行10列にするならば， この４行のHTMLコードに相当するコードを， あと８つ書けばよいことになります。
その下の</table>は表の終わりを示す終了タグです。
22 </table>
HTML本体の終わりを示す</body>の上にあるのは採点用の欄です。 右寄せして， 正解と間違いの数を書く欄を作っています。
24 <p align="right">せいかい______ まちがい______</p> 25 </body> 26 </html>
表作成用のタグにはこのほかにもいくつかありますが， JavaScriptを使ったレイアウト用には当面ここに出てきたタグがあれば大丈夫でしょう。
表の「デバッグ」
表を作ったときに， どうもうまく並ばないということが時々起こります。 このような， エラーを修正する（デバッグする， debug）ときに役に立つ方法をご紹介しておきましょう。 それは， border="1"を指定して様子を見るというものです。
プログラム8-2の13行目を次のように変えてみましょう。
13 <table width="500" border="1" align="center">
こうすると一目瞭然（図8-6）， どのような要素があるかがすぐにわかります。 表を使ってレイアウトするときは， まずborder="1"を指定しておいて作ってから， 最後にこれを"0"に指定するのがコツなのです。
|
| 図8-6 border="1"を指定 |
まとめ
このLessonでは， 要素をレイアウトするために使うHTMLの表（テーブル）の使い方を学びました。
HTML ── 表（テーブル）関連のタグと属性
- <table>...</table> ── 表全体を囲む
- <tr>...</tr> ── 表の横１行を囲む
- <td>...</td> ── 表の１項目を囲む
- align="left" | "center" | "right" ── 位置揃えの指定
- border="..." ── 表の罫線の太さ。 レイアウトが目的の場合は最後に0を指定する
- width="..." ── ひとますの幅を指定（%あるいはピクセル単位）