HTML要素表形式のデータ
table
テーブルの定義
2009/8/26
table要素は、表を表します。
レイアウト目的で使用しないようにしてください。
table要素内には、tbody要素またはtr要素が、1回以上出現する必要があります。
table要素に「表題」を付ける場合は、caption要素を使用します。
その場合、caption要素は、table要素内に1回のみ出現することができます。
行をグループ化する場合は、col要素またはcolgroup要素のいずれかを使用します。
その場合、これらの要素は、table要素内に0回または任意回数出現することができます。
表のヘッダー、フッターを定義する場合は、thead要素、tfoot要素を使用します。
その場合、これらの要素は、table要素内に0回または1回出現することができます。
属性
HTML5では、HTML4.01にあった固有の属性(align/bgcolor/border/cellpadding/cellspacing/frame/rules/summary/width)がすべてが廃止されました。
そのため、テーブルの枠線や背景色の指定などの装飾はすべてCSSで行ってください。
属性 | 値 | 説明 |
---|---|---|
グローバル属性 | - | 全要素共通の属性。 |
サンプル
<table> <caption>表題</caption> <tr><th>列A</th><th>列B</th><th>列C</th></tr> <tr><td>行A-1</td><td>行B-1</td><td>行C-1</td></tr> <tr><td>行A-2</td><td>行B-2</td><td>行C-2</td></tr> <tr><td>行A-3</td><td>行B-3</td><td>行C-3</td></tr> </table>
colgroup
表の行を構造的にグループ化
2009/8/26
colgroup要素は、非構造的な行グループを表します。
colgroup要素内には、col要素を0回または任意回数出現することができます。
この要素はtable要素内でのみ有効です。
属性
HTML4.01にあったalign/char/charoff/valign/width属性は廃止されました。
HTML5ではspan属性のみサポートされています。
属性 | 値 | 説明 |
---|---|---|
グローバル属性 | - | 全要素共通の属性。 |
span | 数値 | グループ化する列数を指定。省略した場合は、デフォルト値の「1」(1列)が適用されます。 |
サンプル
<div class="tbl"> <table> <colgroup span="2" style="background-color:#ffffcc" /></colgroup> <thead> <tr> <th>製品名</th> <th>価格</th> </tr> </thead> <tfoot> <tr> <th>合計金額</th> <th>983,000円</th> </tr> </tfoot> <tbody> <tr> <td>Creative Suite3 Web Premium</td> <td>226,000円</td> </tr> <tr> <td>Creative Suite 3 Design Premium</td> <td>298,000円</td> </tr> <tr> <td>Creative Suite3 Design Standard</td> <td>198,000円</td> </tr> <tr> <td>Creative Suite 3 Production Premium</td> <td>261,000円</td> </tr> </tbody> </table> </div>
製品名 | 価格 |
---|---|
合計金額 | 983,000円 |
Creative Suite3 Web Premium | 226,000円 |
Creative Suite 3 Design Premium | 298,000円 |
Creative Suite3 Design Standard | 198,000円 |
Creative Suite 3 Production Premium | 261,000円 |
col
表の行を非効率的にグループ化
2009/8/26
col要素は、構造的な行グループを表します。
この要素はtable要素内またはcolgroup要素内でのみ有効です。
col要素は空要素で、閉じタグはありません。
カラムを作成するためには、tr要素内にtd要素を指定する必要があります。
この要素は、1つ以上のテーブルのカラムに異なる属性値を指定する場合に使用します。
カラムのグループに同じ属性値を指定する場合は、colgroup要素を使用してください。
属性
HTML4.01にあったalign/char/charoff/valign/width属性は廃止されました。
HTML5ではspan属性のみサポートされています。
属性 | 値 | 説明 |
---|---|---|
グローバル属性 | - | 全要素共通の属性。 |
span | 数値 | グループ化する列数を指定。省略した場合は、デフォルト値の「1」(1列)が適用されます。 |
サンプル
<div class="tbl"> <table> <colgroup span="2"> <col span="1" width="200" style="background-color:#ffffcc" /> <col span="1" width="250" style="background-color: #ffccff" /> </colgroup> <thead> <tr> <th>製品名</th> <th>価格</th> </tr> </thead> <tfoot> <tr> <th>合計金額</th> <th>983,000円</th> </tr> </tfoot> <tbody> <tr> <td>Creative Suite3 Web Premium</td> <td>226,000円</td> </tr> <tr> <td>Creative Suite 3 Design Premium</td> <td>298,000円</td> </tr> <tr> <td>Creative Suite3 Design Standard</td> <td>198,000円</td> </tr> <tr> <td>Creative Suite 3 Production Premium</td> <td>261,000円</td> </tr> </tbody> </table> </div>
製品名 | 価格 |
---|---|
合計金額 | 983,000円 |
Creative Suite3 Web Premium | 226,000円 |
Creative Suite 3 Design Premium | 298,000円 |
Creative Suite3 Design Standard | 198,000円 |
Creative Suite 3 Production Premium | 261,000円 |
tbody
表の本体部分を定義
2009/8/26
tbody要素は、表の本体であることを表します。
複数の行をグループ化するのに使用します。
tbody要素内には、tr要素が1回以上出現する必要があります。
thead、tfoot、tbody要素は、テーブルの列をグループ化することができるため、表にヘッダー列、データ行、合計がある列が欲しい場合に有用です。 この区分は、テーブルのヘッダーとフッターはそのままで、テーブル本文のみスクロールすることを可能にします。 長いテーブルを印刷する場合、テーブルのヘッダーとフッター情報は、データを含む各ページで繰り返しされるかもしれません。
属性
固有の属性はありません。
HTML4.01にあったalign/char/charoff/valign属性は廃止されました。
属性 | 値 | 説明 |
---|---|---|
グローバル属性 | - | 全要素共通の属性。 |
サンプル
<div class="tbl"> <table> <thead> <tr> <th>製品名</th> <th>価格</th> </tr> </thead> <tfoot> <tr> <th>合計金額</th> <th>983,000円</th> </tr> </tfoot> <tbody> <tr><td>Creative Suite3 Web Premium</td><td>226,000円</td></tr> <tr><td>Creative Suite 3 Design Premium</td><td>298,000円</td></tr> <tr><td>Creative Suite3 Design Standard</td><td>198,000円</td></tr> <tr><td>Creative Suite 3 Production Premium</td><td>261,000円</td></tr> </tbody> </table> </div>
製品名 | 価格 |
---|---|
合計金額 | 983,000円 |
Creative Suite3 Web Premium | 226,000円 |
Creative Suite 3 Design Premium | 298,000円 |
Creative Suite3 Design Standard | 198,000円 |
Creative Suite 3 Production Premium | 261,000円 |
thead
表のヘッダ部分を定義
2009/8/26
thead要素は、表のヘッダーであることを表します。
複数の行をヘッダーとしてグループ化するのに使用します。
thead要素は、table要素内で1回のみ出現可能です。
thead要素内には、tr要素が1回以上出現する必要があります。
caption要素、col要素、colgroup要素を含める場合は、この順番に記述します。
thead要素、tfoot要素、tbody要素のいずれかを使用した場合は、これらの3つの要素をtable要素内ですべて使用するようにしてください。 これらの要素はtable要素内で、thead、tfoot、tbodyの順に記述してください。 こうすることで、ブラウザが表データをすべて受け取る前にフッター情報をレンダリングできるようになります。
thead要素、tfoot要素、tbody要素は、テーブルの列をグループ化することができるため、表にヘッダー列、データ行、合計がある列が欲しい場合に有用です。 この区分は、テーブルのヘッダーとフッターはそのままで、テーブル本文のみスクロールすることを可能にします。 長いテーブルを印刷する場合、テーブルのヘッダーとフッター情報は、データを含む各ページで繰り返しされるかもしれません。
属性
固有の属性はありません。
HTML4.01にあったalign/char/charoff/valign属性は廃止されました。
属性 | 値 | 説明 |
---|---|---|
グローバル属性 | - | 全要素共通の属性。 |
サンプル
<div class="tbl"> <table> <thead> <tr> <th>製品名</th> <th>価格</th> </tr> </thead> <tfoot> <tr> <th>合計金額</th> <th>983,000円</th> </tr> </tfoot> <tbody> <tr><td>Creative Suite3 Web Premium</td><td>226,000円</td></tr> <tr><td>Creative Suite 3 Design Premium</td><td>298,000円</td></tr> <tr><td>Creative Suite3 Design Standard</td><td>198,000円</td></tr> <tr><td>Creative Suite 3 Production Premium</td><td>261,000円</td></tr> </tbody> </table> </div>
製品名 | 価格 |
---|---|
合計金額 | 983,000円 |
Creative Suite3 Web Premium | 226,000円 |
Creative Suite 3 Design Premium | 298,000円 |
Creative Suite3 Design Standard | 198,000円 |
Creative Suite 3 Production Premium | 261,000円 |
tfoot
表のフッタ部分を定義
2009/8/26
表のフッターであることを表します。
複数の行をフッターとしてグループ化するのに使用します。
tfoot要素は、table要素内で1回のみ出現可能です。
tfoot要素内には、tr要素要素が1回以上出現する必要があります。
thead要素、tfoot要素、tbody要素のいずれかを使用した場合は、これらの3つの要素をtable要素内ですべて使用するようにしてください。 これらの要素はtable要素内で、thead、tfoot、tbodyの順に記述してください。 こうすることで、ブラウザが表データをすべて受け取る前にフッター情報をレンダリングできるようになります。
thead要素、tfoot要素、tbody要素は、テーブルの列をグループ化することができるため、表にヘッダー列、データ行、合計がある列が欲しい場合に有用です。 この区分は、テーブルのヘッダーとフッターはそのままで、テーブル本文のみスクロールすることを可能にします。 長いテーブルを印刷する場合、テーブルのヘッダーとフッター情報は、データを含む各ページで繰り返しされるかもしれません。
属性
固有の属性はありません。
HTML4.01にあったalign/char/charoff/valign属性は廃止されました。
属性 | 値 | 説明 |
---|---|---|
グローバル属性 | - | 全要素共通の属性。 |
サンプル
<div class="tbl"> <table> <thead> <tr> <th>製品名</th> <th>価格</th> </tr> </thead> <tfoot> <tr> <th>合計金額</th> <th>983,000円</th> </tr> </tfoot> <tbody> <tr><td>Creative Suite3 Web Premium</td><td>226,000円</td></tr> <tr><td>Creative Suite 3 Design Premium</td><td>298,000円</td></tr> <tr><td>Creative Suite3 Design Standard</td><td>198,000円</td></tr> <tr><td>Creative Suite 3 Production Premium</td><td>261,000円</td></tr> </tbody> </table> </div>
製品名 | 価格 |
---|---|
合計金額 | 983,000円 |
Creative Suite3 Web Premium | 226,000円 |
Creative Suite 3 Design Premium | 298,000円 |
Creative Suite3 Design Standard | 198,000円 |
Creative Suite 3 Production Premium | 261,000円 |
tr
行のグループ化
2009/8/26
tr要素は、表の行グループを表します。
tr要素内には、th要素またはtd要素が1回以上出現する必要があります。
属性
HTML4.01にあった固有の属性(align/bgcolor/char/charoff/valign属性)はすべてHTML5で廃止されました。
属性 | 値 | 説明 |
---|---|---|
グローバル属性 | - | 全要素共通の属性。 |
サンプル
<div class="tbl"> <table> <tr><th>列A</th><th>列B</th><th>列C</th></tr> <tr><td>行A-1</td><td>行B-1</td><td>行C-1</td></tr> <tr><td>行A-2</td><td>行B-2</td><td>行C-2</td></tr> <tr><td>行A-3</td><td>行B-3</td><td>行C-3</td></tr> </table> </div>
列A | 列B | 列C |
---|---|---|
行A-1 | 行B-1 | 行C-1 |
行A-2 | 行B-2 | 行C-2 |
行A-3 | 行B-3 | 行C-3 |
th
見出しセル
2009/8/26
th要素は、表の見出しセルを表します。
th要素は、tr要素内に記述します。
一般的なブラウザにおいて、th要素内のテキストは太字で表示されます。
属性
HTML4.01にあったabbr/align/axis/bgcolor/char/charoff/headers/height/nowrap/valign/width属性は廃止されました。 HTML5では、colspan/rowspan/scope属性のみサポートされています。
属性 | 値 | 説明 |
---|---|---|
グローバル属性 | - | 全要素共通の属性。 |
colspan | 数値 | 連結するセル数を指定。 |
rowspan | 数値 | 連結する行数を指定。 |
headers | 文字列 | ユニークなスペース区切りトークンからなる順不同のセットで構成される文字列を指定。 |
scope | col colgroup row rowgroup |
行・列単位で関連のある見出しセル情報を指定。行・列単位で関連のある見出しセル情報。
|
サンプル
<div class="tbl"> <table> <tr> <th>製品名</th> <th>価格</th> </tr> <tr> <td>Creative Suite3 Web Premium</td> <td>226,000円</td> </tr> <tr> <td>Creative Suite 3 Design Premium</td> <td>298,000円</td> </tr> <tr> <td>Creative Suite3 Design Standard</td> <td>198,000円</td> </tr> <tr> <td>Creative Suite 3 Production Premium</td> <td>261,000円</td> </tr> </table> </div>
製品名 | 価格 |
---|---|
Creative Suite3 Web Premium | 226,000円 |
Creative Suite 3 Design Premium | 298,000円 |
Creative Suite3 Design Standard | 198,000円 |
Creative Suite 3 Production Premium | 261,000円 |
td
データセル
2009/8/26
td要素は、データセルを表す要素です。
td要素は、tr要素内に記述します。
属性
HTML4.01にあったabbr/align/axis/bgcolor/char/charoff/headers/height/nowrap/valign/width属性は廃止されました。 HTML5では、colspan/rowspan/scope属性のみサポートされています。
属性 | 値 | 説明 |
---|---|---|
グローバル属性 | - | 全要素共通の属性。 |
colspan | 数値 | 連結するセル数を指定。 |
rowspan | 数値 | 連結する行数を指定。 |
headers | 文字列 | ユニークなスペース区切りトークンからなる順不同のセットで構成される文字列を指定。 |
scope | col colgroup row rowgroup |
行・列単位で関連のある見出しセル情報を指定。行・列単位で関連のある見出しセル情報。
|
サンプル
<div class="tbl"> <table> <tr><th>列A</th><th>列B</th><th>列C</th></tr> <tr><td>行A-1</td><td>行B-1</td><td>行C-1</td></tr> <tr><td>行A-2</td><td>行B-2</td><td>行C-2</td></tr> <tr><td>行A-3</td><td>行B-3</td><td>行C-3</td></tr> </table> </div>
列A | 列B | 列C |
---|---|---|
行A-1 | 行B-1 | 行C-1 |
行A-2 | 行B-2 | 行C-2 |
行A-3 | 行B-3 | 行C-3 |