table要素

TOPページに戻る > html入門

table要素

table要素を使って表を作ることができます
表を使ってたくさんの情報を整理して見やすく表示します
table要素を使うときは行を作るtr要素やセルを作るtd要素といっしょに使います
内容になるcaption要素、col要素、colgroup要素、thead要素、tfoot要素、tbody要素は省略できます
指定できる属性はたくさんありますがスタイルはcssで指定したほうが望ましいです

使い方（書式）

<table></table>

table要素

対応ブラウザ
要素の種類	ブロック要素
内容となる要素	caption要素、col要素、colgroup要素、thead要素、tfoot要素、tbody要素、tr要素

属性	説明
border属性	表の周りの外枠の枠線の太さを指定します 値に1以上で枠線を表示、0で枠線なしになります
cellpadding属性	セルの枠線とセルの内容との間に余白を指定します 値はpxなどの単位か%
cellspacing属性	表のセル同士の間隔を指定します 値はpxなどの単位か%
frame属性	table要素の枠線の表示方法を指定します void 枠線を表示しない（初期値） above 上端の枠線のみ表示 below 下端の枠線のみ表示 lhs 左端の枠線のみ表示 rhs 右端の枠線のみ表示 hsides 上端と下端の枠線のみ表示 vsides 左端と右端の枠線のみ表示 box 周囲の枠線を表示 border 周囲の枠線を表示 ※枠線はcssの border-widthプロパティでも表示できます
rules属性	表のセルの枠線の表示方法を指定します。初期値はnoneです none 枠線を表示しない rows 行の間の枠線のみ表示 cols 列の間の枠線のみ表示 groups 列グループ、行グループの枠線のみ表示 all すべて表示
width属性	表全体の横幅を指定します cssのwidthプロパティでも指定できます
height属性	表全体の高さを指定します cssのheightプロパティでも指定できます
align属性	表の横の表示位置を指定できます。値にはleft、right、center 推奨されない属性なのでcssのmarginプロパティで指定してください
bgcolor属性	表の背景色を指定できます。色の値を使います 推奨されない属性です。cssのbackground-colorプロパティで指定して下さい
background属性	表の背景画像ファイルをurlで指定します ブラウザが独自に採用した属性です なるべくcssのbackground-imageプロパティで指定して下さい
共通属性	html共通属性
イベント属性	htmlイベント属性

実際の指定方法

html

<table>
 <tr>
 <td>セル</td>
 <td>セル</td>
 </tr>
 <tr>
 <td>セル</td>
 <td>セル</td>
 </tr>
</table>

実際の表示

セル	セル
セル	セル

その他のデザインはcssでスタイルを指定