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要素

HTML5 + UX フォーラム新着記事

GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
　資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する
GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
　HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】
PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
　素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】
Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
　Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する