<table>【表 (Table)】

目次: 概要 構文 DOMインタフェース

概要

メモ

【標準】
<table border="1" style="width: 400px; height: 100px">
  <caption>表の見出し</caption>
  <tr><th>ヘッダセル<th>ヘッダセル</tr>
  <tr><th>ヘッダセル<td>データセル</tr>
</table>

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

【枠の指定】
<style>
.ex { border-collapse: collapse; }
.ex th { border: 2px red solid; background-color: lightgray; }
.ex td { border: 2px blue solid; }
</style>

<table class="ex">
  <caption>表の見出し</caption>
  <tr><th>ヘッダセル<th>ヘッダセル<th>ヘッダセル</tr>
  <tr><th>ヘッダセル<td>データセル<td>データセル</tr>
  <tr><th>ヘッダセル<td>データセル<td>データセル</tr>
</table>

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

【列毎のテキスト配置】
<style>
.ex2 { border-collapse: collapse; width: 450px; }
.ex2 th { background-color: lightgray; }
table.center1 td:nth-of-type(1) { text-align: center; } /* 1つ目のtd */
table.right2  td:nth-of-type(2) { text-align: right; }  /* 2つ目のtd */
</style>

<table border="1" class="ex2 center1 right2">
  <tr><th>ヘッダセル<th>ヘッダセル<th>ヘッダセル</tr>
  <tr><th>ヘッダセル<td>中央寄せ<td>右寄せ</tr>
  <tr><th>ヘッダセル<td>中央寄せ<td>右寄せ</tr>
</table>

ヘッダセルヘッダセルヘッダセル
ヘッダセル中央寄せ右寄せ
ヘッダセル中央寄せ右寄せ

【JavaScript 参照】
<table id="exjs" border="1" style="border-collapse:collapse;">
<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>

