<th>テーブルの見出しセルを作成

<th>タグは、テーブル(表)の見出しセル(table header data)を表します。

使い方は<table>~</table>内に<tr>~</tr>を記述しテーブルの横1行を定義します。 さらにその中にth要素やtd要素を配置する事でデータセルを表す事ができます。

またcolspan属性、rowspan属性、headers属性を指定することで、見出しセルを結合したりすることができます。 これはtd要素と全く同じように指定できますので、詳しくはそちらのページを参照下さい。

scope属性では、その見出しが対応する行・列の対象範囲を指定することができます。 値にrow、col、rowgroup、colgroupなどを指定する事で、後続のセルとの結びつきを示します。 例えば値にrowを指定すると、th要素が同じ行のセルに対する見出しであることを明確に示す事ができます。 同じようにcolを指定すれば、th要素が同じ列のセルに対する見出しである事が示せます。

ユーザーが音声ブラウザなどを使用している場合に、この属性が指定してあると役立てる事が可能です。 またscope属性がない場合は、そのth要素は文脈に応じたセル範囲に結び付けられます。

HTML5での変更点

HTML5のth要素では、align属性、valign属性、width属性、height属性、bgcolor属性、nowrap属性、char属性、charoff属性、axis属性が廃止されています。 またcolspan属性の値に0を指定することができなくなっています。

書式

  • <th 属性="値">~</th> ……… 表のヘッダセルを作成

属性

colspan="" 水平方向で結合するセルを1以上の整数値で指定
rowspan="" 垂直方向で結合するセルを0以上の整数値で指定
headers="" セルに対応するth要素をid属性を使って指定
scope="" 見出しの対象範囲を次の値から指定
  • row …… 同じ行のセルに対する見出し
  • col …… 同じ列のセルに対する見出し
  • rowgroup …… 行グループ全体のセルに対する見出し
  • colgroup …… 列グループ全体のセルに対する見出し
abbr="" 見出しの省略文字をテキストで指定

使用した時の例

<table border="1">
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
  </tr>
  <tr>
    <td>内容1-1</td>
    <td>内容2-1</td>
    <td>内容3-1</td>
  </tr>
  <tr>
    <td>内容1-2</td>
    <td>内容2-2</td>
    <td>内容3-2</td>
  </tr>
</table>


<table border="1">
  <tr>
    <th scope="col" abbr="名前">会員の名前</th>
    <th scope="col" abbr="住所">都道府県別の住所</th>
    <th scope="col" abbr="電話番号">ご連絡先(電話番号)</th>
  </tr>
  <tr>
    <td>内容1-1</td>
    <td>内容2-1</td>
    <td>内容3-1</td>
  </tr>
  <tr>
    <td>内容1-2</td>
    <td>内容2-2</td>
    <td>内容3-2</td>
  </tr>
</table>

ブラウザ上の表示例

見出し1 見出し2 見出し3
内容1-1 内容2-1 内容3-1
内容1-2 内容2-2 内容3-2
会員の名前 都道府県別の住所 ご連絡先(電話番号)
内容1-1 内容2-1 内容3-1
内容1-2 内容2-2 内容3-2

対応ブラウザなどのデータ

形式 <th>~</th> カテゴリ なし
親要素 tr 子要素 フレージング・コンテンツ
開始タグ 必須 終了タグ 省略可能
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~