トップ ＞ スキル ： Web ＞ 要素解説

Web

表（テーブル）に関する要素

<table>　（Table：表）

意味 表作成の定義を表します。
分類 ブロックレベル要素
包括可能要素 caption要素、thead要素、tbody要素、tfoot要素、col要素、colgroup要素
スタイル table-layout:auto；border-collapse:sepalate;border-spacing:1px;empty-cells:hide;
一般属性 id、class、style、title
使用上の注意 テーブルは本来表を定義するものなので、レイアウトとして使うのは避けるべきです。
線の太さを指定しない限り、表の罫線は表示されません。
セルの幅は指定しない限り、その列の一番長い文字列に自動的に合わせられます。
width属性を指定することで、表全体を読み込まなくても描画が可能なので、体感的な速度の向上を狙えます。
大きな表の場合、絶対値で指定しまうと横スクロールの原因になりかねないので注意します。
音声読み上げブラウザでは、表の評価が難しくなるので、summary属性、scope属性、abbr属性などを使ってできるだけ分かりやすくします。

■ サンプルコードと結果

HTML

    	<body>
        	<table border="1" summary="表作成の記述方法">
            	<caption>表のタイトル</caption>
            	<thead>
                <tr>
					<th>項目１</th>
                    <th>項目２</th>
                </tr>
                </thead>
                <tbody>
                <tr>
					<td>セル１</td>
                    <td>セル２</td>
                </tr>
                <tr>
					<td>セルＡ</td>
                    <td>セルＢ</td>
                </tr>
                </tbody>
            </table>
    	</body>
table結果

<tr>　（Table Row：列）

意味 表の行を定義します。
分類 thead、tbody、tfootの子要素
包括可能要素 th要素、td要素
スタイル 継承値（inherit）
一般属性 id、class、style、title
使用上の注意 tr要素は1行を定義するもので、複数行の表であれば、その数に合ったtr要素を記述します。
tr要素内には、th要素またはtd要素を含めて1つのセルを構成させます。このセルの数が列の数に相当します。

<th>　（Table Header Cell：表見出し）

意味 表内の見出しセルを定義します。
分類 tr要素の子要素
包括可能要素 インライン要素、ブロックレベル要素
スタイル text-align:center;font-weight:bold;color:inherit;
一般属性 id、class、style、title
使用上の注意 単に太字、中央揃えのために使用するべきではありません。
th要素はデータではないので、必要であればthead要素、tfoot要素、またはcolgroup要素でデータセルと分離を図るようにすると論理的になります。

<td>　（Table Data Cell：表見出し）

意味 表のデータを記述するセルを定義します。
分類 tr要素の子要素
包括可能要素 インライン要素、ブロックレベル要素
スタイル text-align:inherit;color:inherit;
一般属性 id、class、style、title
使用上の注意 td要素はブロックレベル要素を含むことができますが、そのような表はレイアウトを見越したテーブルという評価になるので、なるべく含まないようにします。

<thead>　（Table Header：表ヘッダ）

意味 表を構造的に分割した時のヘッダ部を定義します。
分類 table要素の子要素
包括可能要素 tr要素
スタイル 継承値（inherit）
一般属性 id、class、style、title
使用上の注意 thead要素は、同一テーブル内に一つしか存在できません。また、存在しなくても構いません。
必ずtbody要素、tfoot要素よりも先に記述しなければいけません。

<tbody>　（Table Body：表本体）

意味 表のデータを格納している行であることを定義します。
分類 table要素の子要素
包括可能要素 tr要素
スタイル 継承値（inherit）
一般属性 id、class、style、title
使用上の注意 同一テーブル内に2つ以上存在することはできません。
thead要素やtfoot要素が存在する時は、すべてその後方に記述しなければいけません。

<tfoot>　（Table Footer：表フッタ）

意味 表を構造的に分割した時のフッタ部を定義します。
分類 table要素の子要素
包括可能要素 tr要素
スタイル 継承値（inherit）
一般属性 id、class、style、title
使用上の注意 tfoot要素を記述する時は、thead要素とtbody要素の間に記述します。
tfoot要素をサポートしていないブラウザもあるので、順序が入れ替わってもおかしくないようにするか、できるだけ使わないようにすることも考慮します。

【表（テーブル）に関する要素】