• トップページ
  • HTML編
  • ​テーブル要素(table、tr、th、td、caption、thead、tbody、tfoot、col、colgroup)の仕様と使い方

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

カテゴリ:HTML編

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

本格的なスキルを身につける

オンラインによるWebプログラミングスクールの無料レッスンを受けてみたい方はTechAcademyの無料体験がおすすめですよ。

HTML編に戻る

「HTML編」に関する他の手順
「HTML編」に関するTips

「HTML編」に関するTipsはありません。

このページのトップに戻る