th要素とは
<th>要素は、<th>要素はheaders属性、またはscope属性で、この見出しセルが指す内容のセルグループを指定します。
- 意味・役割
- 表（テーブル）の見出しセルを表す要素
- 利用できるバージョン（HTML4.01以降）
- 全てのバージョン
- コンテンツ・カテゴリ
-
なし
（HTML5より前：なし） - コンテンツ・モデル（梱包できる要素）
-
フロー・コンテンツ。
ただし、子孫に セクショニング・コンテンツの要素、ヘディング・コンテンツの要素、<header>要素、<footer>要素は配置できない。
（HTML5より前：ブロックレベル要素、インライン要素） - この要素を配置できる親要素
-
<tr>要素
th要素で使える属性
どの要素にでも使えるグローバル属性と以下の属性が使えます。
colspan属性
<th colspan="結合するセルの数">- 属性値
- 結合するセルの数 （初期値： "1"）
- 利用できるバージョン（HTML4.01以降）
- 全てのバージョン
<th colspan="2">rowspan属性
<th rowspan="結合するセルの数">- 属性値
- 結合するセルの数 （初期値： "1"）
- 利用できるバージョン（HTML4.01以降）
- 全てのバージョン
<th rowspan="2">headers属性
<th>にid属性を指定し、その値を記述します。複数ある場合は、半角スペースで区切ることで複数指定できます。
<th headers="見出しセルのid名">- 属性値
- 見出しセルのid名 （複数指定する場合は半角スペースで区切る）
- 利用できるバージョン（HTML4.01以降）
- 全てのバージョン
<th headers="code-name">scope属性
<th scope="どの内容セルの見出しセルか">- 属性値
-
- "row"： 同じ 行 の後続する一部のセルに対する見出し
- "col"： 同じ 列 の後続する一部のセルに対する見出し
- "rowgroup"： 同じ 行 の後続する全てのセルに対する見出し
- "colgroup"： 同じ 列 の後続する全てのセルに対する見出し
- "auto"： 自動 （初期値）
- 利用できるバージョン（HTML4.01以降）
- 全てのバージョン
<th scope="rowgroup">abbr属性
<th abbr="見出しセルの略語">- 属性値
- 見出しセルの略語
- 利用できるバージョン（HTML4.01以降）
- 全てのバージョン
<th abbr="EXP">獲得経験値（EXP）</th>axis属性 HTML5で廃止
axis属性を指定する場合は、headers属性、またはscope属性を使って、各セルを関連付ける必要があります。なお、この属性はHTML5で廃止になりました。
<th axis="分類名" scope="どの内容セルに対しての見出しセルか">- 属性値
- 分類名
- 利用できるバージョン（HTML4.01以降）
- HTML4.01、XHTML1.0, XHTML1.1
<th axis="date" scope="row">width属性 XHTML1.1で廃止
width プロパティで行うようにしましょう。
<th width="セルの幅" >- 属性値
-
- 整数： 画像の横幅（px）
- パーセンテージ： 画像の割合
- 利用できるバージョン（HTML4.01以降）
- HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
<th width="400">height属性 XHTML1.1で廃止
height プロパティで行うようにしましょう。
<th height="セルの高さ" >- 属性値
-
- 整数： 画像の横幅（px）
- パーセンテージ： 画像の割合
- 利用できるバージョン（HTML4.01以降）
- HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
<th height="40">nowrap属性 XHTML1.1で廃止
white-space プロパティで行うようにしましょう。
<th nowrap="nowrap" >- 属性値
- "nowrap"： セル内でテキストの折り返しを禁止する
- 利用できるバージョン（HTML4.01以降）
- HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
<th nowrap="nowrap">align属性 XHTML1.1で廃止
<th>要素の初期値は、"center" になります。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:text-align プロパティで行うようにしましょう。
<th align="テキスト揃え方">- 属性値
-
- "left"： 左揃え
- "center"： 中央揃え
- "right"： 右揃え
- "justify"： 両端揃え （均等配置）
- "char"：
char属性で指定した文字で揃える
- 利用できるバージョン（HTML4.01以降）
- HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
<th align="left">valign属性 XHTML1.1で廃止
vertical-align プロパティで行うようにしましょう。
<th valign="垂直方向の揃え方">- 属性値
-
- "top"： 上揃え
- "middle"： 中央揃え
- "bottom"： 下揃え
- "baseline"： ベースラインで揃える （1行目のみ）
- 利用できるバージョン（HTML4.01以降）
- HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
<th valign="top">char属性 XHTML1.1で廃止
align属性で、"char" を指定した際、テキストを揃える文字を指定する属性です。
基本的には、小数点などを揃える為に使用する為、 "." （ピリオド）を指定します。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSS3の:text-align プロパティで char の指定で行うようにしましょう。
<th char="テキストを揃える文字" align="char">- 属性値
- テキストを揃える文字
- 利用できるバージョン（HTML4.01以降）
- HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
<th char="." align="char">charoff属性 XHTML1.1で廃止
char属性が指定された場合において、その文字の
オフセット （ずらす量）を指定する属性です。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。
<th charoff="オフセットする文字数" char="テキストを揃える文字" align="char">- 属性値
-
- 整数： 画像の横幅（px）
- パーセンテージ： 画像の割合
- 利用できるバージョン（HTML4.01以降）
- HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
<th align="char" char="." charoff="40">bgcolor属性 XHTML1.1で廃止
background-color プロパティで行うようにしましょう。
<th bgcolor="背景色">- 属性値
-
- "16進数RGB値"
- "カラーネーム"
- 利用できるバージョン（HTML4.01以降）
- HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
<th bgcolor="#330000">th要素のサンプル
基本的な表の例
<table>
<tr>
<th>名前</th>
<th>性別</th>
</tr>
<tr>
<td>ボブ</td>
<td>男</td>
</tr>
<tr>
<td>ムカミ</td>
<td>男</td>
</tr>
<tr>
<td>メアリー</td>
<td>女</td>
</tr>
</table>RERUN
thead要素、tbody要素を使った表の例
<table border="1">
<caption>2017年1月のカレンダー</caption>
<thead>
<tr>
<th>日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>RERUN
様々な属性を使った表の例
<table border="1">
<caption>時間割</caption>
<thead>
<tr>
<th rowspan="2">時間</th>
<th colspan="6">曜日</th>
</tr>
<tr>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup">1限</td>
<td>国語</td>
<td>数学</td>
<td>音楽</td>
<td>社会</td>
<td rowspan="2">体育</td>
<td>英語</td>
</tr>
<tr>
<th scope="rowgroup">2限</td>
<td>数学</td>
<td>理科</td>
<td>社会</td>
<td>英語</td>
<td>国語</td>
</tr>
<tr>
<th scope="rowgroup">3限</td>
<td rowspan="2">体育</td>
<td>英語</td>
<td>数学</td>
<td>美術</td>
<td>国語</td>
<td>数学</td>
</tr>
<tr>
<th scope="rowgroup">4限</td>
<td>社会</td>
<td>英語</td>
<td>国語</td>
<td>数学</td>
<td>理科</td>
</tr>
<tr>
<td colspan="7">お昼休み</td>
</tr>
<tr>
<th scope="rowgroup">5限</td>
<td>英語</td>
<td>国語</td>
<td rowspan="2">体育</td>
<td>理科</td>
<td>美術</td>
<td rowspan="2"> </td>
</tr>
<tr>
<th scope="rowgroup">6限</td>
<td>美術</td>
<td>音楽</td>
<td>数学</td>
<td>音楽</td>
</tr>
</tbody>
</table>RERUN
仕様
- HTML5.1
- 4.9.10. The th element
- HTML5
- 4.9.10 The th element
