【初心者向け】tableタグの使い方!tr/th/tdなど基本的を覚えてなレイアウトを作成する

こんにちは。IWACODEの岩村彰斗です。

今回はtableタグについて、初心者の方向けに、基本的なコーディング方法について解説いたします。

tableタグって、trとかthとかいろいろ出てきて覚えづらいんですよね・・・

筆者

tableタグはdivタグやpタグと違って、使用するタグにルールがあるため、少し癖がありますね。

どのようにして覚えていったらよいでしょうか?

筆者

タグの名前と文章だけ見ても中々覚えづらいので、実際に手を動かして作りながら覚えていきましょう!
今回は以下のようなレイアウトを作っていきます。

よく見かけるレイアウトですね!

筆者

作り方さえ覚えてしまえば、ある程度のレイアウトは応用して作れるようになるので、頑張っていきましょう!

目次

tableタグで使用されるタグの種類

筆者

まず、tableタグで使用されるタグは以下のようになります。

  • <table>・・・</table>
  • <tr>・・・</tr>
  • <th>・・・</th>
  • <td>・・・</td>
  • <thead>・・・</thead>
  • <tbody>・・・</tbody>
  • <tfoot>・・・</tfoot>

いや、いきなり7つ出てきたんですけど・・・

筆者

7つ記載しましたが、頻繁に使用するのは、tr、th、tdです!
まず先ほどのレイアウトがどのように構成されているか見てみましょう!

筆者

tableタグが一番外側にあって、1行ずつtrタグが記載されていますね。

tableタグの基本的な記載方法について

見出し(header)にあたる部分のコーディング

筆者

では、まずこの上の見出しの部分からコードを書いていきますね。

  <table>
    <thead>
      <tr>
        <th></th>
        <th>国語</th>
        <th>算数</th>
        <th>理科</th>
        <th>社会</th>
      </tr>
    </thead>
  </table>

  <style>
    thead {
      background-color: #2CA5FF;
      color: #fff;
    }

    th,
    td {
      border-collapse: collapse;
      border: 3px solid #fff;
      padding: 10px;
      text-align: center;
      width: 100px;
    }
  </style>
筆者

上の見出し部分だけ作成してみました。

trタグの中にthタグとtdタグが入るんですね!

筆者

tableタグの構成では、大枠をtableタグとして、その中にデザイン上1行ずつコーディングを行っていきます。
1行ずつtrタグで囲っていくイメージですね!

trタグ
Table Rowの略で、tableタグ内の行を意味します。子要素としてthタグ、tdタグを使用することができます。
thタグ
Table Headerの略で、tableタグ内の見出しとして使用します。
tdタグ
Table Dataの略で、tableタグ内のデータとして使用します。

theadタグで囲われていますが、これはどのような意味なのでしょうか?

筆者

theadタグは、HTML上でどこが見出し部分にあたるのかわかりやすくするために使用すると認識いただいて大丈夫です。
また、CSSの適用が行いやすくなるなどの利点があります。

見出しにあたる部分をtheadタグで囲っているので、例えばtheadタグにbackgroundプロパティを指定すれば、一気に背景色が変更できますね!

筆者

次は内容部分のコーディングを行っていきます。

内容(body)にあたる部分のコーディング

  <table>
    <thead>
      <tr>
        <th></th>
        <th>国語</th>
        <th>算数</th>
        <th>理科</th>
        <th>社会</th>
      </tr>
    </thead>
    <!-- ↓↓↓ HTMLはここから追記 ↓↓↓ -->
    <tbody>
      <tr>
        <th>A君</th>
        <td>80</td>
        <td>85</td>
        <td>90</td>
        <td>95</td>
      </tr>
      <tr>
        <th>B君</th>
        <td>85</td>
        <td>90</td>
        <td>95</td>
        <td>80</td>
      </tr>
      <tr>
        <th>C君</th>
        <td>90</td>
        <td>95</td>
        <td>80</td>
        <td>85</td>
      </tr>
    </tbody>
    <!-- ↑↑↑ HTMLはここまで追記 ↑↑↑ -->
  </table>

  <style>
    thead {
      background-color: #2CA5FF;
      color: #fff;
    }

    th,
    td {
      border-collapse: collapse;
      border: 3px solid #fff;
      padding: 10px;
      text-align: center;
      width: 100px;
    }

    /* ↓↓↓ CSSはここから追記 ↓↓↓ */
    tbody {
      color: #555;
      font-weight: 700;
    }

    tbody th {
      background-color: #2CD9FF;
    }

    tbody td {
      background-color: #FFF8DF;
    }
    /* ↑↑↑ CSSはここから追記 ↑↑↑ */
  </style>
