まぬねこの足跡。。。

備忘録＋たのしさ＋ひっそりと

トップ > HTML > <thead><tbody><tfoot>,<colgroup><col>,<th>＋scope属性：表のグループ化｜＜th＞+abbr：略称

<thead><tbody><tfoot>,<colgroup><col>,<th>＋scope属性：表のグループ化｜＜th＞+abbr：略称

HTML

概要

＜thead＞タグ：表ヘッダーグループ要素

・見出し行のグループ化を定義

＜tbody＞タグ：テーブル本体グループ要素

・テーブル本体の行（１行以上）のグループ化を定義

＜tfoot＞タグ：表フッターグループ要素

・表一連のまとめ行のグループ化を定義

＜th＞タグ＋scope属性：th要素（見出し）との関連付けと表列のグループ化要素

・th要素（見出し）が、どの列グループのtd要素（データセル）を対象にするか指定。

＜colgroup＞タグ：th要素（見出し）との関連付けと表列のグループ化要素

・簡単な表の時、th要素（見出し）が、どの列グループのtd要素（データセル）を対象にするか指定。

＜col＞タグ：th要素（見出し）との関連付けと表列のグループ化要素

※colgroupに要素にspan属性を持たない時

・簡単な表の時、th要素（見出し）が、どの列グループのtd要素（データセル）を対象にするか指定。

・span属性を持たないcolgroup要素の子要素

・colに要素にspan属性を指定しない時、既定値１

・th要素には、scope属性で「row/col」を指定して対象の方向を示す。

基本の使い方

＜thead＞＜tbody＞＜tfoot＞タグ：グループ化

書き方

<table>
    <thead> ・・・※ここに注目！！
        <tr>
            <th>たべる種類</th>
            <th>たべる回数</th>
        </tr>
    </thead>
    <tbody> ・・・※ここに注目！！
        <tr>
            <th>食事の回数</th>
            <td>３</td>
        </tr>
        <tr>
            <th>おやつの回数</th>
            <td>８</td>
        </tr>
    </tbody>
    <tfoot>・・・※ここに注目！！
        <tr>
            <th>合計回数</th>
            <td>１１</td>
        </tr>
    <tfoot>
</table>

表示イメージ

※枠線・背景色は別途CSSで記載。・・・タグのみでは枠線は表示されない。

：＜thead＞タグ

：＜tbody＞タグ

：＜tfoot＞タグ

たべる種類 たべる回数
食事の回数 ３
おやつの回数 ８
合計回数 １１

属性の解説・使い方

＜th＞タグ用

headers属性：セルとヘッダーの対応付け

・複雑な表の時、セルの内容がどの項目（２以下）のヘッダー）に対応するか明示。

・音声読み上げソフトを利用するとき有効。

＜td headers="id-headerORsell"(セルと関連づけるヘッダーのid)＞ごはん＜/td＞

書き方
<table>
    <tr>
        <th id="id-wa">和食</th>   ・・・※ここに注目！！
    <th>洋食</th>
    </tr>
    <tr>
        <td headers="id-wa">ごはん</td>   ・・・※ここに注目！！
        <td>パン</td>
    </tr>
</table>
表示イメージ

※枠線・背景色は別途CSSで記載。・・・タグのみでは枠線・背景色は表示されない。

：「和食」の連携したセル

・・・※ここに注目！！ ・・・※ここに注目！！
和食洋食
ごはんパン

scope属性：th要素（見出し）の対象範囲（セル）を指定。

・簡単な表の時、th要素（見出し）が、行・列・グループのtd要素（データセル）を対象にするか指定。

・音声読み上げソフトを利用するとき有効。

＜td scope="値（ワード）"(見出しの対象範囲の値（ワード）)＞ごはん＜/td＞

見出しの対象範囲の値（ワード）一覧
auto 自動、文脈に基づいて判断（既定値）
row 行（横）方向のtd要素（データセル）
col 列（縦）方向td要素（データセル）
rowgroup 行（横）グループ内の全td要素（データセル）
colgroup 列（縦）グループ内の全td要素（データセル）

※scope="colgroup"は「colgroup要素：表列のグループ化要素」と共に利用する。

書き方は＜colgroup＞タグ+「＜th＞タグ＋scope="colgroup"」：表列のグループ化へ

scope="row"：行（横）方向のtd要素（データセル）
書き方
<table>
    <tr>
        <th scope="row">見出しセルA</th> ・・・※ここに注目！！
        <td>データセル</td>
        <td>データセル</td>        
    </tr>
    <tr>
        <th scope="row">見出しセルB</th> ・・・※ここに注目！！
        <td>データセル</td>
        <td>データセル</td>        
    </tr>
    <tr>
        <th scope="row">見出しセルC</th> ・・・※ここに注目！！
        <td>データセル</td>
        <td>データセル</td>        
    </tr>
</table>
表示イメージ

※枠線・背景色は別途CSSで記載。・・・タグのみでは枠線・背景色は表示されない。

：「見出しセルＡ」の範囲

：「見出しセルＢ」の範囲

：「見出しセルＣ」の範囲

見出しセルＡ データセル データセル
見出しセルＢ データセル データセル
見出しセルＣ データセル データセル
scope="col"：列（縦）方向td要素（データセル）
書き方
<table>
    <tr>
        <th scope="col">見出しセルA</th> ・・・※ここに注目！！
        <th scope="col">見出しセルＢ</th> ・・・※ここに注目！！
        <th scope="col">見出しセルＣ</th> ・・・※ここに注目！！
    </tr>
    <tr>
        <td>データセル</td>
        <td>データセル</td>
        <td>データセル</td>
    </tr>
    <tr>
        <td>データセル</td>
        <td>データセル</td>
        <td>データセル</td>
    </tr>
