QuestScript

04. tableタグ

レッスン3では「ゆうしゃ」のステータスを表示しました。このレッスンでは、表を使ってパーティ全員のステータスを表示します。

tableタグで表を作る

レッスン3では<div>タグを使って「ゆうしゃ」のステータスを表示しました。同じように「せんし」や「そうりょ」「まほうつかい」のステータスを追加すると、4人のステータスが縦に並んでしまいます。

<div>タグでも、style を駆使して横に並べることができますが、ここでは<table>タグを使って表を作り、4人のステータスを横に並べてみましょう。

まず、「ゆうしゃ」のステータスを<table>タグで表示してみましょう。

<!-- battle.html highlight:8-12 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
</head>
<body>
    <table>
        <tr><th>ゆうしゃ</th></tr>
        <tr><td>HP 153</td></tr>
        <tr><td>MP 25</td></tr>
    </table>
    <div>
        <img src="img/dark-lord.png" style="width: 400px;">
    </div>
    <div>
        まおうがあらわれた。
    </div>
</body>
</html>

内容の説明

tableタグの構造

表は複数のタグを組み合わせて作ります。

<table>タグは表全体を囲むタグです。この中に行やセルを入れていきます。

<tr>タグは表の1行を表します。trは「table row（テーブルの行）」の略です。<table>の中に<tr>を並べることで、複数の行を持つ表を作ることができます。

<th>タグと<td>タグはセル（1つのマス）を表します。<tr>の中に入れて使います。

入れ子の構造

表のタグは入れ子になっています。<table>の中に<tr>があり、<tr>の中に<th>や<td>があります。

<table>
  └─ <tr>      ← 1行目
  │    ├─ <th> ← セル
  │    └─ <th> ← セル
  └─ <tr>      ← 2行目
       ├─ <td> ← セル
       └─ <td> ← セル

1行に複数のセルを入れると、セルは横に並びます。これを利用して、4人のステータスを横並びで表示できます。

4人のステータスを表示する

パーティ全員のステータスを横に並べて表示しましょう。1行に4人分のセルを入れます。

<!-- battle.html selection:8-12 highlight:9-11 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
</head>
<body>
    <table>
        <tr><th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th></tr>
        <tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
        <tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
    </table>
    <div>
        <img src="img/dark-lord.png" style="width: 400px;">
    </div>
    <div>
        まおうがあらわれた。
    </div>
</body>
</html>

ブラウザで確認すると、4人のステータスが横に並んで表示されます。

罫線を追加する

表に罫線をつけて見やすくしましょう。style属性を使って罫線を指定します。

<!-- battle.html selection:8-14 highlight:8,9 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
</head>
<body>
    <table style="border: solid 1px black; border-collapse: collapse;">
        <tr style="border-bottom: solid 1px black;">
            <th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
        </tr>
        <tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
        <tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
    </table>
    <div>
        <img src="img/dark-lord.png" style="width: 400px;">
    </div>
    <div>
        まおうがあらわれた。
    </div>
</body>
</html>

borderプロパティ

borderは枠線を指定するプロパティです。solid 1px blackは3つの値を組み合わせています。

<table>にborderを指定すると、表全体を囲む外枠が表示されます。

border-collapseプロパティ

border-collapse: collapseは、表のセル間の隙間をなくすための指定です。

この指定がないと、<table>の枠線と各セルの枠線の間に隙間ができてしまいます。collapse（くっつける）を指定することで、枠線が1本にまとまります。

border-bottomプロパティ

border-bottomは下側だけに線を引くプロパティです。ヘッダー行の<tr>に指定することで、見出しとデータの間に区切り線を表示しています。

同様に、border-top（上）、border-left（左）、border-right（右）で、それぞれの方向に線を引くことができます。

試してみよう

これまでの成果

<!-- battle.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
</head>
<body>
    <table style="border: solid 1px black; border-collapse: collapse;">
        <tr style="border-bottom: solid 1px black;">
            <th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
        </tr>
        <tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
        <tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
    </table>
    <div>
        <img src="img/dark-lord.png" style="width: 400px;">
    </div>
    <div>
        まおうがあらわれた。
    </div>
</body>
</html>
arrow_back前へ次へ: 05. styleタグarrow_forward