筆者

内容部分を3行分追加しました。

内容部分はtbodyで囲ってありますね!

筆者

tbodyタグも同様に、記載しなくても動作しますが、はやり囲っておいた方が見やすく、丁寧な記載になります。

thタグとtdタグが使用されていますが、この違いは何ですか?

筆者

見出しにあたる部分はthタグを使用し、データ部分にあたるところはtdタグを使用しますね!内容部分でも一番左側が見出しになっているので、thタグを使用しています。

tbodyで囲っているので、tbodyの中のthタグというようにCSSが適用できますね!

筆者

theadタグと同様にCSSが適用しやすくなるのも良いところですね。
では最後に表のフッター部分を作成していきます。

フッター(footer)にあたる部分のコーディング

  <table>
    <thead>
      <tr>
        <th></th>
        <th>国語</th>
        <th>算数</th>
        <th>理科</th>
        <th>社会</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>A君</th>
        <td>80</td>
        <td>85</td>
        <td>90</td>
        <td>95</td>
      </tr>
      <tr>
        <th>B君</th>
        <td>85</td>
        <td>90</td>
        <td>95</td>
        <td>80</td>
      </tr>
      <tr>
        <th>C君</th>
        <td>90</td>
        <td>95</td>
        <td>80</td>
        <td>85</td>
      </tr>
    </tbody>
    <!-- ↓↓↓ HTMLはここから追記 ↓↓↓ -->
    <tfoot>
      <tr>
        <th>平均</th>
        <td>85</td>
        <td>90</td>
        <td>90</td>
        <td>85</td>
      </tr>
    </tfoot>
    <!-- ↑↑↑ HTMLはここまで追記 ↑↑↑ -->
  </table>

  <style>
    thead {
      background-color: #2CA5FF;
      color: #fff;
    }

    th,
    td {
      border-collapse: collapse;
      border: 3px solid #fff;
      padding: 10px;
      text-align: center;
      width: 100px;
    }

    tbody {
      color: #555;
      font-weight: 700;
    }

    tbody th {
      background-color: #2CD9FF;
    }

    tbody td {
      background-color: #FFF8DF;
    }

    /* ↓↓↓ CSSはここから追記 ↓↓↓ */
    tfoot {
      background-color: #ECECEC;
      color: #555;
      font-weight: 700;
    }
    /* ↑↑↑ CSSはここから追記 ↑↑↑ */
  </style>
筆者

フッター部分を追加しました。これで完成ですね!

フッター部分はtfootタグを使用するんですね!

筆者

theadタグ、tbodyタグと同様にフッター部分にあたる箇所をtfootタグで囲っております。

さいごに

今回は基本的なtableタグの記載方法について解説させていただきました。

theadタグ、tbodyタグ、tfootタグについてはなくても問題はないのですが、メンテナンスの観点から考えると、囲っておいた方が構成が分かりやすく、管理もしやすくなるため、記載したほうが良いと考えております。

今回ご紹介した以外にも、Excelのようにセルが結合されているような表も実装することができ、こちらは別途解説させていただく予定です。

複雑そうに見えて、実際のところ、trタグの中にthタグ、tdタグを繰り返し記載していくことが多いので、実際にコーディングをしながら慣れていきたいですね!

今回の記事が参考になりましたら幸いです。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次