HTML/CSS

【HTML】テーブル表の作り方

本記事では、HTMLでテーブル表を作成する時に使用する<table>、<thead>、<tbody>、<tfoot>、<tr>、<th>、<td>タグの使い方について解説しています。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

テーブル表の作り方

まず始めに今回作成するテーブル表を確認しましょう。

完成形のテーブル表
完成形のテーブル表

各製品の名前と売上が記載されており、最後に合計値を表示させるテーブル表になります。背景色やテキストの配置などはCSSでカスタマイズしていますが、既にデザインが決まっている方などは各自で変更してください。

下記のサンプルコードでは、CSSをあらかじめ記述していますので使用したい方はコピーしてお使いください。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      table th {
        background: rgb(255, 165, 0);
      }
      table td {
        background: rgb(253, 245, 230);
      }
      table th,
      table td {
        padding: 0.3rem 1rem;
      }
      table th,
      table td:first-of-type {
        text-align: center;
      }
      table td:last-of-type {
        text-align: right;
      }
    </style>
  </head>
  <body>
  </body>
</html>

テーブル表を準備する

まず始めにテーブル表の準備をします。ブラウザにこのコンテンツはテーブル表です!と認識させるには、<table>を使用します。

<table border="1">
  <!-- 見出しやデータの情報を追加 -->
</table>

この<table>内に見出しやデータなどを設定していきます。

初期表示では、テーブル表の枠線は表示されないのでtableタグの属性にborder=”1″を使い枠線を付けます。これだけの記述だと線が二重線になって表示されてしまうので、一本線が良い方はCSSで<table>に対して「border-collapse: collapse」を適用させます。

table { border-collapse: collapse; }

テーブル表に見出しを設定する

テーブル表に見出しを設定していきましょう。テーブル表に見出しを設定するには<thead>、<tr>、<th>を使用します。

<thead>
  <tr>
    <th>製品名</th>
    <th>売上</th>
  </tr>
</thead>
テーブル表の見出し
テーブル表の見出し

基本的にはテーブル表の見出しは上記の構造で記述しますが、<thead>は必ず使用しなくてはならないタグではないため、見出しがデータの上ではなく横にある場合などは無理に記述する必要はありません。

テーブル表にデータを設定する

テーブル表にデータを設定していきましょう。テーブル表にデータを設定するには<tbody>、<tr>、<td>を使用します。

<tbody>
  <tr>
    <td>冷蔵庫</td>
    <td>500,000円</td>
  </tr>
  <tr>
    <td>洗濯機</td>
    <td>300,000円</td>
  </tr>
  <tr>
    <td>電子レンジ</td>
    <td>200,000円</td>
  </tr>
</tbody>
テーブル表のデータ
テーブル表のデータ

<tr>は表の行部分(横方向)を指定するタグで、<tr>が隣接している時のデータは改行され表示されます。<tr>の中にはデータを設定するための<td>を使用します。今回の場合、製品名と売上が<td>のデータとして設定されます。

テーブル表の一連の列を総括する

最後にテーブル表の一連の列を総括しましょう。テーブル表の一連の列を総括するには<tfoot>、<tr>、<td>を使用します。また、<tfoot>は今回のような合計値などが算出されるテーブル表では使用することが出来ますが、何も総括するものがない場合では記載する必要がありません。

<tfoot>
  <tr>
    <td>合計</td>
    <td>1,000,000円</td>
  </tr>
</tfoot>
テーブル表の完成
テーブル表の完成

最初に確認した完成形と同じテーブル表が完成しました!以上がテーブル表を作成する流れになります。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村