<table>【表 (Table)】

概要 構文 DOMインタフェース (HTMLTableElement)

概要

メモ

例 (枠の指定)

<style>
table.ex-1 { border: 2px black solid; width: 300px; height: 100px; }
table.ex-1 th { border: 2px red solid; }
table.ex-1 td { border: 2px blue solid; }

table.ex-2 { border-collapse: collapse; }
table.ex-2 th { border: 2px red solid; background-color: lightgray; }
table.ex-2 td { border: 2px blue solid; }
</style>
<p>スタイル未指定</p>
<table>
  <caption>表の見出し</caption>
  <tr><th>ヘッダセル<th>ヘッダセル</tr>
  <tr><th>ヘッダセル<td>データセル</tr>
</table>

<hr>
<p>border【境界線】指定</p>
<table class="ex-1">
  <caption>表の見出し</caption>
  <tr><th>ヘッダセル<th>ヘッダセル</tr>
  <tr><th>ヘッダセル<td>データセル</tr>
</table>

<hr>
<p>border-collapse:collapse【境界線を共有】・border【境界線】指定</p>
<table class="ex-2">
  <caption>表の見出し</caption>
  <tr><th>ヘッダセル<th>ヘッダセル<th>ヘッダセル</tr>
  <tr><th>ヘッダセル<td>データセル<td>データセル</tr>
  <tr><th>ヘッダセル<td>データセル<td>データセル</tr>
</table>

スタイル未指定

表の見出し
ヘッダセルヘッダセル
ヘッダセルデータセル

border【境界線】指定

表の見出し
ヘッダセルヘッダセル
ヘッダセルデータセル

border-collapse:collapse【境界線を共有】・border【境界線】指定

表の見出し
ヘッダセルヘッダセルヘッダセル
ヘッダセルデータセルデータセル
ヘッダセルデータセルデータセル

例 (列毎のテキスト配置)

<style>
table.ex-3 { border-collapse:collapse; width:400px; }
table.ex-3 th { border: 1px black solid; background-color:lightgray; }
table.ex-3 td { border: 1px black solid; }
table.center2 td:nth-of-type(2) { text-align:center; } /* 2列目のtd */
table.right3  td:nth-of-type(3) { text-align:right; }  /* 3列目のtd */
</style>
<table class="ex-3 center2 right3">
  <tr><th>ヘッダセル<th>ヘッダセル<th>ヘッダセル<th>ヘッダセル</tr>
  <tr><th>ヘッダセル<td>左寄せ<br>(デフォルト)<td>中央寄せ<td>右寄せ</tr>
  <tr><th>ヘッダセル<td>左寄せ<br>(デフォルト)<td>中央寄せ<td>右寄せ</tr>
</table>

ヘッダセルヘッダセルヘッダセルヘッダセル
ヘッダセル左寄せ
(デフォルト)
中央寄せ右寄せ
ヘッダセル左寄せ
(デフォルト)
中央寄せ右寄せ


例 (JavaScript 参照)

<style>
table.ex-4 { border-collapse:collapse; }
table.ex-4 th { border: 1px black solid; }
table.ex-4 td { border: 1px black solid; }
</style>
<table id="exjs" class="ex-4">
  <tr><th>セル要素<th>A<th>B</tr>
  <tr><td>なし<td style="background-color:cyan"><td></tr>
  <tr><td>A<td>●<td></tr>
  <tr><td>B<td><td>●</tr>
  <tr><td>A + B<td>●<td>●</tr>
</table><br>

<fieldset style="display:inline-block">
  <legend>行の表示 / 非表示</legend>
  <label><input name="filter" type="radio" onchange="changeFilter(-1);" checked>全て</label>
  <label><input name="filter" type="radio" onchange="changeFilter(1);"> A </label>
  <label><input name="filter" type="radio" onchange="changeFilter(2);"> B </label>
</fieldset>

<fieldset style="display:inline-block">
  <legend>セル要素スタイル</legend>
  行:<select id="targetRow"><option>2<option>3<option>4<option>5</select>
  列:<select id="targetCol"><option>2<option>3</select>
  <button type="button" onclick="changeBack();">セル要素背景 変更</button>
</fieldset>

<button type="button" onclick="changeData();">セル要素参照:セル要素 変更</button>
<br>

