table要素

table要素 表を作る ブロック要素

table要素を使って表を作ることができます。テーブルタグを使えばたくさんの情報を整理して見やすくなります。
実際にtable要素を使うときはtr要素やtd要素といっしょに使います。tr要素は表の行をつくります。td要素はマス目（セル）をつくります。

内容にできる要素

tr要素 col要素 colgroup要素 caption要素（省略可能） thead要素（省略可能） tfoot要素（省略可能） tbody要素（省略可能）

<table>
<tr>
<td>文字</td>
</tr>
</table>

実際の表示

文字

指定できる属性

border属性

表の周りの枠線の太さを指定できます。値にはpxを表す整数(単位は要りません)
table要素に付けるこのborder属性は文法的にはframe="border" rules="all"の略です。

 border="1"

cellpadding属性

表のセルの枠線と文字の間隔を指定できます。値にはpxを表す整数かパーセンテージ

 cellpadding="3"

cellspacing属性

セル同士の間隔を指定できます。値にはpxを表す整数かパーセンテージ

  cellspacing="0"

frame属性

表の周りの枠線の表示方法を指定できます。値の初期値は voidで外枠線を表示しません。
border属性で値を1以上に指定している場合はframe="border"があるものとして表示されます。
値にはvoid 枠線を表示しない above 上端のみ表示 below 下端のみ表示 lhs 左端のみ表示 rhs 右端のみ表示 hsides 上端と下端のみ表示
vsides 左端と右端のみ表示 box 上下左右全て表示 border 上下左右全て表示

 frame="border"

rules属性

表の中にあるセルの枠線の表示方法を指定します。値の初期値は noneで外枠線を表示しません。
border属性で値を1以上に指定している場合はrules="all"があるものとして表示されます。
値にはnone 枠線を表示しない groups 列グループ・行グループの間のみ表示 rows 行の間のみ表示 cols 列の間のみ表示 all すべて表示

 rules="all"

width属性

表の横の長さを指定します。値にはpxをあらわす整数かパーセント。cssのwidthプロパティでも表の横幅を指定できます。

 width="200"

height属性

ブラウザの独自機能で表の高さを指定できます。値にはpxをあらわす整数かパーセント。cssのheightプロパティでも表の高さを指定できます。

 height="200"

summary属性

目の障害を持った人のための音声ブラウザーなどに対応するように用意された属性です。必須属性ではありませんが推奨はされています。
値にはテキストが記述できます。

 summary="テキスト"

cssでデザインを指定する場合

html

<table class="a">文字</table>

css

表の横方向の配置指定

左右に表を配置したい場合はfloatプロパティで指定します。floatを使う場合はwidth属性がwidthプロパティで横幅を指定してください。
値にはleft（左寄せ）、right（右寄せ）、none（左右の配置と回り込みをしない）

table.a { float: left; width: 200px; }

中央寄せはmarginプロパティで左右をautoで指定します。
IE6はmarginのautoがきかないので親要素を作ってtext-align: center;を指定すれば中央寄せできます。
table要素の内容にはtext-align: left;で左寄せになおします。
html

<div class="a">
<table class="a" border="1">
<tr><td>テーブルの中央寄せ、内容は左寄せ</td></tr>
</table>
</div>

css

div.a { text-align: center; }
table.a { margin-left: auto; margin-right: auto; text-align: left; }

表の背景色の指定

値には色を表す値を指定します。

table.a { background-color: #FFCC00; }

表の背景画像の指定

値には背景画像のurlを指定します。画像ファイルを指定（gif、png、jpg）

table.a { background-image: url('img.gif'); }

共通属性

指定できる共通属性

id属性 class属性 style属性 title属性 lang属性 dir属性

イベント属性

イベント属性