table

提供: ASCII.jp HTMLリファレンス

ver.8~ ver.7~ ver.14~ ver.5.1~ ver.11.5~
意味
読み方 テーブル

カテゴリー

フロー・コンテンツ

親にできる要素/カテゴリー

フロー・コンテンツが期待される場所

子にできる要素/カテゴリー

以下の順番
  1. 1個のcaption要素(オプション)
  2. 0個以上のcolgroup要素
  3. 1個のthead要素(オプション)
  4. 1個のtfoot要素(オプション)
  5. 5.0個以上のtbody要素または1個以上のtr要素
  6. 1個のtfoot要素(オプション)
ただしtfoot要素は1つのtable要素につき1つだけ

<table 属性="値">~</table>

属性 概要
border 整数値 罫線を引くかどうか

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 table要素は、表の形をした1次元以上のデータを表示します。

 table要素をレイアウト用に使っていないことを明示するために、border属性が指定できます。border属性を指定するなら、その値は空文字列か「1」である必要があります。

 主要なWebブラウザーは標準で、「border="1"」のborder属性を指定すると、表のセルに罫線が引かれます。
※Internet Explorer、Firefox、Google Chrome、Safari、Opera


サンプル

(body要素の内部のみ掲載)

<table border="1">
<thead>
<tr><th>氏名</th><th>住所</th><th>電話番号</th></tr>
</thead>
<tbody>
<tr><td>山田 太郎</td><td>東京都新宿区若松町X-XX</td><td>03-1234-XXXX</td></tr>
<tr><td>鈴木 花子</td><td>神奈川県横浜市港北区菊名X-XX-XX</td><td>045-234-XXXX</td></tr>
<tr><td>高橋 和夫</td><td>埼玉県さいたま市浦和区駒場X-XX-XX</td><td>048-345-XXXX</td></tr>
</tbody>
</table>

サンプル実行画像

よくある間違い、勘違い

 table要素をレイアウトに使うべきではありません。スタイルシートのポジショニング関係の機能などを使うようにします。

 HTML4では、border属性は罫線の太さを表しました。一方、HTML5では罫線を引くかどうかだけを表し、罫線の太さは表しません。

Powered by Web Professional

目次