表 table
その範囲が表であることを示す要素です。
表のタイトルやセルなどの表を構成する要素は、すべてこの要素内に配置されます。
基本的な構造は、tr要素が表の横1列(1行)をあらわし、その中の各セルはth要素、またはtd要素で示します。
属性
summary="概要"
表の構造や意味などの概要を記述します。
この概要は、視覚的な表現ができない環境(音声や点字)で利用されます。
width="幅"
表全体の横幅を「 ピクセル 」または「 % 」で指定します。
border="外枠の太さ"
表全体を囲う外枠の太さを「 ピクセル 」または「 % 」で指定します。
frame="外側の表示形式"
表全体を囲う外枠のうち、上下左右のどの枠を表示させるかを指定します。
外側の表示形式
- void 外枠なし(初期値)
- above 上のみ
- below 下のみ
- hsides 上下のみ
- lhs 左のみ
- rhs 右のみ
- vsides 左右のみ
- box 上下左右
- border 上下左右
rules="セルを区切る線の表示形式"
表の中のセルを区切る線のうち、どの線を表示するかを指定します。
セルを区切る線の表示形式
- none 線無し(初期値)
- groups thead要素・tbody要素・tfoot要素・colgroup要素の境界
- rows 横列の境界
- cols 縦列の境界
- all すべての境界
cellspacing="セルの間隔"
表全体を囲う外側とセルの間隔を「 ピクセル 」または「 % 」で指定します。
cellpadding="セルのパディング"
セルの内容とセルの枠との間隔を「 ピクセル 」または「 % 」で指定します。
汎用属性
class、id、title、style、lang、dir、xml:lang
<table summary="二行二列の表のサンプル" width="200" border="1" cellpadding="1" cellspacing="1">
<caption>表の説明</caption>
<tbody>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
</tbody>
</table>
| セル1 | セル2 |
| セル3 | セル4 |
table要素内に子要素として配置することができる要素
この要素には下記の子要素を配置できます。
順番は
- cpation要素を必要に応じてひとつ配置します。
- col要素またはcolgroup要素のいずれか一方を必要に応じて必要なだけ配置します。
- thead要素を必要に応じてひとつ配置します。
- tfoot要素を必要に応じてひとつ配置します。
- tbody要素またはtr要素のいずれか一方をひとつ以上配置します。
その他の要素
- caption
- col
- colgroup
- tbody
- tfoot
- thead
- tr