テーブルタグを使ったテーブルの作成

テーブルタグ <table> の概要

定義

<table> タグは、HTML文書で表(テーブル)を作成するために使用されます。

役割

データを行と列の形式で整理して表示します。

テーブルの基本構造

テーブルは以下の要素で構成されます。

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

テーブルの基本的な使い方

テーブルの基本構造

<!DOCTYPE html>
<html>
<head>
    <title>テーブルの基本構造</title>
</head>
<body>
    <h1>テーブルの基本構造</h1>
    <table>
        <tr>
            <th>ヘッダー1</th>
            <th>ヘッダー2</th>
            <th>ヘッダー3</th>
        </tr>
        <tr>
            <td>データ1</td>
            <td>データ2</td>
            <td>データ3</td>
        </tr>
        <tr>
            <td>データ4</td>
            <td>データ5</td>
            <td>データ6</td>
        </tr>
    </table>
</body>
</html>

実践例

以下の例は、簡単なテーブルを作成しています。

<!DOCTYPE html>
<html>
<head>
    <title>学生の成績表</title>
</head>
<body>
    <h1>学生の成績表</h1>
    <table border="1">
        <tr>
            <th>名前</th>
            <th>数学</th>
            <th>英語</th>
            <th>科学</th>
        </tr>
        <tr>
            <td>田中太郎</td>
            <td>90</td>
            <td>85</td>
            <td>80</td>
        </tr>
        <tr>
            <td>鈴木花子</td>
            <td>78</td>
            <td>88</td>
            <td>94</td>
        </tr>
        <tr>
            <td>佐藤次郎</td>
            <td>82</td>
            <td>79</td>
            <td>85</td>
        </tr>
    </table>
</body>
</html>

テーブルの属性

border 属性

テーブルに枠線を追加します。

<table border="1">
    ...
</table>

cellpadding 属性と cellspacing 属性

セルの内側の余白(cellpadding)とセル間の余白(cellspacing)を指定します。

<table border="1" cellpadding="10" cellspacing="5">
    ...
</table>

テーブルのスタイリング

CSSによるスタイリング

テーブルの外観をCSSでカスタマイズすることができます。

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>CSSを使用したテーブルのスタイリング</h1>
    <table>
        <tr>
            <th>名前</th>
            <th>数学</th>
            <th>英語</th>
            <th>科学</th>
        </tr>
        <tr>
            <td>田中太郎</td>
            <td>90</td>
            <td>85</td>
            <td>80</td>
        </tr>
        <tr>
            <td>鈴木花子</td>
            <td>78</td>
            <td>88</td>
            <td>94</td>
        </tr>
        <tr>
            <td>佐藤次郎</td>
            <td>82</td>
            <td>79</td>
            <td>85</td>
        </tr>
    </table>
</body>
</html>

ストライプテーブル

交互に行の色を変えることで、読みやすさを向上させます。

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:nth-child(odd) {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <h1>ストライプテーブルの例</h1>
    <table>
        <tr>
            <th>名前</th>
            <th>数学</th>
            <th>英語</th>
            <th>科学</th>
        </tr>
        <tr>
            <td>田中太郎</td>
            <td>90</td>
            <td>85</td>
            <td>80</td>
        </tr>
        <tr>
            <td>鈴木花子</td>
            <td>78</td>
            <td>88</td>
            <td>94</td>
        </tr>
        <tr>
            <td>佐藤次郎</td>
            <td>82</td>
            <td>79</td>
            <td>85</td>
        </tr>
    </table>
</body>
</html>

複雑なテーブル

ヘッダーとフッター

テーブルのヘッダー(<thead>)とフッター(<tfoot>)を定義することで、特定の行を強調します。

<!DOCTYPE html>
<html>
<head>
    <title>ヘッダーとフッターの例</title>
</head>
<body>
    <h1>テーブルのヘッダーとフッター</h1>
    <table border="1">
        <thead>
            <tr>
                <th>名前</th>
                <th>数学</th>
                <th>英語</th>
                <th>科学</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="4">期末試験の成績</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>田中太郎</td>
                <td>90</td>
                <td>85</td>
                <td>80</td>
            </tr>
            <tr>
                <td>鈴木花子</td>
                <td>78</td>
                <td>88</td>
                <td>94</td>
            </tr>
            <tr>
                <td>佐藤次郎</td>
                <td>82</td>
                <td>79</td>
                <td>85</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

セルの結合

colspan 属性と rowspan 属性を使用して、セルを結合することができます。

<!DOCTYPE html>
<html>
<head>
    <title>セルの結合例</title>
</head>
<body>
    <h1>セルの結合</h1>
    <table border="1">
        <tr>
            <th>名前</th>
            <th>科目</th>
            <th>成績</th>
        </tr>
        <tr>
            <td rowspan="3">田中太郎</td>
            <td>数学</td>
            <td>90</td>
        </tr>
        <tr>
            <td>英語</td>
            <td>85</td>
        </tr>
        <tr>
            <td>科学</td>
            <td>80</td>
        </tr>
        <tr>
            <td>鈴木花子</td>
            <td colspan="2">成績非公開</td>
        </tr>
    </table>
</body>
</html>

まとめ

テーブルタグ(<table><tr><td><th>)を使用することで、
データを行と列の形式で整理して表示することができます。
適切な属性とCSSを使用してテーブルのスタイルをカスタマイズし、
読みやすく視覚的に魅力的なテーブルを作成することが重要です。
さらに、テーブルのヘッダーとフッター、セルの結合などの高度な機能を使用することで、
複雑なデータ構造を効果的に表現できます。