<script>
/**
 * チェック列のセル要素に内容がある行のみ表示
 * @param {number} col チェック列 (0~)
 */
function changeFilter(col) {
  var table = document.getElementById("exjs"); // 表要素 取得
  var rows = table.rows; // 行数取得
  var hidden;
  for (var row = 1; row < rows.length; row++) { // 2行目から
    if (0 <= col) {
      if (rows[row].cells[col].innerHTML != "") { // セル要素の内容チェック
        hidden = false; // 対象行 表示
      }
      else {
        hidden = true; // 対象行 非表示
      }
    }
    else {
      hidden = false; // 全て表示
    }
    rows[row].hidden = hidden; // 行 表示 / 非表示
  }
}

/**
 * 2行目以降の2列目と3列目のセル要素変更
 */
function changeData() {
  var table = document.getElementById("exjs"); // 表要素 取得
  var rows = table.rows; // 行数取得
  for (var row = 1; row < rows.length; row++) { // 2行目から
    for (var col = 1; col <= 2; col++) { // 2列目と3列目
      var cell = rows[row].cells[col];
      var data = cell.innerHTML; // セル要素の内容 取得
      if (data != "") {
        if (data == "●") {
          data = "○";
        }
        else {
          data = "●";
        }
        cell.innerHTML = data; // セル要素の内容 設定
      }
    }
  }
}

/**
 * 指定行・列のセル要素の背景色 変更
 */
function changeBack() {
  var table = document.getElementById("exjs"); // 表要素 取得
  var row = document.getElementById("targetRow").value; // 指定行 取得
  var col = document.getElementById("targetCol").value; // 指定列 取得
  var cell = table.rows[row - 1].cells[col - 1];
  var backColor = cell.style.backgroundColor;
  if (backColor == "") {
    backColor = "cyan";
  }
  else {
    backColor = "";
  }
  cell.style.backgroundColor = backColor;
}
</script>

セル要素AB
なし
A
B
A + B

行の表示 / 非表示
セル要素スタイル行: 列:


CSS (一部)

スタイルスタイル定義備考
表の幅width【要素の幅】
表の高さheight【要素の高さ】
文字色color【テキスト色】 カラー定義
背景色background-colorカラー定義
枠線の幅・線種・色 (一括) border【境界線】 個別指定:border-○○
枠線の幅 (一括)border-width【境界線の幅】 個別指定:border-○○-width
枠線の線種 (一括)border-style【境界線のスタイル】 個別指定:border-○○-style
枠線の色 (一括)border-color【境界線の色】 個別指定:border-○○-color
セル枠線の共有 border-collapse【テーブル境界線の共有】
セル枠線の間隔border-spacing【テーブル境界線の間隔】 セル枠線の間隔がある( border-collapse【テーブル境界線の共有】:separate)場合
指定行列のスタイル:nth-child(【子要素番号 (1~)】)
奇数・偶数行列のスタイル:nth-child(odd(奇数) | even(偶数))
指定行列毎のスタイル :nth-child(an + b)a:反復単位数 / b:オフセット
空データセルのスタイルtd:empty【空要素】
表全体のスクロール <div>【ブロック要素】
width・height・overflow・overflow-x・overflow-y
表全体を<div>で囲み、
スクロール方向に合わせ幅・高さを固定、
スクロール方法を指定
表の
<thead>【表のヘッダグループ】
<tfoot>【表のフッタグループ】
を固定し、
<tbody>【表のボディグループ】
を縦スクロール
<thead>と<tfoot>のdisplay:block
<tbody>のdisplay:block・overflow-y:scroll
各クループ毎にセル
(<th>【表のヘッダセル】<td>【表のデータセル】)
の列幅をwidthで指定
 (<col>【表の列属性】での指定は不可)

関連要素

外部リンク


構文

<table必須開始タグ
align=left | center | right表の配置 代替:スタイルシート(float)
bgcolor=【背景色】背景色 代替:スタイルシート(background-color)
border=""(外枠なし) | "1"(外枠あり)
外枠の有無 (多くは、旧来通り太さをサポート)
cellpadding=【セル内の余白 (ピクセル単位)】セル内の余白
cellspacing=【セルの間隔 (ピクセル単位)】セルの間隔
frame=【外枠の表示】外枠の表示
rules=【内部罫線の表示】内部罫線の表示
summary=【要約】要約 (非視覚系用:音声・点字 等)
width=【幅】幅 代替:スタイルシート(width)

