| 項 目 | 説 明 |
|---|---|
| 記述形式 | <table>～</table> |
| 対応ブラウザー | H3+ / e2+ / N2+ / Fx1+ / Op6+ / Ch1+ / Sa1+ |
| 種 類 （カテゴリー） |
フロー・コンテンツ，パルパブル・コンテンツ |
| 置ける場所 | フロー・コンテンツが記入できる場所 |
| 内包要素 （コンテンツ・モデル） |
次の順で各要素を入れる ① １個（任意）の caption要素 ② ０個以上の colgroup要素 ③ １個（任意）の thead要素 ④ １個（任意）の tfoot要素 ⑤ ０個以上の tbody要素， または，１個以上の tr要素 ⑥ １個（任意）の tfoot要素 ［ただし，tfoot要素は table要素内で１つのみ］ （コンテンツ・モデル: 直接指定） |
基本的な表（テーブル）は，table要素，caption要素，tr要素，th要素，td要素の５つで作成できます。
上の表に示す通り，これら以外に colgroup要素，thead要素，tfoot要素，tbody要素を用いることで，大きな表をいくつかの部分に分けてそれぞれ役割を特定する，より一般的な形式で記述することが出来ます。
HTMLで表（テーブル）を作る場合，セルの割付や各セルの内容をすべてこれらの要素を使って書くことになります。 したがって，どうしても記述が複雑で込み入ったものになりがちです。 表（テーブル）部分の記述では，インデント（字下げ）や改行を効果的に用いたソースの記述をして判読性をよくすることを心がけてください。
table要素内で使用される表（テーブル）を構成する要素をまとめると以下のようになります。
| 要素名 | 用 途 |
|---|---|
| caption要素 | 表題を記入します。 既定では，表の上に表示されます。 |
| tr要素 | 行になる要素です。 |
| th要素 | 見出し項目となるセルを記述する要素です。 tr要素の子要素になります。 |
| td要素 | 各セルを記述する要素です。 tr要素の子要素になります。 |
| colgroup要素 | カラム（列）のグループを指定して種々の指定の対象範囲を定めます。 |
| thead要素 | ヘッダ（見出し）部分の行のグループを指定します。 |
| tfoot要素 | フッタ（まとめ）部分の行のグループを指定します。 |
| tbody要素 | 本体部分の行のグループを指定します。 |
HTML4.01 までは，tfoot要素は tbody要素よりも前に記述する必要がありました。 しかし，HTML5 では，tbody要素の後に記述することも認められています。
なお，HTML5 では，要素の配置やレイアウトの目的のために表（テーブル）を使用することはできません。 レイアウトには，CSS を使いましょう。
| 種 類 | 名 称 |
|---|---|
| 【固有属性】 | border |
| 【グローバル属性】 | accesskey，class，contenteditable *，
dir， hidden *，id， lang，spellcheck *，style， tabindex，title，translate * |
| 【ARIA role属性】 で 指定可能な値 （役割） |
任意の値 （役割） |
| 【ARIA aria-* 属性】 で 指定可能なもの |
ARIA グローバル状態とプロパティ， 指定可能な役割の任意の状態とプロパティ |
HTML5 では，summary，align，bgcolor，cellpadding，cellspacing，frame，rules，width など多くの属性が廃止になりましたので注意が必要です。
ただし，CSS では，text-alignプロパティ，background-colorプロパティ，paddingプロパティ，marginプロパティ，borderプロパティ，widthプロパティ などを用いることによって，これらの廃止された属性のほとんどのものよりさらに高機能な指定が可能です。
| 種 類 | 名 称 |
|---|---|
| 【よく使うもの】 |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
table, th, td { border: solid 1px #080808; }
-->
</style> |
| HTML <body> ～ </body> |
<table> <caption>【テーブルの例１】</caption> <tr> <th><br></th><th>列-A</th><th>列-B</th><th>列-C</th> </tr> <tr> <td>行-1</td><td>A1</td><td>B1</td><td rowspan="2">C1-C2</td> </tr> <tr> <td>行-2</td><td>A2</td><td>B2</td> </tr> <tr> <td>行-3</td><td>A3</td><td colspan="2">B3-C3</td> </tr> </table> |
| ブラウザー 表示例 | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
table, th, td { border: solid 1px #080808; }
-->
</style> |
| HTML <body> ～ </body> |
<table>
<caption>【テーブルの例２】</caption>
<colgroup span="1" style="width:100px; text-align: center;
background-color: #CCCCCC;">
<colgroup span="3" style="width:60px; text-align: right;">
<thead style="background-color: #CCCCCC;">
<tr>
<th rowspan="2">品名</th><th colspan="3">見積金額</th>
</tr>
<tr>
<th>単価</th><th>数量</th><th>価格</th>
</tr>
</thead>
<tfoot>
<tr>
<th>小計</th><td><br></td><td><br></td><td>5,600</td>
</tr>
<tr>
<th>総計</th><td><br></td><td><br></td><td>5,600</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>ぬいぐるみ</td><td>3,200</td><td>1</td><td>3,200</td>
</tr>
<tr>
<td>チョコレート</td><td>800</td><td>3</td><td>2,400</td>
</tr>
</tbody>
</table> |
| ブラウザー 表示例 | |||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||