table 要素
表組みを表す際に使用する。この要素内に、表を構成する各要素を配置していくことになる。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| border | 空文字列 | 枠線を表示しない（規定値） | × |
| 1 | 枠線を表示する |
table 要素は、表組みを表します。table 要素は直接の子要素として、caption 要素、colgroup 要素、thead 要素、tfoot 要素、tbody 要素、tr 要素のみを持つことができます。また、caption 要素、thead 要素、tfoot 要素は、1つの table 要素内に 1つしか入れることができません。
表組みを表す際に使用する。この要素内に、表を構成する各要素を配置していくことになる。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| border | 空文字列 | 枠線を表示しない（規定値） | × |
| 1 | 枠線を表示する |
<table border="1"> <tr><td>香川県</td></tr> </table>
tr 要素は、テーブル（表）の行を定義する際に使用します。
テーブル（表）の基本的な構造は、table 要素の中に tr 要素で表の行を定義して、 さらにその中に th 要素や td 要素でセルを定義します。
テーブル（表）の行を定義する際に使用する。
<table border="1"> <tr><td>香川県</td></tr> <tr><td>徳島県</td></tr> <tr><td>愛媛県</td></tr> <tr><td>高知県</td></tr> </table>
td 要素は、テーブル（表）の列を定義する際に使用します。
テーブル（表）の基本的な構造は、table 要素の中に tr 要素で表の行を定義して、 さらにその中に th 要素や td 要素でセルを定義します。
テーブル（表）の列を定義する際に使用する。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| colspan | 数値 | 横方向にまたがるセルの数（規定値：1） | × |
| rowspan | 数値 | 縦方向にまたがるセルの数（規定値：1） | × |
| headers | th 要素の id 属性の値 | 対応する見出しセルの ID 値（半角スペースで区切って複数指定可能） | × |
<table border="1"> <tr><td rowspan="4">四国</td><td>香川県</td><td>高松</td><td>1,876.53</td></tr> <tr><td>徳島県</td><td>徳島</td><td>4,146.67</td></tr> <tr><td>愛媛県</td><td>松山</td><td>5,678.18</td></tr> <tr><td>高知県</td><td>高知</td><td>7,105.16</td></tr> </table>
1行1列目の「四国」が縦に4つ分のセルにまたがると宣言されているので、2行目以降は1行目と比べると1列少なくなっています。
th 要素は、テーブル（表）に見出しセルをつける際に使用します。
tr 要素の子要素として定義します。1行目に限らず、どこでも指定できます。
一般的なブラウザでは、太字で中央寄せで表示されます。
テーブル（表）に見出しセルをつける際に使用する。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| colspan | 数値 | 横方向にまたがるセルの数（規定値：1） | × |
| rowspan | 数値 | 縦方向にまたがるセルの数（規定値：1） | × |
| headers | th 要素の id 属性の値 | 対応する見出しセルの ID 値（半角スペースで区切って複数指定可能） | × |
| scope | 見出しセルがどの方向のセルに対して対応するのか | × | |
| col | 見出しセルが属する列の下方向 | ||
| row | 見出しセルが属する行の、該当するセル以降のセルすべて | ||
| colgroup | 見出しセルが属する列グループのうち、該当するセル以降のセルすべて | ||
| rowgroup | 見出しセルが属する行グループのうち、該当するセル以降のセルすべて | ||
| auto | 自動（規定値） | ||
<table border="1"> <tr><th> </th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>）</th></tr> <tr><td rowspan="4">四国</td><td>香川県</td><td>高松</td><td>1,876.53</td></tr> <tr><td>徳島県</td><td>徳島</td><td>4,146.67</td></tr> <tr><td>愛媛県</td><td>松山</td><td>5,678.18</td></tr> <tr><td>高知県</td><td>高知</td><td>7,105.16</td></tr> </table>
caption 要素は、テーブル（表）にタイトルや説明をつける際に使用します。
一般的なブラウザでは、キャプションはテーブルの上部に表示されます。
テーブル（表）にタイトルや説明をつける際に使用する。
<table border="1"> <caption>面積</caption> <tr><th> </th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>）</th></tr> <tr><td rowspan="4">四国</td><td>香川県</td><td>高松</td><td>1,876.53</td></tr> <tr><td>徳島県</td><td>徳島</td><td>4,146.67</td></tr> <tr><td>愛媛県</td><td>松山</td><td>5,678.18</td></tr> <tr><td>高知県</td><td>高知</td><td>7,105.16</td></tr> </table>
colgroup 要素は、表の列をグループ化する際に使用します。
colgroup 要素が col 要素を 1つも持たない場合、span 属性を指定することで、対象となる列の個数を指定できます。この値は 0より大きい正の整数でないといけません。col 要素を子に持つ場合は、span 属性は使用できません。
テーブル（表）の列をグループ化する際に使用する。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| span | 数値 | グループ化する列数（規定値：1） | × col 要素を子に持つ場合は指定できない |
スタイルシートを指定することによって、最初の列は幅を 70px にし、背景色を lightyellow にしています。さらに、残りの3つの列の幅を 100px にしています。
<table border="1"> <caption>面積</caption> <colgroup span="1" style="width:70px;background-color:lightyellow;"></colgroup> <colgroup span="3" style="width:100px;"></colgroup> <tr><th> </th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>）</th></tr> <tr><td rowspan="4">四国</td><td>香川県</td><td>高松</td><td>1,876.53</td></tr> <tr><td>徳島県</td><td>徳島</td><td>4,146.67</td></tr> <tr><td>愛媛県</td><td>松山</td><td>5,678.18</td></tr> <tr><td>高知県</td><td>高知</td><td>7,105.16</td></tr> </table>
col 要素は、列に属性やスタイルを指定する際に使用します。この要素は、colgroup 要素の子要素として使用します。
列のグループ化はしませんが、複数の列に対して同じ属性やスタイルをまとめて指定することができます。
colgroup 要素に span 属性が指定されている場合は、この要素を配置することはできません。
なお、<col> には、終了タグはありません。
テーブル（表）の列に属性やスタイルを指定する際に使用する。
colgroup 要素に span 属性が指定されている場合は、この要素を配置することはできない。終了タグはない。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| span | 数値 | グループ化する列数（規定値：1） | × |
スタイルシートを指定することによって、最初の列は幅を 70px にし、背景色を lightyellow にしています。さらに、残りの3つの列の幅を 100px にしています。
<table border="1"> <caption>面積</caption> <colgroup> <col span="1" style="width:70px;background-color:lightyellow;"> <col span="3" style="width:100px;"> </colgroup> <tr><th> </th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>）</th></tr> <tr><td rowspan="4">四国</td><td>香川県</td><td>高松</td><td>1,876.53</td></tr> <tr><td>徳島県</td><td>徳島</td><td>4,146.67</td></tr> <tr><td>愛媛県</td><td>松山</td><td>5,678.18</td></tr> <tr><td>高知県</td><td>高知</td><td>7,105.16</td></tr> </table>
tbody 要素は、テーブル（表）のボディ部分を定義する際に使用します。この要素は、テーブルの本体となる行グループを表します。
テーブルは作成のしかたによって、行グループ単位でテーブルヘッダ・テーブルボディ・テーブルフッタに分類できる場合があります。 テーブルをヘッダ・ボディ・フッタに分けるには、それぞれの行グループを <thead>～</thead>、<tbody>～</tbody>、<tfoot>～</tfoot> で囲みます。 これらの要素は省略できますが、指定すればテーブル構造がより明確になります。
tbody 要素は table 要素の子要素として、caption 要素、colgroup 要素の後ろで、thead 要素と tfoot 要素の間に複数配置することができます。
テーブル（表）のボディ部分を定義する際に使用する。
テーブルのボディ部分を tbody 要素として指定しています。また、title 属性で「四国」を設定しています。
<table border="1"> <caption>面積</caption> <colgroup> <col span="1" style="width:70px;background-color:lightyellow;"> <col span="3" style="width:100px;"> </colgroup> <tr><th> </th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>）</th></tr> <tbody title="四国"> <tr><td rowspan="4">四国</td><td>香川県</td><td>高松</td><td>1,876.53</td></tr> <tr><td>徳島県</td><td>徳島</td><td>4,146.67</td></tr> <tr><td>愛媛県</td><td>松山</td><td>5,678.18</td></tr> <tr><td>高知県</td><td>高知</td><td>7,105.16</td></tr> </tbody> </table>
thead 要素は、テーブル（表）のヘッダ部分を定義する際に使用します。この要素は、テーブルのヘッダとなる行グループを表します。
テーブルは作成のしかたによって、行グループ単位でテーブルヘッダ・テーブルボディ・テーブルフッタに分類できる場合があります。 テーブルをヘッダ・ボディ・フッタに分けるには、それぞれの行グループを <thead>～</thead>、<tbody>～</tbody>、<tfoot>～</tfoot> で囲みます。 これらの要素は省略できますが、指定すればテーブル構造がより明確になります。
thead 要素は table 要素の子要素として、caption 要素、colgroup 要素の後ろで、tbody 要素や tfoot 要素の前に、一つだけ配置することができます。
テーブル（表）のヘッダ部分を定義する際に使用する。
テーブルのヘッダ部分を thead 要素として指定しています。また、title 属性で「タイトル」を設定しています。
<table border="1"> <caption>面積</caption> <colgroup> <col span="1" style="width:70px;background-color:lightyellow;"> <col span="3" style="width:100px;"> </colgroup> <thead title="タイトル"> <tr><th> </th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>）</th></tr> </thead> <tbody title="四国"> <tr><td rowspan="4">四国</td><td>香川県</td><td>高松</td><td>1,876.53</td></tr> <tr><td>徳島県</td><td>徳島</td><td>4,146.67</td></tr> <tr><td>愛媛県</td><td>松山</td><td>5,678.18</td></tr> <tr><td>高知県</td><td>高知</td><td>7,105.16</td></tr> </tbody> </table>
tfoot 要素は、テーブル（表）のフッタ部分を定義する際に使用します。この要素は、テーブルのフッタとなる行グループを表します。
テーブルは作成のしかたによって、行グループ単位でテーブルヘッダ・テーブルボディ・テーブルフッタに分類できる場合があります。 テーブルをヘッダ・ボディ・フッタに分けるには、それぞれの行グループを <thead>～</thead>、<tbody>～</tbody>、<tfoot>～</tfoot> で囲みます。 これらの要素は省略できますが、指定すればテーブル構造がより明確になります。
tfoot 要素は table 要素の子要素として、caption 要素、colgroup 要素、thead 要素の後ろに、一つだけ配置することができます。
テーブル（表）のフッタ部分を定義する際に使用する。
テーブルのフッタ部分を tfoot 要素として指定しています。フッタ部分には、面積の合計を表示しています。また、title 属性で「合計」を設定しています。
<table border="1"> <caption>面積</caption> <colgroup> <col span="1" style="width:70px;background-color:lightyellow;"> <col span="3" style="width:100px;"> </colgroup> <thead title="タイトル"> <tr><th> </th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>）</th></tr> </thead> <tbody title="四国"> <tr><td rowspan="4">四国</td><td>香川県</td><td>高松</td><td>1,876.53</td></tr> <tr><td>徳島県</td><td>徳島</td><td>4,146.67</td></tr> <tr><td>愛媛県</td><td>松山</td><td>5,678.18</td></tr> <tr><td>高知県</td><td>高知</td><td>7,105.16</td></tr> </tbody> <tfoot title="合計"> <tr><td colspan="3">合計</td><td>18,806.54</td></tr> </tfoot> </table>