#はじめに
初めてのJavaScript(オライリー本)を調達しましたが、筆者にとっては少しとっつきにくい。そこで、本書のサポートページにあるコラム『JavaScriptで学ぶ文系の人にもわかるプログラミング入門』から出発することにしました。
学習すること
第7章までの「けいさんれんしゅう」では， ダイアログボックスを使って問題を１問ずつ表示しては答えを入力してもらって， ブラウザのウィンドウには簡単なメッセージを書いただけでした。 それなりに計算の練習にはなるでしょうが， 利用者の使い勝手（使いやすさ）を考えると大きな改良の余地がありそうです。
目次
- 簡単な表の作成
- スタイル指定（表機能）
- 表を囲むタグ
- 1行を囲むタグ
- 項目を囲むタグ
- ファイル全体のスタイル指定
- 計算プリント
- 表の「デバッグ」
- 罫線を指定する
- まとめ
①簡単な表の作成（HTML文書）
example08-01.html(簡単な表)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>けいさん９</title>
<style>
td {
text-align: right;
}
</style>
</head>
<body>
<h2 style="text-align: center;">けいさんれんしゅう</h2>
<!--表部分-->
<table style="margin: auto;">
<tr> <!-- 表示の１行に該当 -->
<td>7 + 6</td>
<td>＝</td>
<td style="width: 20%;"> </td> <!-- 回答スペースを表全体の20% -->
<td>13 + 4</td>
<td>= </td>
</tr>
<tr> <!-- 表示の１行に該当 -->
<td>16 - 3</td>
<td>＝</td>
<td style="width: 20%;"> </td> <!-- 回答スペースを表全体の20% -->
<td>7 - 1</td>
<td>＝ </td>
</tr>
</table>
<p style="text-align: right;">せいかい＿＿＿＿まちがい＿＿＿＿</p>
</body>
</html>```
# ②「計算プリント」のページをつくる
```html:example08-02.html(計算練習９）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>けいさん９</title>
<style>
td {
text-align: right;
}
</style>
</head>
<body>
<h2 style="text-align: center;">けいさんれんしゅう</h2>
<!--表部分-->
<table style="margin: auto;">
<tr> <!-- 表示の１行に該当 -->
<td>7 + 6</td>
<td>＝</td>
<td style="width: 20%;"> </td> <!-- 回答スペースを表全体の20% -->
<td>13 + 4</td>
<td>= </td>
</tr>
<tr> <!-- 表示の１行に該当 -->
<td>16 - 3</td>
<td>＝</td>
<td style="width: 20%;"> </td> <!-- 回答スペースを表全体の20% -->
<td>7 - 1</td>
<td>＝ </td>
</tr>
</table>
<p style="text-align: right;">せいかい＿＿＿＿まちがい＿＿＿＿</p>
</body>
</html>
③【重要】表の「デバッグ」
表を作ったときに、どうもうまく並ばないということが時々起こります。このような、エラーを修正する（デバッグする、debug）ときに役に立つ方法をご紹介しておきましょう。それは、border="1"を指定して様子を見るというものです。
プログラム8-2の16行目を次のように変えてみましょう。
16 <table border="1" style="margin: auto;">
「border="1"」のように罫線を指定するのは、現在は推奨されていない書き方ですが、以前よく使われていたものなので、現在でもブラウザが対応してくれています。あくまでもデバッグ用の機能と心得ておきましょう。本番では、<style>...</style>などのスタイルで指定します。
まとめ
HTMLー表（テーブル）関連のタグと属性
- tableー表全体を囲む
- trーー表の横1行を囲む
- td－－表の1項目を囲む
CSS
- text-align: left | center | rightーー位置揃えの指定
- border: solid 1px black; ーー罫線の指定。これで１ピクセルの罫線を周囲に引くことになる。solidの代わりに、dotted,dashed,double,...の指定が可能。詳しくは「css border」といったように検索してみてください。
- width: ○○% ーーひとますの幅を指定。%、px（ピクセル単位）、cm、mm、文字の幅(em)などを使って指定可能。
次回やること
前の章で習ったHTMLの表（テーブル）の機能を使って， 目的のJavaScriptのプログラムで扱う要素をきれいに並べる方法を学びましょう。
おわり
今回はここまでです。