【HTML】tableタグ - 表（テーブル）

HTMLのtableタグについて解説します。

検証環境

HTML

macOS

14.1

tableタグ

tableタグは“表（テーブル）”を意味するタグです。

表を構成するtheadタグやtbodyタグ、trタグ、tdタグなどを合わせて使用します。

基本構文

<table>
    <caption>タイトル</caption>
    <thead>
        <tr>
            <th>列名</th>
            <th>列名</th>
            <th>列名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>行名</th>
            <td>コンテンツ</td>
            <td>コンテンツ</td>
        </tr>
        <tr>
            <th>行名</th>
            <td>コンテンツ</td>
            <td>コンテンツ</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>行名</th>
            <td>コンテンツ</td>
            <td>コンテンツ</td>
        </tr>
    </tfoot>
</table>

caption

captionタグは“表のタイトル”を意味するタグです。

thead

theadタグは“表のヘッダー”を意味するタグです。

tbody

tbodyタグは“表のコンテンツ”を意味するタグです。

tfoot

tfootタグは“表のフッター”を意味するタグです。

tr

trタグは“行”を意味するタグです。

th

thタグは“セル（見出し）”を意味するタグです。

td

tdタグは“セル（内容）”を意味するタグです。

なお、表に関する様々なタグがありますが、Webブラウザではtable要素、tr要素,td要素のみでも表として認識されます。

属性

主な属性は次の通りです。

属性名	必須	内容
scope	-	th要素に設定する属性です。見出しの対象を以下の値で指定します。 row : 行 col : 列 rowgroup : 行グループ（thead,tbody,tfoot） colgroup : 列グループ（thead,tbody,tfoot）
rowspan	-	セルの結合（列方向）
colspan	-	セルの結合（行方向）

サンプル

Webブラウザのtable要素の表示はデフォルトでは枠線がない場合があります。

サンプルでは分かりやすくするため、次の枠線を付けるスタイル（装飾）のコードを付与しています。

スタイルコード

<style>
    table { border-collapse: collapse; }
    td,th { border: 1px solid black; }
</style>

表

sample.html

<style>
    table { border-collapse: collapse ; }
    td,th { border: 1px solid black; }
</style>
___ih_hl_start
<table>
    <caption>アクセスデータ</caption>
    <thead>
        <tr>
            <th>ページ</th>
            <th>ユーザー数</th>
            <th>アクセス数</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Aページ</th>
            <td>10</td>
            <td>70</td>
        </tr>
        <tr>
            <th>Bページ</th>
            <td>30</td>
            <td>50</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>合計</th>
            <td>40</td>
            <td>120</td>
        </tr>
    </tfoot>
</table>
___ih_hl_end

プレビュー

セルの結合（行方向）

sample.html

<style>
    table { border-collapse: collapse ; }
    td,th { border: 1px solid black; }
</style>
<table>
    <caption>アクセスデータ</caption>
    <thead>
        <tr>
            <th>ページ</th>
            <th>ユーザー数</th>
            <th>アクセス数</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Aページ</th>
            <td>10</td>
            <td>70</td>
        </tr>
        <tr>
            <th>Bページ</th>
            ___ih_hl_start
            <td colspan="2">未計測</td>
            ___ih_hl_end
        </tr>
    </tbody>
</table>

プレビュー

セルの結合（列方向）

ソースコード

<style>
    table { border-collapse: collapse ; }
    td,th { border: 1px solid black; }
</style>
<table>
    <caption>アクセスデータ</caption>
    <thead>
        <tr>
            <th>カテゴリ</th>
            <th>ページ</th>
            <th>ユーザー数</th>
            <th>アクセス数</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            ___ih_hl_start
            <th rowspan="2">XXX</th>
            ___ih_hl_end
            <th>Aページ</th>
            <td>10</td>
            <td>70</td>
        </tr>
        <tr>
            <th>Bページ</th>
            <td>30</td>
            <td>50</td>
        </tr>
    </tbody>
</table>

プレビュー

scope

ソースコード

<style>
    table { border-collapse: collapse ; }
    td,th { border: 1px solid black; }
</style>
<table>
    <caption>アクセスデータ</caption>
    <thead>
        <tr>
            ___ih_hl_start
            <th scope="col">ページ</th>
            <th scope="col">ユーザー数</th>
            <th scope="col">アクセス数</th>
            ___ih_hl_end
        </tr>
    </thead>
    <tbody>
        <tr>
            ___ih_hl_start
            <th scope="row">Aページ</th>
            ___ih_hl_end
            <td>10</td>
            <td>70</td>
        </tr>
        <tr>
            ___ih_hl_start
            <th scope="row">Bページ</th>
            ___ih_hl_end
            <td>30</td>
            <td>50</td>
        </tr>
    </tbody>
</table>

プレビュー