HTML

テーブルをHTMLで作成する方法を解説して

HTMLテーブルの基本構造

HTMLのテーブルは、データを行と列の形式で整理して表示するために使用されます。テーブルを作成するには、いくつかのタグを使用します。基本的なタグとその役割を以下に示します。

  • <table>: テーブル全体を囲むタグ
  • <tr>: テーブルの行を定義するタグ（table row）
  • <th>: テーブルのヘッダーセルを定義するタグ（table header）
  • <td>: テーブルのデータセルを定義するタグ（table data）

テーブルの基本例

以下は、シンプルなテーブルの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テーブルのサンプル</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #000;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>テーブルのサンプル</h1>
    <table>
        <tr>
            <th>名前</th>
            <th>年齢</th>
            <th>職業</th>
        </tr>
        <tr>
            <td>山田太郎</td>
            <td>28</td>
            <td>エンジニア</td>
        </tr>
        <tr>
            <td>鈴木花子</td>
            <td>24</td>
            <td>デザイナー</td>
        </tr>
        <tr>
            <td>田中一郎</td>
            <td>32</td>
            <td>マネージャー</td>
        </tr>
    </table>
</body>
</html>

各タグの詳細

  1. <table>タグ

    • テーブル全体を囲むタグです。スタイルや属性を追加して、テーブル全体の見た目を変更できます。
    • border-collapse: collapse;は、セルの境界線を一つにまとめるためのCSSプロパティです。

  2. <tr>タグ

    • テーブルの行を定義します。このタグの中に<th>や<td>タグを入れます。

  3. <th>タグ

    • テーブルのヘッダーセルを定義します。通常、文字が太字で中央揃えになります。背景色を変更して視覚的にヘッダーセルとデータセルを区別することが一般的です。

  4. <td>タグ

    • テーブルのデータセルを定義します。各行の中に複数の<td>タグを入れて、列を作成します。

テーブルにスタイルを追加

CSSを使用してテーブルの見た目をカスタマイズできます。例えば、セルの境界線、パディング、背景色などを設定できます。

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #000;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
    tr:nth-child(even) {
        background-color: #f9f9f9;
    }
</style>

このスタイルを追加すると、テーブルは以下のように表示されます。

  • テーブルは幅100%になります。
  • セルには1ピクセルの境界線が追加されます。
  • セル内のテキストは左揃えになります。
  • ヘッダーセルには薄い灰色の背景色が設定されます。
  • 偶数行には薄い背景色が設定され、行ごとの視覚的な区別がしやすくなります。

複雑なテーブルの例

以下は、より複雑なテーブルの例です。ここでは、セルの結合（colspanとrowspan属性）を示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>複雑なテーブルのサンプル</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #000;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>複雑なテーブルのサンプル</h1>
    <table>
        <tr>
            <th>名前</th>
            <th>年齢</th>
            <th colspan="2">職業</th>
        </tr>
        <tr>
            <td>山田太郎</td>
            <td>28</td>
            <td>エンジニア</td>
            <td>フルタイム</td>
        </tr>
        <tr>
            <td rowspan="2">鈴木花子</td>
            <td rowspan="2">24</td>
            <td>デザイナー</td>
            <td>パートタイム</td>
        </tr>
        <tr>
            <td>イラストレーター</td>
            <td>フリーランス</td>
        </tr>
        <tr>
            <td>田中一郎</td>
            <td>32</td>
            <td>マネージャー</td>
            <td>フルタイム</td>
        </tr>
    </table>
</body>
</html>

この例では、colspanとrowspan属性を使用してセルを結合しています。

  • colspan="2": 1つのセルが2つの列にまたがることを示します。
  • rowspan="2": 1つのセルが2つの行にまたがることを示します。
複雑なテーブルのサンプル

複雑なテーブルのサンプル

名前 年齢 職業
山田太郎 28 エンジニア フルタイム
鈴木花子 24 デザイナー パートタイム
イラストレーター フリーランス
田中一郎 32 マネージャー フルタイム

まとめ

  • 基本的なテーブル構造は、<table>, <tr>, <th>, <td>タグを使用して作成します。
  • スタイルの追加には、CSSを使用してテーブルの見た目をカスタマイズします。
  • 複雑なテーブルでは、colspanやrowspan属性を使用してセルを結合できます。

HTMLのテーブルは、データを整理して表示するために非常に便利な機能です

スポンサーリンク

-HTML