table要素

TOPページに戻る > html入門

スポンサード リンク

table要素

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

使い方(書式)

<table></table>

table要素

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
要素の種類 ブロック要素
内容となる要素 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でスタイルを指定





(C)2012 ホームページ作成無料