</table>
表示イメージ

※枠線・背景色は別途CSSで記載。・・・タグのみでは枠線・背景色は表示されない。

：「見出しセルＡ」の範囲

：「見出しセルＢ」の範囲

：「見出しセルＣ」の範囲

見出しセルＡ 見出しセルＢ 見出しセルＣ
データセル データセル データセル
データセル データセル データセル
scope="rowgroup"：行（横）グループ内の全td要素（データセル）
書き方
<table>
    <tbody>
        <tr>
            <th colspan="3 scope="rowgroup">見出しセルA</th> ・・・※ここに注目！！
        </tr>
        <tr>
            <td>データセル</td>
            <td>データセル</td>
            <td>データセル</td>
        </tr>
        <tr>
            <td>データセル</td>
            <td>データセル</td>
            <td>データセル</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th colspan="3 scope="rowgroup">見出しセルＢ</th> ・・・※ここに注目！！
        </tr>
        <tr>
            <td>データセル</td>
            <td>データセル</td>
            <td>データセル</td>
        </tr>
        <tr>
            <td>データセル</td>
            <td>データセル</td>
            <td>データセル</td>
        </tr>
    </tbody>
</table>
表示イメージ

※枠線・背景色は別途CSSで記載。・・・タグのみでは枠線・背景色は表示されない。

：「見出しセルＡ」の範囲

：「見出しセルＢ」の範囲

見出しセルA
データセル データセル データセル
データセル データセル データセル
見出しセルＢ
データセル データセル データセル
データセル データセル データセル

abbr属性：th要素の略称を指定

＜th abbr="FF"(th要素の略称)＞FireFox＜/th＞

※音声読み上げソフトを利用するとき有効。

＜colgroup＞タグ用

span属性：グループ化する列の数を指定

＜colgroup span="2"(グループ化する列の数)＞＜/colgroup＞

※＜col＞タグや＜hd＞＋scope属性と共に使用する。

表列グループ化のやり方　２パターン

「＜colgroup＞タグ＋span」+「＜th＞タグ＋scope="colgroup"」のとき

書き方

<table>
    <colgroup span="2"></colgroup> ・・・※ここに注目！！
    <colgroup span="1"></colgroup> ・・・※ここに注目！！
    <tr>
        <th colspan="2"　scope="colgroup ">見出しセル</th>・・・※ここに注目！！
        <th scope="colgroup ">見出しセル</th>・・・※ここに注目！！
    </tr>
    <tr>
        <td>データセル</td>
        <td>データセル</td>
        <td>データセル</td>
    </tr>
    <tr>
        <td>データセル</td>
        <td>データセル</td>
        <td>データセル</td>
    </tr>
</table>

表示イメージ

※枠線・背景色は別途CSSで記載。・・・タグのみでは枠線・背景色は表示されない。

：「見出しセルＡ」の範囲

：「見出しセルＢ」の範囲

見出しセルＡ 見出しセルＢ
データセル データセル データセル
データセル データセル データセル

＜colgroup＞＜col＞タグ＋「＜th＞タグ＋scope」のとき

書き方

<table>
    <colgroup>・・・※ここに注目！！
        <col span="2">・・・※ここに注目！！
        <col>・・・※ここに注目！！
    </colgroup>・・・※ここに注目！！
    <tr>
        <td> </td>
        <th colspan="2"　scope="col">見出しセルＡ</th>・・・※ここに注目！！
        <th scope="col">見出しセルＢ</th>・・・※ここに注目！！
    </tr>
    <tr>
        <th rowspan="2" scope="row">見出しＣ</th>・・・※ここに注目！！
        <td>データセル</td>
        <td>データセル</td>
        <td>データセル</td>
    </tr>
    <tr>
        <td>データセル</td>
        <td>データセル</td>
        <td>データセル</td>
    </tr>
</table>

表示イメージ

※枠線・背景色は別途CSSで記載。・・・タグのみでは枠線・背景色は表示されない。

：「見出しセルＡ」の範囲

：「見出しセルＢ」の範囲

：「見出しセルＣ」の範囲

見出しセルＡ 見出しセルＢ
見出しＣ データセル データセル データセル
データセル データセル データセル

語源

＜thead＞タグ：表ヘッダーグループ要素

table header

読み方：テーブル　ヘッダー

意　味：表の上部

＜tbody＞タグ：テーブル本体グループ要素

table body

読み方：テーブル　ボディ/p>

意　味：表の本体

＜tfoot＞タグ：表フッターグループ要素

table footer

読み方：テーブル　フッター

意　味：表の下部

＜colgroup＞タグ：th要素（見出し）との関連付けと表列のグループ化要素

table column ｇroup

読み方：テーブル　カラム　グループ

意　味：表の列グループ

＜col＞タグ：th要素（見出し）との関連付けと表列のグループ化要素

table column

読み方：カラム

意　味：列

参考

【MDNMDN Web Docs】<thead>タグ：

【MDNMDN Web Docs】<tbody>タグ：

【MDNMDN Web Docs】<tfoot>タグ：

【MDNMDN Web Docs】<th>タグ：表見出し要素

【MDNMDN Web Docs】<colgroup>タグ：表データセル要素

【MDNMDN Web Docs】<col>タグ：th要素（見出し）との関連付けと表列のグループ化要素