【グローバル属性】

accesskey=【アクセスキー (複数:半角スペース区切り )】アクセスキー
autocapitalize=【変換方法】自動大文字化
"characters"全て大文字
"on"
"sentences"
各文の最初を大文字
"off"
"none"
変換なし
"words"各単語の最初を大文字
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]キーのアクション ヒント (対応するラベル・アイコン等を表示)
"done"入力完了
"enter"改行挿入
"go"ターゲット移動
"next"次フィールド移動
"previous"前フィールド移動
"search"検索結果移動
"send"送信
hidden非表示
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定義の同名個別属性も参照
"decimal"小数数値入力 (フォーマット区切り文字表示)
"email"Eメールアドレス入力 (補助入力:'@'・'.' 等)
"none"未指定
"numeric"数値入力
"search"検索入力
"tel"電話番号入力 ('0'〜'9'・'#'・'*'・ロケールにより対応アルファベット)
"text"テキスト入力
"url"URL入力 (補助入力:'/'・'.'・'www.'・'.com' 等)
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 (翻訳対象外)翻訳可否
>

【以下の順に定義】
<caption>【表の見出し】 (0 または 1個)
<colgroup>【表の列グループ化】 (0個 以上)
<thead>【表のヘッダグループ】 (0 または 1個)
<tfoot>【表のフッタグループ】 (0 または 1個 先読みの為)
<tbody>【表のボディグループ】 (0個 以上) または <tr>【表の行定義】 (1個 以上)
<tfoot> (0 または 1個) 但し、合計で1個
<script>【スクリプト】<template>【テンプレート】 (0個 以上)

</table>必須終了タグ

DOMインタフェース (HTMLTableElement : HTMLElement)

interface HTMLTableElement : HTMLElement

interface HTMLElement : Element
HTMLElement includes GlobalEventHandlers
HTMLElement includes DocumentAndElementEventHandlers
HTMLElement includes ElementContentEditable
HTMLElement includes HTMLOrSVGElement

interface Element : Node
Element includes ParentNode
Element includes NonDocumentTypeChildNode
Element includes ChildNode
Element includes Slottable

HTMLTableElement
interface HTMLTableElement : HTMLElement

DOMStringborder外枠の有無
HTMLTableCaptionElement?caption <caption>【表の見出し】エレメント
HTMLCollectionrows <tr>【表の行定義】エレメント コレクション
HTMLCollectiontBodies <tbody>【表のボディグループ】エレメント コレクション
HTMLTableSectionElement?tFoot <tfoot>【表のフッタグループ】エレメント
HTMLTableSectionElement?tHead <thead>【表のヘッダグループ】エレメント
HTMLTableCaptionElement createCaption()<caption>【表の見出し】エレメント 作成
HTMLTableSectionElement createTBody()<tbody>【表のボディグループ】エレメント 作成
HTMLTableSectionElement createTFoot()<tfoot>【表のフッタグループ】エレメント 作成
HTMLTableSectionElement createTHead()<thead>【表のヘッダグループ】エレメント 作成
undefined deleteCaption()<caption>【表の見出し】削除
undefined deleteRow(long index)行削除
undefined deleteTFoot()<tfoot>【表のフッタグループ】削除
undefined deleteTHead()<thead>【表のヘッダグループ】削除
HTMLTableRowElement insertRow(optional long index = -1)行挿入

HTMLElement
interface HTMLElement : Element
HTMLElement includes ElementContentEditable
HTMLElement includes HTMLOrSVGElement
HTMLElement includes GlobalEventHandlers
HTMLElement includes DocumentAndElementEventHandlers
HTMLElement includes ElementCSSInlineStyleCSSOM

