td要素に見出しの意味合いを付加するth要素
<th>……</th>

　th要素は「table header cell」の略で、td要素に見出しの意味合いを付加する際に使います。テキストやインライン要素、ブロック要素を内包できます。table要素も内包できますが、Webアクセシビリティを考慮すると、あまり好ましくありません。

例

野菜値段産地
野菜値段産地
キャベツ100円長野
長ネギ50円埼玉
<html>
<head>
  <title>th要素のサンプル</title>
</head>
<body>
  <table>

    <thead>
      <tr>
        <th>野菜</th><th>値段</th><th>産地</th>
      </tr>
    </thead>

    <tfoot>
      <tr>
        <th>野菜</th><th>値段</th><th>産地</th>
      </tr>
    </tfoot>

    <tbody>
      <tr>
        <td>キャベツ</td><td>100円</td><td>長野</td>
      </tr>
      <tr>
        <td>長ネギ</td><td>50円</td><td>埼玉</td>
      </tr>
    </tbody>

  </table>
</body>
</html>

DOMでの参照方法

[window.]document.getElementById("【ID属性値名】")

オプション属性

属性 値 機能 入力例 DOM参照
abbr テキスト セルの内容
を簡略化した
ものを指定		 <th abbr="キャベツ">……</th> −
align "left""center"
"right"
"justify" "char"		 水平方向の
整列方法を
指定		 <th align="center">……</th> [window.]document.getElementById("【ID属性値名】").align
axis テキスト セルの内容
の分類名
を指定		 <th axis="kind">……</th> [window.]document.getElementById("【ID属性値名】").axis
bgcolor
（非推奨属性）		 頭に「#」を
付けた16進数値
か、あらかじめ
定義されている
色名を指定		 背景色を
指定		 <th bgcolor="red">……</th> [window.]document.getElementById("【ID属性値名】").bgColor
char テキスト align属性の
値で"char"を
指定した際に
、そろえる
軸となる
文字を指定		 <th align="char" char=".">……</th> −
charoff ピクセル値、
または％値		 char属性
で指定した、
そろえる軸
となる文字
までの距離
を指定		 <th align="char" char="." charoff="2">……</th> −
colspan 結合したい
列の数		 セルの列
の結合数
を指定		 <th colspan="2">……</th> [window.]document.getElementById("【ID属性値名】").colSpan
id th要素の
ID名		 th要素と
td要素の
部分的関連
を指定		 <tr>
  <th id="vegetable">野菜</th>
  <th id="price">値段</th>
</tr>
<tr>
  <td headers="vegetable">キャベツ</td>
  <td headers="price">100円</td>
</tr>		 −
height
（非推奨属性）		 ピクセル値、
または％値		 セルの高さ
を指定		 <th height="80">……</th> [window.]document.getElementById("【ID属性値名】").height
nowrap
（非推奨属性）		 "nowrap" セル内の
テキストの
折り返し
を抑制		 <th nowrap="nowrap">……</th> [window.]document.getElementById("【ID属性値名】").noWrap
rowspan 結合したい
行の数		 セルの行
の結合数
を指定		 <th rowspan="2">……</th> [window.]document.getElementById("【ID属性値名】").rowSpan
scope "row" "col"
"rowgroup"
"colgroup"		 th要素と
td要素
の関連
を指定		 <tr>
  <th scope="col">野菜</th>
  <th scope="col">値段</th>
</tr>
<tr>
  <td>キャベツ</td>
  <td>100円</td>
</tr>		 −
valign "top" "middle"
"bottom"
"baseline"		 垂直方向の
位置を指定		 <th valign="middle">……</th> [window.]document.getElementById("【ID属性値名】").vAlign
width
（非推奨属性）		 ピクセル値
、または％値		 表の横幅
を指定		 <th width="80">……</th> [window.]document.getElementById("【ID属性値名】").width

追加が可能なイベントハンドラ属性

onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup

HTMLタグリファレンス インデックス

有限会社タグパンダ
喜安 亮介

9/11

　INDEX
Web標準HTMLタグリファレンス（4）
アクセシビリティも考慮して表組みするための10のタグ テーブル
  table 表（テーブル）を定義するtable要素
  caption 表題を定義するcaption要素
  thead 表のヘッダ部分を定義するthead要素
  tfoot 表のフッタ部分を定義するtfoot要素
  tbody 表のメイン部分を表すtbody要素
  tr 表の行を定義するtr要素
  td 表内の最小単位の枠（セル）を表すtd要素
th td要素に見出しの意味合いを付加するth要素
  colgroup 表の列を構造的にグループ分けするcolgroup要素
  col 列のスタイルをまとめて調節するcol要素


TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH