表タグ

表（table）は、行（row）と列（column）の形式でデータを表現します。

<table>、<caption>

<table> はブロックレベルのコンテナタグで、すべての表の内容はこのタグの中に配置されます。

<table>
  ... ...
</table>

<caption> は常に <table> 内の最初の要素であり、表のタイトルを表します。この要素は省略可能です。

<table>
  <caption>サンプル表</caption>
</table>

<thead>、<tbody>、<tfoot>

<thead>、<tbody>、<tfoot> はすべてブロックレベルのコンテナ要素であり、 <table> の直接の子要素です。それぞれ表のヘッダー、本体、フッターを表します。

<table>
  <thead>... ...</thead>
  <tbody>... ...</tbody>
  <tfoot>... ...</tfoot>
</table>

これらの3つの要素はすべて省略可能です。 <thead> を使用する場合、 <tbody> と <tfoot> は必ず <thead> の後に配置する必要があります。 <tbody> を使用する場合、 <tfoot> は必ず <tbody> の後に配置する必要があります。

大きな表の中には、複数の <tbody> を使用して、連続する複数の部分を表現することができます。

<colgroup>、<col>

<colgroup> は <table> の直接の子要素で、列のグループの定義を含めるために使用されます。 <col> は <colgroup> の子要素で、表の1列を定義するために使用されます。

<table>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
</table>

上記のコードは、表に3つの列があることを示しています。

<col> は終了タグを持たない単独で使用されるタグであるだけでなく、空要素でもあり、子要素を持ちません。その主な役割は、表構造の宣言に加えて、表にスタイルを適用することです。

<table>
  <colgroup>
    <col class="c1">
    <col class="c2">
    <col class="c3">
  </colgroup>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

上記のコードでは、 <colgroup> は表に3つの列があることを宣言し、各列には独自の class があります。CSS を使用して各 class にスタイルを設定でき、表全体に効果が適用されます。

<col> には span 属性があり、値は正の整数で、デフォルトは 1 です。1より大きい場合は、その列の幅が連続する複数の列にまたがることを意味します。

<table>
  <colgroup>
    <col>
    <col span="2">
    <col>
  </colgroup>
</table>

上記のコードでは、表のヘッダーは3列を定義していますが、実際のデータには4列あります。ヘッダーの2番目の列は、2列にまたがります。

<tr>

<tr> タグは、表の1行（table row）を表します。表に <thead>、 <tbody>、 <tfoot> がある場合は、 <tr> はこれらのコンテナ要素内に配置されます。それ以外の場合は、直接 <table> の次のレベルに配置されます。

<table>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
</table>

上記のコードは、表に合計3行あることを示しています。

<th>、<td>

<th> と <td> はどちらも表のセルを定義するために使用されます。 <th> はヘッダーセル、 <td> はデータセルです。

<table>
  <tr>
    <th>学号</th><th>名前</th>
  </tr>
  <tr>
    <td>001</td><td>張三</td>
  </tr>
  <tr>
    <td>002</td><td>李四</td>
  </tr>
</table>

上記のコードでは、表は合計3行あります。最初の行はヘッダー行なので <th> を使用し、2行目と3行目はデータ行なので <td> を使用します。

（1）colspan 属性、 rowspan 属性

セルが複数の行または列にまたがる場合があります。これは colspan 属性と rowspan 属性で設定します。 colspan はセルがまたがる列数を、 rowspan はセルがまたがる行数を表します。これらの値はどちらも非負の整数で、デフォルトは1です。

<table>
  <tr>
    <td colspan="2">A</td><td>B</td>
  </tr>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
</table>

上記のコードでは、1行目の最初のセルは2列にまたがります。

（2）headers 属性

表が大きく、セルが多い場合、ソースコード上ではどのセルがどのヘッダーに対応しているのかわかりにくくなることがあります。このような場合に headers 属性を使用できます。

<table>
  <tr>
    <th id="no">学号</th><th id="names">名前</th>
  </tr>
  <tr>
    <td headers="no">001</td><td headers="names">張三</td>
  </tr>
  <tr>
    <td headers="no">002</td><td headers="names">李四</td>
  </tr>
</table>

上記のコードでは、ヘッダー行の <th> に id 属性が設定されており、後続の <td> セルの headers 属性はこれらの id 属性の値に対応しています。したがって、これらのセルがどのヘッダー行に対応しているかがわかります。

headers 属性の値は、常に <th> タグの id 属性の値に対応します。1つのセルが複数のヘッダー行に対応する場合（複数行にまたがる場合）があるため、 headers 属性はスペース区切りの文字列で、複数の id 属性の値に対応できます。

（3）scope 属性

scope 属性は <th> タグでのみサポートされ、通常は <td> タグでは使用されません。この属性は、 <th> セルが列のヘッダーなのか行のヘッダーなのかを示します。

<table>
  <tr>
    <th scope="col">名前</th>
    <th scope="col">学号</th>
    <th scope="col">性別</th>
  </tr>
  <tr>
    <th scope="row">張三</th>
    <td>001</td>
    <td>男</td>
  </tr>
  <tr>
    <th scope="row">李四</th>
    <td>002</td>
    <td>男</td>
  </tr>
</table>

上記のコードでは、最初の行のヘッダーはすべて列ヘッダーなので、 <th> の scope 属性は col になります。2行目と3行目の最初の列は行ヘッダーなので、 <th> タグの scope 属性は row になります。

scope 属性は、以下の値を取ることができます。

• row：その行のすべてのセルが、このヘッダーセルに関連しています。
• col：その列のすべてのセルが、このヘッダーセルに関連しています。
• rowgroup：複数の行で構成される行グループのすべてのセルが、このヘッダーセルに関連しています。 rowspan 属性と組み合わせて使用できます。
• colgroup：複数の列で構成される列グループのすべてのセルが、このヘッダーセルに関連しています。 colspan 属性と組み合わせて使用できます。
• auto：デフォルト値で、ブラウザが自動的に決定することを意味します。

以下は、 colgroup 属性と rowgroup 属性の例です。

<table>
  <thead>
    <tr>
      <th scope="col">ポスター名</th>
      <th scope="col">色</th>
      <th colspan="3" scope="colgroup">サイズ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3" scope="rowgroup">Zodiac</th>
      <th scope="row">フルカラー</th>
      <td>A2</td>
      <td>A3</td>
      <td>A4</td>
    </tr>
    <tr>
      <th scope="row">白黒</th>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
    </tr>
    <tr>
      <th scope="row">セピア</th>
      <td>A3</td>
      <td>A4</td>
      <td>A5</td>
    </tr>
  </tbody>
</table>

上記の例では、列ヘッダー「サイズ」の scope 属性は colgroup で、このヘッダーセルが複数の列（この例では3列）に対応していることを示しています。