スポンサード リンク
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>
実際の表示
セル | セル |
セル | セル |