テーブル要素（table、tr、th、td、caption、thead、tbody、tfoot、col、colgroup）の仕様と使い方

カテゴリ：HTML編

table要素

table要素

table要素は表（テーブル）を作成する要素です。
テーブルは行（tr）と列（th、td）で構成されます。
1つの行はtr要素で囲みます。
行内の列は見出しとなるth要素、データ部となるtd要素で構成されます。

テーブルの基本要素

tr要素

tr要素はテーブルの1つの行を表し、行内の見出し（th）やデータ（td）を囲みます。
なお、tr要素の終了タグは、tr要素の直後に別のtr要素が続く場合、または親要素にコンテンツがもうない場合は省略できます。

th要素

th要素は行もしくは列の見出し（ヘッダーセル）を表し、通常はテーブルの最上位の行もしくは左端の列に配置します。

td要素

td要素はテーブルのデータセルを表し、通常はテーブルの2行目以降もしくは2列目以降に使用します。

caption要素

caption要素はテーブルのタイトルを記述し、table要素の最初の子要素（table要素直下）として配置します。

ここまでを踏まえて実際に2種類の表を作成してみます。

<table>
    <caption>見出しが1行目にある表</caption>
    <tr>
        <th>OS</th>
        <th>台数</th>
    </tr>
    <tr>
        <td>Windows</td>
        <td>100</td>
    </tr>
    <tr>
        <td>Mac</td>
        <td>50</td>
    </tr>
</table>

見出しが1行目にある表
OS	台数
Windows	100
Mac	50

<table>
    <caption>見出しが左端の列にある表</caption>
    <tr>
        <th>OS</th>
        <td>Windows</td>
        <td>Mac</td>
    </tr>
    <tr>
        <th>台数</th>
        <td>100</td>
        <td>50</td>
    </tr>
</table>

見出しが左端の列にある表
OS	Windows	Mac
台数	100	50

テーブルのヘッダー、ボディ、フッターを表す要素

thead要素

thead要素はテーブルのヘッダー部を表し、ヘッダー行を囲みます。

tbody要素

tbody要素はテーブルのボディ部（データ部）を表し、データセル（td要素）を含む行を囲みます。

tfoot要素

tfoot要素はテーブルのフッター部を表し、フッター行を囲みます。

ここまでを踏まえてthead、tbody、tfoot要素を追加したテーブル作成してみます。

<table>
    <caption>thead、tbody、tfootがある表</caption>
    <thead>
        <tr>
            <th>OS</th>
            <th>台数</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Windows</td>
            <td>100</td>
        </tr>
        <tr>
            <td>Mac</td>
            <td>50</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合計</td>
            <td>150</td>
        </tr>
    </tfoot>
</table>

thead、tbody、tfootがある表
OS	台数
Windows	100
Mac	50
合計	150

縦の列のグループ化

col要素

col要素はテーブルの任意の縦の列を括る時に使用します。
一般的には縦の列にCSSを適用する際に使用します。
必ずcolgroup要素で囲み、colgroup要素の子要素として使用します。
但し、colgroup要素にspan属性を指定している場合は、その子要素としてcol要素は使用できません。
span属性で対象とする列を指定します。
col要素は閉じタグは不要（付けてはいけない）です。

colgroup要素

colgroup要素はcol要素のグループを形成します。
1つのテーブルに複数のcolgroup要素を指定できます。
colgroup要素もspan属性で対象とする列を指定できますが、その場合、子要素（col要素）を含める事はできません。

ここまでを踏まえて、colgroup、col要素を追加したテーブルを作成してみます。
※1列目はcolgroup要素にspan属性を指定、2列目はcolgroup要素内のcol要素にspan属性を指定しています。

<table>
    <caption>colgroup、col要素がある表</caption>
    <colgroup span="1" style="background-color: skyblue;"></colgroup>
    <colgroup>
        <col span="2" style="background-color: greenyellow;">
    </colgroup>
    <thead>
        <tr>
            <th>OS</th>
            <th>台数</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Windows</td>
            <td>100</td>
        </tr>
        <tr>
            <td>Mac</td>
            <td>50</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合計</td>
            <td>150</td>
        </tr>
    </tfoot>
</table>

colgroup、col要素がある表
OS	台数
Windows	100
Mac	50
合計	150

W3Cによるtable要素の説明

table要素は、複数の次元を持つデータを表形式で表します。
テーブル要素はテーブルモデルに含まれます。テーブルには、その子孫によって与えられた行、列、およびセルがあります。行と列はグリッドを形成します。
表のセルは、重ならずにそのグリッドを完全にカバーする必要があります。

公開日時：2018年01月27日 18:26:22
最終更新日時：2022年03月12日 07:15:28