Help us understand the problem. What is going on with this article?

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

はじめに

初めてのJavaScript(オライリー本)を調達しましたが、筆者にとっては少しとっつきにくい。そこで、本書のサポートページにあるコラム『JavaScriptで学ぶ文系の人にもわかるプログラミング入門』から出発することにしました。

学習すること

第8章 HTMLの表機能

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

目次

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

①簡単な表の作成(HTML文書)

example08-01.html(簡単な表)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>けいさん9</title>
<style>
    td {
        text-align: right;
    }
</style>

</head>
<body>
<h2 style="text-align: center;">けいさんれんしゅう</h2>

<!--表部分-->
<table style="margin: auto;">
    <tr>                  <!-- 表示の1行に該当 -->
        <td>7 + 6</td>
        <td></td>
        <td style="width: 20%;">  </td> <!-- 回答スペースを表全体の20% -->
        <td>13 + 4</td>
        <td>= </td>
    </tr>
    <tr>           <!-- 表示の1行に該当 -->
        <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(計算練習9)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>けいさん9</title>
<style>
    td {
        text-align: right;
    }
</style>

</head>
<body>
<h2 style="text-align: center;">けいさんれんしゅう</h2>

<!--表部分-->
<table style="margin: auto;">
    <tr>                  <!-- 表示の1行に該当 -->
        <td>7 + 6</td>
        <td></td>
        <td style="width: 20%;">  </td> <!-- 回答スペースを表全体の20% -->
        <td>13 + 4</td>
        <td>= </td>
    </tr>
    <tr>           <!-- 表示の1行に該当 -->
        <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; ーー罫線の指定。これで1ピクセルの罫線を周囲に引くことになる。solidの代わりに、dotted,dashed,double,...の指定が可能。詳しくは「css border」といったように検索してみてください。
  • width: ○○% ーーひとますの幅を指定。%、px(ピクセル単位)、cm、mm、文字の幅(em)などを使って指定可能。

次回やること

第9章 表を使った要素の整列

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

おわり

今回はここまでです。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away