いまさらHTML,CSS入門講座 | HTML5｜th要素 - 表形式データ（Tabular data）-

いまさらHTML,CSS講座 > HTML5 > th要素 - テーブル 表形式データ（Tabular data）-

th要素

th要素は、table要素のヘッダー・セルのデータを表します。ヘッダー・セルとは、表において、他のセルの見出しや項目など行や列の軸となるセルです。

例a）1行目に2列のヘッダー・セル、2行目に2列のデータ・セル（td要素）。

<table border="1">
<tr><th>AAA</th><th>BBB</th></tr>
<tr><td>aaa</td><td>bbb</td></tr>
</table>

表示）

例b）1行目に3列のヘッダーセル、2行目に3列のデータ・セル（td要素）。

<table border="1">
<tr><th>AAA</th><th>BBB</th><th>CCC</th></tr>
<tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
</table>

表示）

表、行、列のイメージ。

colspan属性

colspan属性は、列を跨ぐセルの数を指定します。値は負ではない整数です。

例d）1行目の1列、2列目の2つのセルが1つのセルになるようにcolspan属性を指定しています。

<table border="1">
<tr>
<th colspan="2">AAA(BBB)</th><th>CCC</th></tr>
<tr>
<td>ddd</td><td>eee</td><td>fff</td>
</tr>
</table>

表示）

※スタイルシートで、table要素の横幅を300pxにしています。（width: 300px;）

rowspan属性

colspan属性は、列を跨ぐセルの数を指定します。値は負ではない整数です。なお、0より大きい値を指定する必要があります。

例e）1列目の1行、2行目の2つのセルが1つのセルになるようにrowspan属性を指定しています。

<table border="1">
<tr>
<th rowspan="2">AAA(DDD)</th><td>bbb</td><td>ccc</td></tr>
<tr>
<td>eee</td><td>fff</td>
</tr>
</table>

表示）

※スタイルシートで、table要素の横幅を300pxにしています。（width: 300px;）

例e）

<table border="1">
<tr>
<th rowspan="3">AAA,EEE,III</th>
<th colspan="2">BBB,CCC</th>
<th>DDD</th>
</tr>

<tr>
<td>fff</td>
<td>ggg</td>
<td>hhh</td>
</tr>

<tr>
<td>jjj</td>
<td>kkk</td>
<td>lll</td>
</tr>
</table>

表示）

※スタイルシートで、table要素の横幅を300pxにしています。（width: 300px;）

headers属性

headers属性は、ヘッダー・セル（th要素）すなわち、見出しとなるセルとデータ・セル（td要素）の関連を表します。値はヘッダー・セルが持つid名です。また、値は半角スペースで区切りで複数指定することができます。

headers属性を指定することは、音声ブラウザなどのユーザー・エージェントが表を読み上げる際の支援となります。

例f）データ・セルのtd要素の数字「1」は、ヘッダー・セルのth要素のアルファベットの「A」と「D」に関連するデータ、「2」は「B」と「D」、「3」は「C」と「D」…のようにヘッダー・セルとデータ・セルを関連付けています。

<table border="1">
<tr>
<th> - </th>
<th id="a">A</th>
<th id="b">B</th>
<th id="c">C</th>
</tr>

<tr>
<th id="d">D</th>
<td headers="a d">1</td>
<td headers="b d">2</td>
<td headers="c d">3</td>
</tr>

<tr>
<th id="e">E</th>
<td headers="a e">4</td>
<td headers="b e">5</td>
<td headers="c e">6</td>
</tr>

<tr>
<th id="f">F</th>
<td headers="a f">7</td>
<td headers="b f">8</td>
<td headers="c f">9</td>
</tr>
</table>

表示）

※スタイルシートで、table要素の横幅を300pxにしています。（width: 300px;）

scope属性

scope属性は、ヘッダーセルがどのセルに関連しているかを指定します。値は以下のキーワードです。

例g）ヘッダー・セルの「A」は、同じ列の後続のセル「1」「4」「7」に関連していることを表し、Bは、同様に「2」「5」「8」、Cは同様に「3」「6」「9」に関連していることを表しています。また、Dは、同じ行の後続のセル「1」「2」「3」に関連していることを表し、Eは同様に「4」「5」「6」、Fは同様に「7」「8」「9」に関連していることを表しています。

<table border="1">
<tr>
<th> - </th>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
</tr>
<tr>
<th scope="row">D</th>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th scope="row">E</th>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<th scope="row">F</th>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

表示）

※スタイルシートで、table要素の横幅を300pxにしています。（width: 300px;）

abbr属性

abbr属性は、ヘッダー・セル（th要素）のコンテンツの代替ラベルとなるテキストを指定します。この属性の値は、通常、完全なヘッダーセルの略語が望ましいが、拡大または別の言い回しでも構いません。

また、この属性の値は、音声ブラウザなどのユーザー・エージェントがセルに対応するヘッダー・セルを読み上げるときなどに、他のセルとの関連を説明する際に使用されることがあります。

例h）

<th abbr="IE11">Internet Explorer 11</th>