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

WEBページ作成

HTMLタグリファレンス

HTMLタグとは？

タグ一覧(ABC順) タグ一覧(機能別)

タグ・属性対応表タグ定義一覧

言語コード MIME カテゴリー

CSSリファレンス

JavaScriptサンプル

その他共通

パス(path)指定長さ・大きさの単位文字コード特殊文字一覧 WEBカラー一覧

便利ツール

HTML構文チェックリンクチェックブラウザ表示確認

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

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

HTML規格	HTML4.01	HTML5
使用可否	○	○

<th> の仕様

カテゴリー	使用できる場所（親要素）	コンテンツモデル（子要素）	タグ省略
無	<tr>	フローコンテンツ <header>、<footer>、セクション化コンテンツ、見出しコンテンツは除く	直後が<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="値"

列ソート方向および順序く
※HTML5以降に廃止。指定不可。

廃止された属性

align
axsis
background
bgcolor
char
charoff
height
nowrap
valign
width

グローバル属性	accesskey autocapitalize autofocus class contenteditable dir draggable enterkeyhint hidden id inert inputmode is itemid itemprop itemref itemscope itemtype lang nonce popover slot spellcheck style tabindex title translate writingsuggestions
イベント属性

ページTOP

<th>タグのサンプル

header属性指定のサンプル

<head>
<style type="text/css">

</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位	山田　太郎	98	62	87	82
2位	鈴木　花子	85	71	58	71
3位	斉藤　一郎	66	65	52	61
科目平均		83	66	66	-
全平均					72

ページTOP

scope属性指定のサンプル

<head>
<style type="text/css">

</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位	山田　太郎	98	62	87	82
2位	鈴木　花子	85	71	58	71
3位	斉藤　一郎	66	65	52	61
科目平均		83	66	66	-
全平均					72

ページTOP

留意事項

headers、scopeは、設定方法が異なりますが、どちらも見出しとデータセルを関連付けます。単純なテーブルの場合は、scope を使用します。行、列単位では関連付けが出来ない複雑なテーブルの場合は、headersを使用します。
極めて単純なテーブル以外は、アクセシビリティを高めるため、headersまたは、scopeを使用すべきです。
align、bgcolor、nowrap、width属性は、HTML5で廃止されました。セルの幅・高さなどレイアウトは、スタイルシートで指定します。

ページTOP

関連するHTMLタグ
tr	表の行

関連するCSS(STYLE)
column-count	マルチカラムのカラムの数
columns	マルチカラムのカラムの数と横幅
column-width	マルチカラムのカラムの横幅
empty-cells	空セルの表示
text-align	横（水平）方向の文字位置
vertical-align	縦（垂直）方向の文字位置

このページのURL

当サイトについてよくあるご質問

cman.jp サーバ監視【無料】ＱＲコード作成【無料】画像加工【無料】 htaccess作成【無料】 WEB便利ノート【無料】 IT比較実験【無料】アイコン素材【無料】文字/ボタンのイメージ画像作成【無料】ホームページのパーツ作成【無料】

スマートフォン・タブレット

運営 : CMAN 株式会社シーマン