基礎

HTMLテーブルの作り方｜表の作成と構造

名前 年齢
test 20
test2 30
test.html 
<table>
  <thead>
    <th>名前</th>
    <th>年齢</th>
  <thead>

  <tbody>
    <tr>
      <td>test</td>
      <td>20</td>
    <tr>

    <tr>
      <td>test2</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

説明

Step 1HTMLテーブルの基本

テーブルとは表のことです。HTMLでテーブルを作成することで、データを行と列に整理して表示することができます。テーブルは商品一覧、時間割、データ比較など様々な場面で活用できます。

Step 2テーブルの基本構造

HTMLでテーブルを作成するには、主に以下のタグを使用します：

  • <table> - テーブル全体を定義
  • <thead> - テーブルのヘッダー部分
  • <tbody> - テーブルの本体部分
  • <tr> - テーブルの行
  • <th> - ヘッダーセル（見出し）
  • <td> - データセル
<table>
    <thead>
        <tr>
            <th>見出し1</th>
            <th>見出し2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>データ1</td>
            <td>データ2</td>
        </tr>
    </tbody>
</table>

Step 3テーブルヘッダー（thead）

<thead>部は、見出しを記入する部分となっています。各列の見出しを定義するのに使用します。

見出しの項目は次の形式で記入します：

<th>見出し</th>

見出しセルは通常、太字で中央揃えになります。

<thead>
    <tr>
        <th>商品名</th>
        <th>価格</th>
        <th>在庫</th>
    </tr>
</thead>

Step 4テーブル本体（tbody）

<tbody>部は、各行のデータを記入する部分となっています。<tr>から</tr>までが1行となっており、<td>から</td>が1つのセルとなっています。

<tbody>
    <tr>
        <td>ノートパソコン</td>
        <td>98,000円</td>
        <td>5台</td>
    </tr>
    <tr>
        <td>タブレット</td>
        <td>45,000円</td>
        <td>12台</td>
    </tr>
</tbody>

Step 5完全なテーブル例

以下は商品リストを表示する完全なテーブルの例です：

<table>
    <thead>
        <tr>
            <th>商品名</th>
            <th>価格</th>
            <th>在庫</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ノートパソコン</td>
            <td>98,000円</td>
            <td>5台</td>
        </tr>
        <tr>
            <td>タブレット</td>
            <td>45,000円</td>
            <td>12台</td>
        </tr>
        <tr>
            <td>スマートフォン</td>
            <td>78,000円</td>
            <td>8台</td>
        </tr>
    </tbody>
</table>

Step 6テーブルの追加機能

HTMLテーブルには、さらに以下のような機能があります：

セルの結合（横方向）

<td colspan="2">2列分の幅を持つセル</td>

セルの結合（縦方向）

<td rowspan="2">2行分の高さを持つセル</td>

テーブルのキャプション（表のタイトル）

<table>
    <caption>商品一覧表</caption>
    <!-- テーブルの内容 -->
</table>

テーブルのフッター

<table>
    <thead>...</thead>
    <tbody>...</tbody>
    <tfoot>
        <tr>
            <td>合計</td>
            <td>221,000円</td>
            <td>25台</td>
        </tr>
    </tfoot>
</table>

Step 7テーブルのスタイリング

CSSを使用してテーブルの見た目を整えることができます：

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    
    th, td {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }
    
    th {
        background-color: #f2f2f2;
        font-weight: bold;
    }
    
    tr:nth-child(even) {
        background-color: #f9f9f9;
    }
</style>
重要ポイント：
  • テーブルの各行（<tr>）には、同じ数のセル（<th>または<td>）を含めることが推奨されます。
  • <thead>、<tbody>、<tfoot>タグはオプションですが、大きなテーブルでは構造を明確にするために使用することをお勧めします。
  • レスポンシブデザインでは、小さな画面でのテーブル表示に注意が必要です。横スクロールを可能にする方法やカードビューに変換する方法があります。
  • アクセシビリティのために、複雑なテーブルにはscope属性やheaders属性を使用するとよいでしょう。
  • テーブルはレイアウト目的ではなく、表形式のデータ表示にのみ使用するのが良いプラクティスです。