【初心者向け】JavaScript入門⑥「HTMLの表機能」


#はじめに
[初めてのJavaScript(オライリー本)](https://www.amazon.co.jp/%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AEJavaScript-%E3%82%B7%E3%82%A7%E3%83%AA%E3%83%BC-%E3%83%91%E3%83%AF%E3%83%BC%E3%82%BA/dp/4873113229)を調達しましたが、筆者にとっては少しとっつきにくい。そこで、本書のサポートページにあるコラム[『JavaScriptで学ぶ文系の人にもわかるプログラミング入門』](https://www.marlin-arms.com/jpn/column/js101/lesson03.html)から出発することにしました。

# 学習すること

***[第8章 HTMLの表機能](https://www.marlin-arms.com/jpn/column/js101/lesson08.html)***

>第7章までの「けいさんれんしゅう」では， ダイアログボックスを使って問題を１問ずつ表示しては答えを入力してもらって， ブラウザのウィンドウには簡単なメッセージを書いただけでした。 それなりに計算の練習にはなるでしょうが， 利用者の使い勝手（使いやすさ）を考えると大きな改良の余地がありそうです。 

***目次***

* 簡単な表の作成
* スタイル指定（表機能）
    * 表を囲むタグ
    * 1行を囲むタグ
    * 項目を囲むタグ
    * ファイル全体のスタイル指定
* 計算プリント
* 表の「デバッグ」
    * 罫線を指定する
* まとめ



# ①簡単な表の作成（HTML文書）

```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行目を次のように変えてみましょう。

```html

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)などを使って指定可能。

# 次回やること
[第９章 表を使った要素の整列](https://www.marlin-arms.com/jpn/column/js101/lesson09.html)

>前の章で習ったHTMLの表（テーブル）の機能を使って， 目的のJavaScriptのプログラムで扱う要素をきれいに並べる方法を学びましょう。 

# おわり
今回はここまでです。