<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=【アクセスキー (複数:半角スペース区切り)】アクセスキー
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 (ドロップデータのリンク)
ドロップデータの扱い
hidden非表示
id=【id】id (ドキュメント中で一意 name【コントロール名 (送信データ名)】を含む)
(<a>【ハイパーリンク】のリンク先・CSS対象(#~)・スクリプト参照)
is=【定義名】定義名
itemid=【URL】アイテムのグローバル識別子
itemprop=【アイテムのプロパティ (複数:半角スペース区切り)】 アイテムのプロパティ
itemref=【要素IDのリスト】アイテムの参照リスト
itemscopeアイテムのプロパティ宣言
itemtype=【アイテムの型 (複数:半角スペース区切り)】アイテムの型
lang=【言語コード】言語コード (【主コード】-【副コード】 例:"ja":日本語 / "en":英語 / "en-US":アメリカ英語)
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 { W3C:interface HTMLTableElement (英語)

【プロパティ】

HTMLTableElement プロパティ】

border;外枠の有無
attribute HTMLTableCaptionElement?caption;<caption>【表の見出し】エレメント
attribute HTMLCollectionrows;<tr>【表の行定義】エレメント コレクション
attribute HTMLCollectiontBodies;<tbody>【表のボディグループ】エレメント コレクション
attribute HTMLTableSectionElement?tFoot;<tfoot>【表のフッタグループ】エレメント
attribute HTMLTableSectionElement?tHead;<thead>【表のヘッダグループ】エレメント

HTMLElement プロパティ】W3C:interface HTMLElement (英語) HTML 5.1HTML 5.2WHATWG

accessKey;アクセスキー
accessKeyLabel;アクセスキー表現文字列
contentEditable;編集可能状態 ("true":編集可能 / "false":編集不可 / "inherit":親要素継承)
Mapdataset;カスタムデータ属性 (data-*) マップ
dir;文字表記方向 ("ltr":左から右 / "rtl":右から左)
draggable;ドラッグ可否
[PutForwards=value] attribute DOMTokenListdropzone;ドロップデータの扱い
hidden;非表示状態
[TreatNullAs=EmptyString]innerText;内容 (テキスト形式)
isContentEditable;編集可否
lang;言語コード
spellcheck;スペルチェック有無
attribute longtabIndex;タブインデックス
title;説明
translate;翻訳可否

ElementCSSInlineStyle プロパティ】 HTMLElement implements ElementCSSInlineStyle; W3C:interface ElementCSSInlineStyle (英語)

attribute CSSStyleDeclarationstyle;スタイル

CSSStyleDeclaration プロパティ】 (仕様上、次と同等: CSSStyleDeclaration implements CSS2Properties) W3C:Interface CSS2Properties (英語)

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

Element プロパティ】interface HTMLElement : Element W3C:Interface Element (英語) HTML 5.1HTML 5.2WHATWG

[SameObject] attribute NamedNodeMapattributes;関連属性 マップ
[SameObject] attribute DOMTokenListclassList;クラス名 リスト
className;クラス名
id;id (ページ内で一意:name【コントロール(送信)名】を含む)
(innerHTML;)内容 (HTML形式) W3C:未定義 (参照:Element.outerHTMLNode.textContent (innerText))
localName;ローカル名
?namespaceURI;ネームスペースURI
(outerHTML;)タグを含む内容 (HTML形式) W3C:未定義 (参照:Element.innerHTMLNode.textContent (innerText))
?prefix;プリフィックス
tagName;タグ名

Node プロパティ】 interface Element : Node W3C:Interface Node (英語) HTML 5.1HTML 5.2WHATWG

?baseURI;ベースURI
[SameObject] childNodes;子ノード リスト
?firstChild;先頭子ノード
?lastChild;最終子ノード
?nextSibling;次の兄弟ノード
nodeName;ノード名
attribute 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)
?nodeValue;ノード値
?ownerDocument;オーナードキュメント
?parentElement;親エレメント
?parentNode;親ノード
?previousSibling;前の兄弟ノード
?textContent;
(IE:innerText)
内容 (Text形式) (参照:Element.innerHTMLElement.outerHTML)
取得:要素内のHTMLタグを除外しテキストのみ
設定:HTMLタグはテキスト変換

GlobalEventHandlers プロパティ (一部) 】 HTMLElement implements GlobalEventHandlers; W3C:interface GlobalEventHandlers (英語) HTML 5.1HTML 5.2WHATWG

attribute EventHandler onabort;on~;イベントハンドラ (例:onclick・onfocus)

ParentNode プロパティ】Element implements ParentNode; W3C:Interface ParentNode (英語)

attribute unsigned longchildElementCount;子エレメントの数
[SameObject] attribute HTMLCollectionchildren;子エレメント コレクション
?firstElementChild;最初の子エレメント
?lastElementChild;最後の子エレメント

NonDocumentTypeChildNode プロパティ】Element implements NonDocumentTypeChildNode; W3C:Interface NonDocumentTypeChildNode (英語)

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

【メソッド】

HTMLTableElement メソッド】

HTMLElement createCaption();<caption>【表の見出し】エレメント 作成
HTMLElement createTBody();<tbody>【表のボディグループ】エレメント 作成
HTMLElement createTFoot();<tfoot>【表のフッタグループ】エレメント 作成
HTMLElement createTHead();<thead>【表のヘッダグループ】エレメント 作成
void deleteCaption();<caption>【表の見出し】削除
void deleteRow(long index);行削除
void deleteTFoot();<tfoot>【表のフッタグループ】削除
void deleteTHead();<thead>【表のヘッダグループ】削除
HTMLElement insertRow(optional long index = -1);行挿入

HTMLElement メソッド】W3C:interface HTMLElement (英語) HTML 5.1HTML 5.2WHATWG

void click();クリック 操作
void focus();フォーカス設定 操作
void forceSpellCheck();スペルチェック
void blur();フォーカス喪失 操作

Element メソッド】interface HTMLElement : Element W3C:Interface Element (英語)

? getAttribute( name);属性取得
? getAttributeNS(? namespace, localName);属性取得 (ネームスペース指定)
HTMLCollection getElementsByClassName( classNames);エレメント コレクション取得 (クラス名指定)
HTMLCollection getElementsByTagName( localName);エレメント コレクション取得 (タグ名指定)
HTMLCollection getElementsByTagNameNS(? namespace, localName);エレメント コレクション取得 (ネームスペース・タグ名指定)
boolean hasAttribute( name);属性チェック
boolean hasAttributeNS(? namespace, localName);属性チェック (ネームスペース指定)
void removeAttribute( name);属性削除
void removeAttributeNS(? namespace, localName);属性削除 (ネームスペース指定)
void setAttribute( name, value);属性設定
void setAttributeNS(? namespace, name, value);属性設定 (ネームスペース指定)

Node メソッド】 interface Element : Node W3C:Interface Node (英語)

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);指定子孫ノードの存在有無
boolean hasChildNodes();子ノードの存在有無
Node insertBefore(Node node, Node? child);指定ノード前挿入
boolean isDefaultNamespace(? namespace);デフォルトネームスペース チェック
boolean isEqualNode(Node? node);同一ノードチェック
? lookupNamespaceURI(? prefix);ネームスペースURI調査
? lookupPrefix(? namespace);ネームスペース プリフィックス調査
void normalize();標準化
Node removeChild(Node child);子ノード削除
Node replaceChild(Node node, Node child);子ノード置換

ParentNode メソッド】Element implements ParentNode; W3C:Interface ParentNode (英語)

Element? querySelector( selectors);指定セレクタ先頭エレメント取得
[NewObject] NodeList querySelectorAll( selectors);指定セレクタ ノードリスト取得

ChildNode メソッド】Element implements ChildNode; W3C:Interface ChildNode (英語)

void remove();削除
};