DOMStringaccessKeyアクセスキー
DOMStringautocapitalize自動大文字化
DOMStringaccessKeyLabelアクセスキー表現文字列
DOMStringcontentEditable編集可能状態 ("true":編集可能 / "false":編集不可 / "inherit":親要素継承) ( ElementContentEditable に移動 )
DOMStringMapdatasetカスタムデータ属性 (data-*) マップ ( HTMLOrSVGElement に移動 )
DOMStringdir文字表記方向 ("ltr":左から右 / "rtl":右から左)
booleandraggableドラッグ可否
[PutForwards=value] DOMTokenListdropzoneドロップデータの扱い
booleanhidden非表示状態
[LegacyNullToEmptyString]DOMStringinnerText要素内容 (テキスト形式)
booleanisContentEditable編集可否 ( ElementContentEditable に移動 )
DOMStringlang言語コード
[LegacyNullToEmptyString]DOMStringouterTextタグを含む要素内容 (テキスト形式)
booleanspellcheckスペルチェック有無
longtabIndexタブインデックス ( HTMLOrSVGElement に移動 )
DOMStringtitle説明
booleantranslate翻訳可否
ElementInternals attachInternals()
undefined blur()フォーカス喪失 操作 ( HTMLOrSVGElement に移動 )
undefined click()クリック 操作
undefined focus()フォーカス設定 操作 ( HTMLOrSVGElement に移動 )
undefined forceSpellCheck()スペルチェック

ElementContentEditable
interface mixin ElementContentEditable

DOMStringcontentEditable編集可能状態
DOMStringenterKeyHint[Enter]キーのアクション ヒント
DOMStringinputMode入力モード
booleanisContentEditable編集可否

HTMLOrSVGElement
interface mixin HTMLOrSVGElement

booleanautofocusページロード時、自動フォーカス
DOMStringMapdatasetカスタムデータ属性 (data-*) マップ
DOMStringnonceワンタイム トークン
longtabIndexタブインデックス
undefined focus(optional FocusOptions options = {})フォーカス設定 操作
undefined blur()フォーカス喪失 操作

GlobalEventHandlers
interface mixin GlobalEventHandlers

EventHandleron~各種イベントハンドラ (onclick・onfocus 等)

DocumentAndElementEventHandlers
interface mixin DocumentAndElementEventHandlers

EventHandleroncopyコピー イベントハンドラ
EventHandleroncutカット イベントハンドラ
EventHandleronpasteペースト イベントハンドラ

ElementCSSInlineStyle【CSSOM定義】
interface mixin ElementCSSInlineStyle

CSSStyleDeclarationstyleスタイル

CSSStyleDeclaration
interface CSSStyleDeclaration

DOMStringstyle.~スタイル属性 (CSS2Properties)
(例:style.color・style.backgroundColor)

Element
interface Element : Node
Element includes ParentNode
Element includes NonDocumentTypeChildNode
Element includes ChildNode
Element includes Slottable

[SameObject] NamedNodeMapattributes関連属性 マップ
[SameObject] DOMTokenListclassListクラス名 リスト
DOMStringclassNameクラス名
DOMStringidid (ページ内で一意:name【コントロール(送信)名】を含む)
(DOMStringinnerHTML)要素内容 (HTML形式)〔 DOM Parsing and Serialization 定義 〕
DOMStringlocalNameローカル名
DOMString?namespaceURIネームスペースURI
(DOMStringouterHTML)タグを含む要素内容 (HTML形式)〔 DOM Parsing and Serialization 定義 〕
DOMString?prefixプレフィックス
DOMStringtagNameタグ名
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
interface mixin ParentNode

unsigned longchildElementCount子エレメントの数
[SameObject] HTMLCollectionchildren子エレメント コレクション
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
interface mixin ChildNode

undefined after((Node or DOMString)... nodes)
undefined before((Node or DOMString)... nodes)
undefined remove()削除
undefined replaceWith((Node or DOMString)... nodes)

NonDocumentTypeChildNode
interface mixin NonDocumentTypeChildNode

Element?previousElementSibling前の兄弟エレメント
Element?nextElementSibling次の兄弟エレメント

Slottable
interface mixin Slottable

HTMLSlotElement?assignedSlot

Node
interface Node : EventTarget

USVStringbaseURIベースURI
[SameObject] NodeListchildNodes子ノード リスト
Node?firstChild先頭子ノード
booleanisConnected
Node?lastChild最終子ノード
Node?nextSibling次の兄弟ノード
DOMStringnodeNameノード名
unsigned shortnodeTypeノードタイプ
(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.innerHTMLElement.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
interface 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 = {})