WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <th>「表の見出しセル」

<th> 「表の見出しセル」[読み方:ティエイチ]

<th>タグは、テーブル(表)の見出しセルを作成する場合に使用します。
<tr>の子要素となるため、必ず<tr>の中に記述する必要があります。

HTML規格HTML4.01HTML5
使用可否
広告

<th> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
<tr>フローコンテンツ直後が<td><th>または、親要素の最終コンテンツの場合、終了タグ省略可

<th> の属性

【構文】
<table>
<caption>~表題~</caption>

<thead>
<tr><th id="h1">~見出し~</th></tr>
</thead>
<tbody>
<tr><th headers="h1">~小見出し~</th></tr>
<tr><td>~内容~</td></tr>
</tbody>
<tfoot>
<tr><td>~フッタ内容~</td></tr>
</tfoot>

</table>
属性意味値のサンプルなど
colspan="値"セルが跨ぐ列数を指定1以上の整数のみ指定可
rowspan="値"セルが跨ぐ行数を指定0以上の整数のみ指定可
(0指定は当該セルの行グループの最後までの指定)
headers="id"対応する<th>(見出しセル)のidを指定
scope="値"対応するセルを指定
意味
row同じ行の後続のセル
col同じ列の後続のセル
rowgroup属する行グループ全てのセル
colgroup属する列グループ全てのセル
auto(初期値)文脈によって自動で判断
abbr="内容"<th>(見出しセル)に対する代替えを指定
※読み上げソフトで使用される
sorted="値"列ソート方向および順序
廃止された属性
グローバル属性
  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate
イベント属性
ページTOP

<th>タグのサンプル

header属性指定のサンプル
<head>
<style type="text/css">
<!--
#css-s1 {background-color: #0066ff;border-spacing: 1px;border: 0px;}
#css-s1 caption {background-color: #0066ff;color: #fff;}
#css-s1 th {background-color: #d0f0ff;text-align: center;padding:3px;}
#css-s1 td {background-color: #fff;text-align: center;padding:3px;}
-->
</style>

</head>

<table id="css-s1">
<caption>秋の中間テスト結果</caption>
<thead>
<tr><th id="h1">順位</th><th id="h2">氏名</th><th id="h3">国語</th>
<th id="h4">理科</th><th id="h5">社会</th><th id="h6">個人平均</th>
</tr>
</thead>
<tbody>
<tr><th headers="h1">1位</th><td headers="h2">山田 太郎</td>
<td headers="h3">98</td><td headers="h4">62</td><td headers="h5">87</td>
<td headers="h6">82</td></tr>
<tr><th headers="h1">2位</th><td headers="h2">鈴木 花子</td>
<td headers="h3">85</td><td headers="h4">71</td><td headers="h5">58</td>
<td headers="h6">71</td></tr>
<tr><th headers="h1">3位</th><td headers="h2">斉藤 一郎</td>
<td headers="h3">66</td><td headers="h4">65</td><td headers="h5">52</td>
<td headers="h6">61</td></tr>
</tbody>
<tfoot>
<tr><th colspan=2>科目平均</th><td headers="h3">83</td>
<td headers="h4">66</td><td headers="h5">66</td></tr>
<tr><th colspan=5>全平均</th><td>72</td></tr>
</tfoot>
</table>
秋の中間テスト結果
順位氏名国語理科社会個人平均
1位山田 太郎98628782
2位鈴木 花子85715871
3位斉藤 一郎66655261
科目平均836666-
全平均72
ページTOP
scope属性指定のサンプル
<head>
<style type="text/css">
<!--
#css-s1 {background-color: #0066ff;border-spacing: 1px;border: 0px;}
#css-s1 caption {background-color: #0066ff;color: #fff;}
#css-s1 th {background-color: #d0f0ff;text-align: center;padding:3px;}
#css-s1 td {background-color: #fff;text-align: center;padding:3px;}
-->
</style>

</head>

<table id="css-s1">
<caption>秋の中間テスト結果</caption>
<thead>
<tr><th scope="col">順位</th><th scope="col">氏名</th>
<th scope="col">国語</th><th scope="col">理科</th>
<th scope="col">社会</th><th scope="col">個人平均</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">1位</th><td>山田 太郎</td>
<td>98</td><td>62</td><td>87</td><td>82</td></tr>
<tr><th scope="row">2位</th><td>鈴木 花子</td>
<td>85</td><td>71</td><td>58</td><td>71</td></tr>
<tr><th scope="row">3位</th><td>斉藤 一郎</td>
<td>66</td><td>65</td><td>52</td><td>61</td></tr>
</tbody>
<tfoot>
<tr><th colspan=2 scope="row">科目平均</th><td headers="h3">83</td>
<td headers="h4">66</td><td headers="h5">66</td></tr>
<tr><th colspan=5 scope="row">全平均</th><td>72</td></tr>
</tfoot>
</table>
秋の中間テスト結果
順位氏名国語理科社会個人平均
1位山田 太郎98628782
2位鈴木 花子85715871
3位斉藤 一郎66655261
科目平均836666-
全平均72
ページTOP

留意事項

  • headersscopeは、設定方法が異なりますが、どちらも見出しとデータセルを関連付けます。単純なテーブルの場合は、scope を使用します。行、列単位では関連付けが出来ない複雑なテーブルの場合は、headersを使用します。
  • 極めて単純なテーブル以外は、アクセシビリティを高めるため、headersまたは、scopeを使用すべきです。
  • align、bgcolor、nowrap、width属性は、HTML5で廃止されました。セルの幅・高さなどレイアウトは、スタイルシートで指定します。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン