HTML の第一歩 — レッスン 5 — テーブル

04/12/2019, by Ivan

情報を保存する重要な形式の 1 つがテーブルです。Excel、Access、その他のデータベースはテーブルで情報を保存します。テーブルは非常にわかりやすくデータを表現し、これらのデータからグラフや図を作るのに便利です。
このレッスンでは、HTML でテーブルを作成する方法を見ていきましょう。このために、<table>、<tr>、<td>、<th>、<thead>、<tbody>、<tfoot> タグを使用します。

table タグ

TABLE はテーブルの主要なタグで、その中に他のテーブルタグが入ります。

<table>
</table>

他のすべてのタグはこのタグの中に書きます。

tr タグ

TR は行のタグです。各行は <tr></tr> タグで作られます。テーブルに 3 行が欲しい場合は、このタグのペアも 3 つ必要です。

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

td タグ

TD はセルのタグです。各セルは行タグの中になければなりません。テーブルが正しく表示されるためには、セルの数が一致する必要があります。1 行に 4 つのセルを持つテーブルを作ってみましょう。

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

あとはテーブルにデータを入力するだけです。

<table>
  <tr>
    <td>番号</td>
    <td>姓</td>
    <td>名</td>
    <td>父称</td>
  </tr>
  <tr>
    <td>1</td>
    <td>イワノフ</td>
    <td>イワン</td>
    <td>イワノビッチ</td>
  </tr>
  <tr>
    <td>2</td>
    <td>ペトロフ</td>
    <td>ピョートル</td>
    <td>ペトロビッチ</td>
  </tr>
</table>

これで、テーブルを論理的に整理し、3 つのセクションに分けることができます。thead — 見出し、tbody — ページの内容、tfoot — ページのフッター。

tbody タグ

TBODY は必須ではありませんが、ここにテーブルの主要な情報があることを示すために挿入できます。

<table>
  <tbody>
    <tr>
      <td>番号</td>
      <td>姓</td>
      <td>名</td>
      <td>父称</td>
    </tr>
    <tr>
      <td>1</td>
      <td>イワノフ</td>
      <td>イワン</td>
      <td>イワノビッチ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>ペトロフ</td>
      <td>ピョートル</td>
      <td>ペトロビッチ</td>
    </tr>
  </tbody>
</table>

thead タグ

THEAD はテーブルの見出しを作成するために使用されます。最初の行を thead で囲んでみましょう。

<table>
  <thead>
    <tr>
      <td>番号</td>
      <td>姓</td>
      <td>名</td>
      <td>父称</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>イワノフ</td>
      <td>イワン</td>
      <td>イワノビッチ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>ペトロフ</td>
      <td>ピョートル</td>
      <td>ペトロビッチ</td>
    </tr>
  </tbody>
</table>

そして次に、td セルの代わりに th セルを使用して、これが列の名前であることを示します。

<table>
  <thead>
    <tr>
      <th>番号</th>
      <th>姓</th>
      <th>名</th>
      <th>父称</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>イワノフ</td>
      <td>イワン</td>
      <td>イワノビッチ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>ペトロフ</td>
      <td>ピョートル</td>
      <td>ペトロビッチ</td>
    </tr>
  </tbody>
</table>

適切なブラウザなら、列の名前は少なくとも太字で強調表示されるはずです。そして、テーブルのフッタータグ tfoot がまだ残っています。

tfoot タグ

TFOOT はテーブルの下部の署名を定義します。

<table>
  <thead>
    <tr>
      <th>番号</th>
      <th>姓</th>
      <th>名</th>
      <th>父称</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>イワノフ</td>
      <td>イワン</td>
      <td>イワノビッチ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>ペトロフ</td>
      <td>ピョートル</td>
      <td>ペトロビッチ</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>テーブル作成 2012 年</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

colspan 属性

td タグの重要な属性の 1 つが colspan で、セルを結合できます。フッターを見てみましょう。4 つのセルがありますが、埋まっているのは 1 つだけなので、この 4 つのセルを結合できます。colspan 属性を使ってみましょう。

<table>
  <thead>
    <tr>
      <th>番号</th>
      <th>姓</th>
      <th>名</th>
      <th>父称</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>イワノフ</td>
      <td>イワン</td>
      <td>イワノビッチ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>ペトロフ</td>
      <td>ピョートル</td>
      <td>ペトロビッチ</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">テーブル作成 2012 年</td>
    </tr>
  </tfoot>
</table>

これで、幅が 4 セル分の 1 つの大きなセルができました。colspan 属性の値は、結合されたセルの数です。

パレット - カラフルに🎨