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>
表示)
AAA | BBB |
---|---|
aaa | bbb |
例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>
表示)
AAA | BBB | CCC |
---|---|---|
aaa | bbb | ccc |
表、行、列のイメージ。
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>
表示)
AAA(BBB) | CCC | |
---|---|---|
ddd | eee | fff |
※スタイルシートで、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>
表示)
AAA(DDD) | bbb | ccc |
---|---|---|
eee | fff |
※スタイルシートで、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>
表示)
AAA,EEE,III | BBB,CCC | DDD | |
---|---|---|---|
fff | ggg | hhh | |
jjj | kkk | lll |
※スタイルシートで、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>
表示)
- | A | B | C |
---|---|---|---|
D | 1 | 2 | 3 |
E | 4 | 5 | 6 |
F | 7 | 8 | 9 |
※スタイルシートで、table要素の横幅を300pxにしています。(width: 300px;)
scope属性
scope属性は、ヘッダーセルがどのセルに関連しているかを指定します。値は以下のキーワードです。
キーワード
- row
ヘッダー・セルと同じ行の後続のセルが関連していることを意味します。 - col
ヘッダー・セルと同じ列の後続のセルが関連していることを意味します。 - rowgroup
ヘッダー・セルと同じ行のグループのセルに関連していることを意味します。なお、行のグループは、thead要素やtbody要素、tfoot要素で構成されますが、これらの要素がtable要素に存在しない場合はこのキーワードは指定できません。 - colgroup
ヘッダー・セルと同じ列のグループのセルに関連していることを意味します。なお、列のグループは、colgroup要素で構成されますが、この要素がtable要素に存在しない場合はこのキーワードは指定できません。
scope属性の指定が無い場合のデフォルト値は「auto」です。autoの状態では、コンテキストに基づいてヘッダー・セルとセルは関連付けられます。headers属性と同様に音声ブラウザなどのユーザー・エージェントが表を読み上げる際の支援となります。
例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>
表示)
- | A | B | C |
---|---|---|---|
D | 1 | 2 | 3 |
E | 4 | 5 | 6 |
F | 7 | 8 | 9 |
※スタイルシートで、table要素の横幅を300pxにしています。(width: 300px;)
abbr属性
abbr属性は、ヘッダー・セル(th要素)のコンテンツの代替ラベルとなるテキストを指定します。この属性の値は、通常、完全なヘッダーセルの略語が望ましいが、拡大または別の言い回しでも構いません。
また、この属性の値は、音声ブラウザなどのユーザー・エージェントがセルに対応するヘッダー・セルを読み上げるときなどに、他のセルとの関連を説明する際に使用されることがあります。
例h)
<th abbr="IE11">Internet Explorer 11</th>
- この要素で変更があった属性
- colspan属性
- この要素で廃止された属性
- axis属性。また、align属性、bgcolor属性、char属性、charoff属性、height属性、nowrap属性、valign属性、width属性は、CSSでより良い処理ができるため廃止されました。