<th>【表のヘッダセル (Table header cell)】
概要 ( 終了タグの省略 ) 構文 DOMインタフェース (HTMLTableCellElement)
概要
メモ
- <table>【表】のヘッダセルの定義
- 通常、太字で中央揃え
- <tr>【表の行定義】・<template>【テンプレート】内に定義
- データセル：<td>【表のデータセル】
- 終了タグ (HTML)
- 省略可 (詳細：終了タグ)
- セルの結合〔 例 〕
- 水平方向：colspan【水平方向のセル結合数】属性
- 垂直方向：rowspan【垂直方向のセル結合数】属性
- 枠線のスタイル設定〔 例 〕
- CSS border【境界線】
例
<style>
table.ex-1 { border: 1px black solid; width: 300px; }
table.ex-1 th { border: 1px black solid; }
table.ex-1 td { border: 1px black solid; }
</style>
<table class="ex-1">
<tr><th>ヘッダセル<th>ヘッダセル</tr>
<tr><th style="background-color:yellow">ヘッダセル<td>データセル</tr>
<tr><th>ヘッダセル<td>データセル</tr>
<tr><th>ヘッダセル<td>データセル</tr>
</table>
| ヘッダセル | ヘッダセル |
|---|---|
| ヘッダセル | データセル |
| ヘッダセル | データセル |
| ヘッダセル | データセル |
例 (セルの結合)
<style>
table.ex-2 { border: 1px black solid; border-collapse:collapse; width:450px; }
table.ex-2 th { border: 1px black solid; }
table.ex-2 td { border: 1px black solid; }
</style>
<table class="ex-2">
<tr><th>ヘッダセル１<th colspan="2">ヘッダセル２</tr>
<tr><th rowspan="3">ヘッダセル３<td>データセル<td>データセル</tr>
<tr><td>データセル<td>データセル</tr>
<tr><td>データセル<td>データセル</tr>
</table>
| ヘッダセル１ | ヘッダセル２ | |
|---|---|---|
| ヘッダセル３ | データセル | データセル |
| データセル | データセル | |
| データセル | データセル | |
例 (枠線)
<style>
table.ex-3 { border: 1px black solid; width: 300px; height: 200px; }
table.ex-3 th { border: 1px black solid; }
table.ex-3 td { border: 1px black solid; }
</style>
<table class="ex-3">
<tr><th style="border:3px red solid;">ヘッダセル<th style="border:3px red dashed;">ヘッダセル</tr>
<tr><th style="border:3px red dotted;">ヘッダセル<td>データセル</tr>
<tr><th style="border:3px red double;">ヘッダセル<td>データセル</tr>
<tr><th style="border:3px red none;">ヘッダセル<td>データセル</tr>
</table>
| ヘッダセル | ヘッダセル |
|---|---|
| ヘッダセル | データセル |
| ヘッダセル | データセル |
| ヘッダセル | データセル |
CSS (一部)
| スタイル | スタイル定義 | 備考 |
|---|---|---|
| 幅 (個別) | width【要素の幅】 | |
| 高さ | height【要素の高さ】 | |
| 水平方向位置 | text-align【テキスト配置】 | |
| 垂直方向位置 | vertical-align【垂直配置】 | |
| テキスト色 | color【テキスト色】 | カラー定義 |
| 背景色 | background-color【背景色】 | カラー定義 |
| 空要素の表示有無 | empty-cells【空セルの表示有無】 | |
| 枠線の幅・線種・色 (一括) | border【境界線】 | 個別指定：border-○○ |
| 枠線の幅 (一括) | border-width【境界線の幅】 | 個別指定：border-○○-width |
| 枠線の線種 (一括) | border-style【境界線のスタイル】 | 個別指定：border-○○-style |
| 枠線の色 (一括) | border-color【境界線の色】 | 個別指定：border-○○-color |
※一列・一行 の指定は、<col>【表の列属性】・<tr>【表の行定義】で指定
関連要素
外部リンク
- HTML Living Standard (英語)
- W3C HTML 5.2 (英語)
- W3C HTML 5.1 2nd Edition (英語)
- W3C HTML5 (英語)
構文
| <th | 必須 | 開始タグ | ||||||||||||||||
| abbr=【代替ラベル】 | 代替ラベル | |||||||||||||||||
| align=【水平方向位置】 | 水平方向位置 代替：スタイルシート(text-align) | |||||||||||||||||
| axis=【多次元配列用情報】 | 多次元配列用情報 | |||||||||||||||||
| bgcolor=【背景色】 | 背景色 代替：スタイルシート(background-color) | |||||||||||||||||
| char=【位置揃え文字】 | 位置揃え文字 | |||||||||||||||||
| charoff=【位置揃え文字のオフセット】 | 位置揃え文字のオフセット | |||||||||||||||||
| colspan=【水平方向のセル結合数 (デフォルト：1)】 | 水平方向のセル結合数 (1以上) | |||||||||||||||||
| headers=【見出し用セル(<th>)のid属性値 (複数：スペース区切り)】 | 見出し用セル | |||||||||||||||||
| height=【高さ】 | 高さ 代替：スタイルシート(height) | |||||||||||||||||
| nowrap | 自動改行禁止 | |||||||||||||||||
| rowspan=【垂直方向のセル結合数 (デフォルト：1)】 | 垂直方向のセル結合数 (0：現在行から最終行まで (行グループ<thead>【表のヘッダグループ】 ・<tbody>【表のボディグループ】 ・<tfoot>【表のフッタグループ】内) 一部未サポート) | |||||||||||||||||
| scope=auto | col | colgroup | row | rowgroup | スコープ | |||||||||||||||||
| valign=【垂直方向位置】 | 垂直方向位置 代替：スタイルシート(vertical-align) | |||||||||||||||||
| width=【幅】 | 幅 代替：スタイルシート(width) | |||||||||||||||||
【グローバル属性】 | ||||||||||||||||||
| accesskey=【アクセスキー (複数：半角スペース区切り )】 | アクセスキー | |||||||||||||||||
| autocapitalize=【変換方法】 | 自動大文字化
| |||||||||||||||||
| autofocus | ページロード時、自動フォーカス ※：<button>【ボタン】・<input>【汎用入力コントロール】・<textarea>【複数行入力コントロール】・<select>【選択リスト】はW3C定義の同名個別属性も参照 | |||||||||||||||||
| class=【クラス名 (複数：半角スペース区切り)】 | 所属クラス (複数指定：<style>【スタイル情報】)・外部スタイルシートで後の定義が優先 | |||||||||||||||||
| contenteditable [ ="" (可能) | true (可能) | false (不可) | inherit (親要素継承) ] | 編集可否 | |||||||||||||||||
| contextmenu=<menu>【メニュー】 のid | コンテキストメニューのid | |||||||||||||||||
| data-*=【カスタムデータ】 | カスタムデータ属性 | |||||||||||||||||
| dir=ltr (左から右) | rtl (右から左) | auto (自動) | 文字表記方向 (ltr：left to right text or table / rtl：right to left text or table) ※<bdo>【テキスト方向形式】の場合、ltr または rtlが必須 | |||||||||||||||||
| draggable=true (ドラッグ可能) | false (ドラッグ不可) | auto (ブラウザ既定) | ドラッグ可否 | |||||||||||||||||
| dropzone=copy (ドロップデータのコピー) | move (ドロップデータを移動) | link (ドロップデータのリンク) | ドロップデータの扱い | |||||||||||||||||
| enterkeyhint=【ヒント】 | [Enter]キーのアクション ヒント (対応するラベル・アイコン等を表示)
| |||||||||||||||||
| id=【id】 | id (ドキュメント中で一意 name【コントロール名 (送信データ名)】を含む) スペース文字 (SP：U+0020・tab：U+0009・LF：U+000A・FF：U+000C・CR：U+000D) 以外の全ての文字が使用可能 (大文字小文字の区別あり) (<a>【ハイパーリンク】のリンク先・CSS対象(#～)・スクリプト参照) | |||||||||||||||||
| inputmode=【入力モード】 | 入力モード (参照：CSS ime-mode【IMEモード】) ※：<input>【汎用入力コントロール】・<textarea>【複数行入力コントロール】はW3C定義の同名個別属性も参照
| |||||||||||||||||
| is=【定義名】 | 定義名 | |||||||||||||||||
| itemid=【URL】 | アイテムのグローバル識別子 | |||||||||||||||||
| itemprop=【アイテムのプロパティ (複数：半角スペース区切り)】 | アイテムのプロパティ | |||||||||||||||||
| itemref=【要素IDのリスト】 | アイテムの参照リスト | |||||||||||||||||
| itemscope | アイテムのプロパティ宣言 | |||||||||||||||||
| itemtype=【アイテムの型 (複数：半角スペース区切り)】 | アイテムの型 | |||||||||||||||||
| lang=【言語コード】 | 言語コード (【主コード】-【副コード】 例："ja"：日本語 / "en"：英語 / "en-US"：アメリカ英語) | |||||||||||||||||
| nonce=【ワンタイム トークン (文字列)】 | CSP(コンテンツ セキュリティ ポリシー)のチェックで使用されるワンタイム トークン(nonce：number used once) ※：<link>【メタデータリンク】・<script>【スクリプト】・<style>【スタイル情報】はW3C定義の同名個別属性も参照 | |||||||||||||||||
| slot=【スロット名】 | スロット (<slot>【スロット】の name属性に対応) | |||||||||||||||||
| spellcheck=true | false | スペルチェック有無 | |||||||||||||||||
| style=【スタイルシート (複数：セミコロン区切り / 最後のセミコロンは省略可)】 | スタイル | |||||||||||||||||
| tabindex=【タブインデックス番号】 | タブインデックス | |||||||||||||||||
| title=【説明文】 | 説明 (多くはツールチップ表示) ※<link>【メタデータリンク】：メタデータリンクのタイトル ※<style>【スタイル情報】：スタイルシート名 | |||||||||||||||||
| translate="" (翻訳対象) | yes (翻訳対象) | no (翻訳対象外) | 翻訳可否 | |||||||||||||||||
| > | ||||||||||||||||||
【表のヘッダセル】 | ||||||||||||||||||
| </th> | H 省略可 | 終了タグ (直後に<td>または<th>が続く場合、あるいは親要素が終了する場合、省略可) | ||||||||||||||||
DOMインタフェース (HTMLTableCellElement : HTMLElement)
interface HTMLTableCellElement : HTMLElement | |||
interface HTMLElement : Element | |||
interface Element : Node | |||
HTMLTableCellElement | |||
| DOMString | abbr | 代替ラベル (<th>【表のヘッダセル】のみ) | |
| long | cellIndex | 列番号 | |
| unsigned long | colSpan | 水平方向のセル結合数 | |
| DOMString | headers | 見出し用セル (複数：スペース区切り) | |
| unsigned long | rowSpan | 垂直方向のセル結合数 | |
| DOMString | scope | スコープ (<th>【表のヘッダセル】のみ) | |
HTMLElement | |||
| DOMString | accessKey | アクセスキー | |
| DOMString | autocapitalize | 自動大文字化 | |
| DOMString | accessKeyLabel | アクセスキー表現文字列 | |
| DOMString | contentEditable | 編集可能状態 ("true"：編集可能 / "false"：編集不可 / "inherit"：親要素継承) ( ElementContentEditable に移動 ) | |
| DOMStringMap | dataset | カスタムデータ属性 (data-*) マップ ( HTMLOrSVGElement に移動 ) | |
| DOMString | dir | 文字表記方向 ("ltr"：左から右 / "rtl"：右から左) | |
| boolean | draggable | ドラッグ可否 | |
| [PutForwards=value] | DOMTokenList | dropzone | ドロップデータの扱い |
| boolean | hidden | 非表示状態 | |
| [LegacyNullToEmptyString] | DOMString | innerText | 要素内容 (テキスト形式) |
| boolean | isContentEditable | 編集可否 ( ElementContentEditable に移動 ) | |
| DOMString | lang | 言語コード | |
| [LegacyNullToEmptyString] | DOMString | outerText | タグを含む要素内容 (テキスト形式) |
| boolean | spellcheck | スペルチェック有無 | |
| long | tabIndex | タブインデックス ( HTMLOrSVGElement に移動 ) | |
| DOMString | title | 説明 | |
| boolean | translate | 翻訳可否 | |
| ElementInternals attachInternals() | |||
| undefined blur() | フォーカス喪失 操作 ( HTMLOrSVGElement に移動 ) | ||
| undefined click() | クリック 操作 | ||
| undefined focus() | フォーカス設定 操作 ( HTMLOrSVGElement に移動 ) | ||
| undefined forceSpellCheck() | スペルチェック | ||
ElementContentEditable | |||
| DOMString | contentEditable | 編集可能状態 | |
| DOMString | enterKeyHint | [Enter]キーのアクション ヒント | |
| DOMString | inputMode | 入力モード | |
| boolean | isContentEditable | 編集可否 | |
HTMLOrSVGElement | |||
| boolean | autofocus | ページロード時、自動フォーカス | |
| DOMStringMap | dataset | カスタムデータ属性 (data-*) マップ | |
| DOMString | nonce | ワンタイム トークン | |
| long | tabIndex | タブインデックス | |
| undefined focus(optional FocusOptions options = {}) | フォーカス設定 操作 | ||
| undefined blur() | フォーカス喪失 操作 | ||
GlobalEventHandlers | |||
| EventHandler | on～ | 各種イベントハンドラ (onclick・onfocus 等) | |
DocumentAndElementEventHandlers | |||
| EventHandler | oncopy | コピー イベントハンドラ | |
| EventHandler | oncut | カット イベントハンドラ | |
| EventHandler | onpaste | ペースト イベントハンドラ | |
ElementCSSInlineStyle【CSSOM定義】 | |||
| CSSStyleDeclaration | style | スタイル | |
CSSStyleDeclaration | |||
| DOMString | style.～ | スタイル属性 (CSS2Properties) (例：style.color・style.backgroundColor) | |
Element | |||
| [SameObject] | NamedNodeMap | attributes | 関連属性 マップ |
| [SameObject] | DOMTokenList | classList | クラス名 リスト |
| DOMString | className | クラス名 | |
| DOMString | id | id (ページ内で一意：name【コントロール(送信)名】を含む) | |
| (DOMString | innerHTML) | 要素内容 (HTML形式)〔 DOM Parsing and Serialization 定義 〕 | |
| DOMString | localName | ローカル名 | |
| DOMString? | namespaceURI | ネームスペースURI | |
| (DOMString | outerHTML) | タグを含む要素内容 (HTML形式)〔 DOM Parsing and Serialization 定義 〕 | |
| DOMString? | prefix | プレフィックス | |
| DOMString | tagName | タグ名 | |
| ShadowRoot attachShadow(ShadowRootInit init) | |||
| Element? closest(DOMString selectors) | |||
| DOMString? getAttribute(DOMString qualifiedName) | 属性取得 | ||
| DOMString? getAttributeNS(DOMString? namespace, DOMString localName) | 属性取得 (ネームスペース指定) | ||
| sequence<DOMString> getAttributeNames() | |||
| Attr? getAttributeNode(DOMString qualifiedName) | |||
| Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName) | |||
| HTMLCollection getElementsByClassName(DOMString classNames) | エレメント コレクション取得 (クラス名指定) | ||
| HTMLCollection getElementsByTagName(DOMString qualifiedName) | エレメント コレクション取得 (タグ名指定) | ||
| HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName) | エレメント コレクション取得 (ネームスペース・タグ名指定) | ||
| boolean hasAttribute(DOMString qualifiedName) | 属性チェック | ||
| boolean hasAttributeNS(DOMString? namespace, DOMString localName) | 属性チェック (ネームスペース指定) | ||
| boolean hasAttributes() | |||
| Element? insertAdjacentElement(DOMString where, Element element) | |||
| undefined insertAdjacentText(DOMString where, DOMString data) | |||
| boolean matches(DOMString selectors) | |||
| undefined removeAttribute(DOMString qualifiedName) | 属性削除 | ||
| undefined removeAttributeNS(DOMString? namespace, DOMString localName) | 属性削除 (ネームスペース指定) | ||
| Attr removeAttributeNode(Attr attr) | |||
| undefined setAttribute(DOMString qualifiedName, DOMString value) | 属性設定 | ||
| undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value) | 属性設定 (ネームスペース指定) | ||
| Attr? setAttributeNode(Attr attr) | |||
| Attr? setAttributeNodeNS(Attr attr) | |||
| boolean toggleAttribute(DOMString qualifiedName, optional boolean force) | |||
| boolean webkitMatchesSelector(DOMString selectors) | matches のエイリアス | ||
ParentNode | |||
| unsigned long | childElementCount | 子エレメントの数 | |
| [SameObject] | HTMLCollection | children | 子エレメント コレクション |
| Element? | firstElementChild | 最初の子エレメント | |
| Element? | lastElementChild | 最後の子エレメント | |
| undefined append((Node or DOMString)... nodes) | |||
| undefined prepend((Node or DOMString)... nodes) | |||
| Element? querySelector(DOMString selectors) | 指定セレクタ先頭エレメント取得 | ||
| [NewObject] NodeList querySelectorAll(DOMString selectors) | 指定セレクタ ノードリスト取得 | ||
ChildNode | |||
| undefined after((Node or DOMString)... nodes) | |||
| undefined before((Node or DOMString)... nodes) | |||
| undefined remove() | 削除 | ||
| undefined replaceWith((Node or DOMString)... nodes) | |||
NonDocumentTypeChildNode | |||
| Element? | previousElementSibling | 前の兄弟エレメント | |
| Element? | nextElementSibling | 次の兄弟エレメント | |
Slottable | |||
| HTMLSlotElement? | assignedSlot | ||
Node | |||
| USVString | baseURI | ベースURI | |
| [SameObject] | NodeList | childNodes | 子ノード リスト |
| Node? | firstChild | 先頭子ノード | |
| boolean | isConnected | ||
| Node? | lastChild | 最終子ノード | |
| Node? | nextSibling | 次の兄弟ノード | |
| DOMString | nodeName | ノード名 | |
| unsigned short | nodeType | ノードタイプ (ELEMENT_NODE / ATTRIBUTE_NODE / TEXT_NODE / CDATA_SECTION_NODE / ENTITY_REFERENCE_NODE / ENTITY_NODE / PROCESSING_INSTRUCTION_NODE / COMMENT_NODE / DOCUMENT_NODE / DOCUMENT_TYPE_NODE / DOCUMENT_FRAGMENT_NODE / NOTATION_NODE) | |
| DOMString? | nodeValue | ノード値 | |
| Document? | ownerDocument | オーナードキュメント | |
| Element? | parentElement | 親エレメント | |
| Node? | parentNode | 親ノード | |
| Node? | previousSibling | 前の兄弟ノード | |
| DOMString? | textContent (IE：innerText) | 内容 (Text形式) (参照：Element.innerHTML・Element.outerHTML) 取得：要素内のHTMLタグを除外しテキストのみ 設定：HTMLタグはテキスト変換 | |
| Node appendChild(Node node) | 子ノード追加 | ||
| [NewObject] Node cloneNode(optional boolean deep = false) | クローンノード作成 | ||
| unsigned short compareDocumentPosition(Node other) | 他ノードとの位置比較 (DOCUMENT_POSITION_DISCONNECTED / DOCUMENT_POSITION_PRECEDING / DOCUMENT_POSITION_FOLLOWING / DOCUMENT_POSITION_CONTAINS / DOCUMENT_POSITION_CONTAINED_BY / DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC) | ||
| boolean contains(Node? other) | 指定子孫ノードの存在有無 | ||
| Node getRootNode(optional GetRootNodeOptions options = {}) | |||
| boolean hasChildNodes() | 子ノードの存在有無 | ||
| Node insertBefore(Node node, Node? child) | 指定ノード前挿入 | ||
| boolean isDefaultNamespace(DOMString? namespace) | デフォルトネームスペース チェック | ||
| boolean isEqualNode(Node? node) | 同一ノードチェック | ||
| boolean isSameNode(Node? otherNode) | |||
| DOMString? lookupNamespaceURI(DOMString? prefix) | ネームスペースURI調査 | ||
| DOMString? lookupPrefix(DOMString? namespace) | ネームスペース プレフィックス調査 | ||
| undefined normalize() | 標準化 | ||
| Node removeChild(Node child) | 子ノード削除 | ||
| Node replaceChild(Node node, Node child) | 子ノード置換 | ||
EventTarget | |||
| undefined addEventListener(DOMString type, EventListener? callback, optional (AddEventListenerOptions or boolean) options = {}) | |||
| boolean dispatchEvent(Event event) | |||
| undefined removeEventListener(DOMString type, EventListener? callback, optional (EventListenerOptions or boolean) options = {}) | |||