Apr. 15th,2015
＃
要素について
“table”要素は行と列によって構成される表の大枠を表す要素です。
表の内容自体は子孫要素となる“th”要素や“td”要素などによって表されます。また、これらの要素は“colgroup”要素と“col”要素、“thead”要素や“tbody”要素や“tfoot”要素でグループ化することができます。
サンプルコード
シンプルな表
<table>
<tr>
<th>会員番号</th>
<th>名前</th>
<th>住所</th>
</tr>
<tr>
<td>001</td>
<td>アザラシ</td>
<td>北極</td>
</tr>
<tr>
<td>002</td>
<td>ペンギン</td>
<td>南極</td>
</tr>
<tr>
<td>003</td>
<td>シャチ</td>
<td>太平洋</td>
</tr>
</table>
| 会員番号 | 名前 | 住所 |
|---|---|---|
| 001 | アザラシ | 北極 |
| 002 | ペンギン | 南極 |
| 003 | シャチ | 太平洋 |
セルをグループ化した表
<table>
<caption>四国地方の人口と面積</caption>
<colgroup>
<col style=" background-color: rgb(221,231,197);">
<col>
<col>
</colgroup>
<thead style=" background-color: rgb(218,193,171);">
<tr>
<th>県名</th>
<th>人口</th>
<th>面積(km<sup>2</sup>)</th>
</tr>
</thead>
<tbody>
<tr>
<th>徳島</th>
<td>723,096</td>
<td>4,146.75</td>
</tr>
<tr>
<th>香川</th>
<td>950,799</td>
<td>1,876.78</td>
</tr>
<tr>
<th>愛媛</th>
<td>1,330,122</td>
<td>5,676.16</td>
</tr>
<tr>
<th>高知</th>
<td>691,602</td>
<td>7,103.64</td>
</tr>
</tbody>
<tfoot style=" background-color: rgb(218,193,171);">
<tr>
<th>合計</th>
<td>3,695,619</td>
<td>18,803.33</td>
</tr>
</tfoot>
</table>
| 県名 | 人口 | 面積(km2) |
|---|---|---|
| 徳島 | 723,096 | 4,146.75 |
| 香川 | 950,799 | 1,876.78 |
| 愛媛 | 1,330,122 | 5,676.16 |
| 高知 | 691,602 | 7,103.64 |
| 合計 | 3,695,619 | 18,803.33 |
＃
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| なし | |||
| 任意属性 | |||
| グローバル属性 | |||
過去に定義されていた属性
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
sortable="" |
ソート可能な表を表す | sortable | ソート可能な表を表す |
| border="" |
外枠の太さ | 正の整数 | 外枠の太さのピクセル数 |
| summary="" |
表の内容の説明 | テキスト | 表の内容の説明 |
| width="" |
表の横幅 | 正の整数 | 横幅のピクセル数 |
| 正の整数% | 横幅の表示領域に対する割合 | ||
| frame="" |
外枠の表示方法 | void | 外枠を表示しない |
| above | 上のみ表示 | ||
| below | 下のみ表示 | ||
| hsides | 上下のみ表示 | ||
| vsides | 左右のみ表示 | ||
| lhs | 左のみ表示 | ||
| rhs | 右のみ表示 | ||
| box | すべての外枠を表示 | ||
| border | すべての外枠を表示 | ||
| rules="" |
内罫線の表示方法 | none | 内罫線を表示しない |
| groups | グループ間の罫線のみ表示 | ||
| rows | 横罫線のみ表示 | ||
| cols | 縦罫線のみ表示 | ||
| all | すべての罫線を表示 | ||
| cellspacing="" |
セルの間隔 | 正の整数 | セルの間隔のピクセル数 |
| 正の整数% | セルの間隔の表示領域に対する割合 | ||
| cellpadding="" |
セル内の余白 | 正の整数 | セル内の余白のピクセル数 |
| 正の整数% | セル内の余白の表示領域に対する割合 | ||
| align="" |
水平方向の位置 | left | 左寄せ |
| center | 中央 | ||
| right | 右寄せ | ||
| bgcolor="" |
表の背景色 | 色 | 表の背景色 |
＃
要素の内容
“table”要素の内容は以下を順番通りに配置します。
- 任意で“caption”要素
- 0個以上の“colgroup”要素
- 任意で“thead”要素
- 0個以上の“tbody”要素もしくは0個以上の“tr”要素
- 任意で“tfoot”要素
任意でスクリプト支援要素を混在させることができます。
＃
仕様書
“table”要素はHTML2.0の後に発行された“HTML Tables (RFC 1942)”から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
定義されている仕様書
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
| <table> |   |
|
|
|
|
DOMインターフェース
[Exposed=Window]
interface HTMLTableElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute HTMLTableCaptionElement? caption;
HTMLTableCaptionElement createCaption();
[CEReactions] undefined deleteCaption();
[CEReactions] attribute HTMLTableSectionElement? tHead;
HTMLTableSectionElement createTHead();
[CEReactions] undefined deleteTHead();
[CEReactions] attribute HTMLTableSectionElement? tFoot;
HTMLTableSectionElement createTFoot();
[CEReactions] undefined deleteTFoot();
[SameObject] readonly attribute HTMLCollection tBodies;
HTMLTableSectionElement createTBody();
[SameObject] readonly attribute HTMLCollection rows;
HTMLTableRowElement insertRow(optional long index = -1);
[CEReactions] undefined deleteRow(long index);
// also has obsolete members
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
table {
unicode-bidi: isolate;
display: table;
box-sizing: border-box;
border-collapse: separate;
text-ident: initial;
}
table[rules=none i],table[rules=groups i],table[rules=rows i],table[rules=cols i],table[rules=all i],table[rules=void i],table[rules=above i],table[rules=below i],table[rules=hsides i],table[rules=lhs i],table[rules=rhs i],table[rules=vsides i],table[rules=box i],table[rules=border i] {
border: black;
}
/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
table {
unicode-bidi: bidi-override;
}
