<table>【表 (Table)】
概要 構文 DOMインタフェース
概要
メモ
- 表の定義
- 入れ子可能
- セルの定義:<th>【表のヘッダセル】・<td>【表のデータセル】
- スクロールに関しては、下記 CSS 参照
- 非推奨:複雑なレイアウトの枠としても使用 (イントラネットの入力ページ 等)
- 枠の指定 (使用例 参照)
- セルの隙間:border-collapse【テーブル境界線の共有】スタイル (collapse【境界線を共有】・separate【境界線を分離】)
- 一括指定:表の border 属性 設定
- 個別指定:表 (外枠)・<th>【表のヘッダセル】・<td>【表のデータセル】 の各 border【境界線】スタイル 設定
- 列毎のテキスト配置:CSSの :nth-of-type(an+b)【an+b番目の該当子要素】疑似クラス (使用例 参照)
- JavaScript 参照 (使用例 参照)
- document.getElementById(~) (表要素)
【表要素】.rows (行コレクション)
【表要素】.rows.length (行数)
【表要素】.rows[【行 (0~)】] (行要素:<tr>【表の行定義】の HTMLTableRowElement)
【表要素】.rows[【行 (0~)】].cells (セル要素コレクション:<tr>【表の行定義】の cells)
【表要素】.rows[【行 (0~)】].cells[【列 (0~)】] (セル要素: <th>【表のヘッダセル】のHTMLTableHeaderCellElement ・<td>【表のデータセル】のHTMLTableDataCellElement)
【表要素】.rows[【行 (0~)】].cells[【列 (0~)】].innerHTML (セル要素の内容)
【表要素】.rows[【行 (0~)】].cells[【列 (0~)】].style.~ (セル要素のスタイル)
- document.getElementById(~) (表要素)
例
【標準】
<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>
セル要素 | A | B |
---|---|---|
なし | ||
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>【表の列属性】での指定は不可) |
関連要素
外部リンク
- HTML Living Standard (英語)
- W3C HTML 5.2 (英語)
- W3C HTML 5.1 2nd Edition (英語)
- W3C HTML5 (英語)
構文
<table | 必須 | 開始タグ | ||||||||||||||||
align=left | center | right | 表の配置 代替:スタイルシート(float) | |||||||||||||||||
bgcolor=【背景色】 | 背景色 代替:スタイルシート(background-color) | |||||||||||||||||
border=""(外枠なし) | "1"(外枠あり) | 外枠の有無 (多くは、旧来通り太さをサポート) | |||||||||||||||||
cellpadding=【セル内の余白 (ピクセル単位)】 | セル内の余白 | |||||||||||||||||
cellspacing=【セルの間隔 (ピクセル単位)】 | セルの間隔 | |||||||||||||||||
frame=【外枠の表示】 | 外枠の表示 | |||||||||||||||||
rules=【内部罫線の表示】 | 内部罫線の表示 | |||||||||||||||||
summary=【要約】 | 要約 (非視覚系用:音声・点字 等) | |||||||||||||||||
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 (翻訳対象外) | 翻訳可否 | |||||||||||||||||
> | ||||||||||||||||||
【以下の順に定義】 | ||||||||||||||||||
</table> | 必須 | 終了タグ |
DOMインタフェース (HTMLTableElement・HTMLElement)
interface HTMLTableElement : HTMLElement { | W3C:interface HTMLTableElement (英語) | ||
【プロパティ】 | |||
【HTMLTableElement プロパティ】 | |||
border; | 外枠の有無 | ||
attribute HTMLTableCaptionElement? | caption; | <caption>【表の見出し】エレメント | |
attribute HTMLCollection | rows; | <tr>【表の行定義】エレメント コレクション | |
attribute HTMLCollection | tBodies; | <tbody>【表のボディグループ】エレメント コレクション | |
attribute HTMLTableSectionElement? | tFoot; | <tfoot>【表のフッタグループ】エレメント | |
attribute HTMLTableSectionElement? | tHead; | <thead>【表のヘッダグループ】エレメント | |
【HTMLElement プロパティ】 | |||
accessKey; | アクセスキー | ||
accessKeyLabel; | アクセスキー表現文字列 | ||
contentEditable; | 編集可能状態 ("true":編集可能 / "false":編集不可 / "inherit":親要素継承) | ||
Map | dataset; | カスタムデータ属性 (data-*) マップ | |
dir; | 文字表記方向 ("ltr":左から右 / "rtl":右から左) | ||
draggable; | ドラッグ可否 | ||
[PutForwards=value] | attribute DOMTokenList | dropzone; | ドロップデータの扱い |
hidden; | 非表示状態 | ||
[TreatNullAs=EmptyString] | innerText; | 内容 (テキスト形式) | |
isContentEditable; | 編集可否 | ||
lang; | 言語コード | ||
spellcheck; | スペルチェック有無 | ||
attribute long | tabIndex; | タブインデックス | |
title; | 説明 | ||
translate; | 翻訳可否 | ||
【ElementCSSInlineStyle プロパティ】 | |||
attribute CSSStyleDeclaration | style; | スタイル | |
【CSSStyleDeclaration プロパティ】 (仕様上、次と同等: CSSStyleDeclaration implements CSS2Properties) | |||
style.~; | スタイル属性 (例:style.color・style.backgroundColor) | ||
【Element プロパティ】 | |||
[SameObject] | attribute NamedNodeMap | attributes; | 関連属性 マップ |
[SameObject] | attribute DOMTokenList | classList; | クラス名 リスト |
className; | クラス名 | ||
id; | id (ページ内で一意:name【コントロール(送信)名】を含む) | ||
( | innerHTML;) | 内容 (HTML形式) W3C:未定義 (参照:Element.outerHTML・Node.textContent (innerText)) | |
localName; | ローカル名 | ||
? | namespaceURI; | ネームスペースURI | |
( | outerHTML;) | タグを含む内容 (HTML形式) W3C:未定義 (参照:Element.innerHTML・Node.textContent (innerText)) | |
? | prefix; | プリフィックス | |
tagName; | タグ名 | ||
【Node プロパティ】 | |||
? | baseURI; | ベースURI | |
[SameObject] | childNodes; | 子ノード リスト | |
? | firstChild; | 先頭子ノード | |
? | lastChild; | 最終子ノード | |
? | nextSibling; | 次の兄弟ノード | |
nodeName; | ノード名 | ||
attribute 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) | |
? | nodeValue; | ノード値 | |
? | ownerDocument; | オーナードキュメント | |
? | parentElement; | 親エレメント | |
? | parentNode; | 親ノード | |
? | previousSibling; | 前の兄弟ノード | |
? | textContent; (IE:innerText) | 内容 (Text形式) (参照:Element.innerHTML・Element.outerHTML) 取得:要素内のHTMLタグを除外しテキストのみ 設定:HTMLタグはテキスト変換 | |
【GlobalEventHandlers プロパティ (一部) 】 | |||
attribute EventHandler onabort; | on~; | イベントハンドラ (例:onclick・onfocus) | |
【ParentNode プロパティ】 | |||
attribute unsigned long | childElementCount; | 子エレメントの数 | |
[SameObject] | attribute HTMLCollection | children; | 子エレメント コレクション |
? | firstElementChild; | 最初の子エレメント | |
? | lastElementChild; | 最後の子エレメント | |
【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 メソッド】 | |||
void click(); | クリック 操作 | ||
void focus(); | フォーカス設定 操作 | ||
void forceSpellCheck(); | スペルチェック | ||
void blur(); | フォーカス喪失 操作 | ||
【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 メソッド】 | |||
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? querySelector( selectors); | 指定セレクタ先頭エレメント取得 | ||
[NewObject] NodeList querySelectorAll( selectors); | 指定セレクタ ノードリスト取得 | ||
【ChildNode メソッド】 | |||
void remove(); | 削除 | ||
}; |