@ HTML

table 要素

table 要素は表(テーブル)を作成する際に使用する要素です。テーブル(表)の基本的な構造は、<table>~</table> 内に <tr>~</tr> で表の横一行を定義して、さらにその中に <th>~</th> や <td>~</td> でセルを定義します。

テーブル(表)の各セルには見出しを定義するヘッダセル <th>~</th> と、データを定義するデータセル <td>~<td> があります。ヘッダセル内のテキストは、一般的なブラウザでは太字でセンタリングされて表示されます。

table 要素では、border 属性でその表がレイアウト目的ではないことを示します。また、summary 属性を用いて、テーブルの概要を提供できます。

elements_table_01

<table border="1" summary="基本">
  <tr>
    <th>見出しセル1</th>
    <th>見出しセル2</th>
    <th>見出しセル3</th>
  </tr>
  <tr>
    <td>データセル1-1</td>
    <td>データセル2-1</td>
    <td>データセル3-1</td>
  </tr>
  <tr>
    <td>データセル1-2</td>
    <td>データセル2-2</td>
    <td>データセル3-2</td>
  </tr>
</table>
table 要素の属性
属性名 説明
border 空文字列か「1」のみを用いて表を囲む枠を定義します。
summary ユーザーエージェントが表を表示することができない場合に、表を説明するための代替テキストを定義します。

caption 要素

caption 要素は、表のキャプション(タイトルや説明)を表します。この要素は、table 要素内の最初の部分(table開始タグの直後)に1つだけ配置できます。

elements_table_02

<table border="1" summary="表題">
  <caption>表のタイトルを表示</caption>
  <tr>
    <th>見出しセル1</th>
    <th>見出しセル2</th>
    <th>見出しセル3</th>
  </tr>
  <tr>
    <td>データセル1-1</td>
    <td>データセル2-1</td>
    <td>データセル3-1</td>
  </tr>
  <tr>
    <td>データセル1-2</td>
    <td>データセル2-2</td>
    <td>データセル3-2</td>
  </tr>
</table>

colspan 属性・rowspan 属性

td 要素、th 要素に colspan 属性 や rowspan 属性 を追加して、セルを結合できます。

elements_table_03

<table border="1" summary="縦横複合結合">
  <tr>
    <th>見出しセル1</th>
    <th>見出しセル2</th>
    <th>見出しセル3</th>
  </tr>
  <tr>
    <td colspan="2">列結合したデータセル</td>
    <td rowspan="2">行結合したデータセル</td>
  </tr>
  <tr>
    <td>データセル1-2</td>
    <td>データセル2-2</td>
  </tr>
</table>

thead 要素・tbody 要素・tfoot 要素

thead 要素・tbody 要素・tfoot 要素は、表の行をグループ化します。

elements_table_04

<table border="1" summary="構造化">
  <thead>
    <tr>
      <th>見出しセル1</th>
      <th>見出しセル2</th>
      <th>見出しセル3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>データセル1-3</td>
      <td>データセル2-3</td>
      <td>データセル3-3</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>データセル1-1</td>
      <td>データセル2-1</td>
      <td>データセル3-1</td>
    </tr>
    <tr>
      <td>データセル1-2</td>
      <td>データセル2-2</td>
      <td>データセル3-2</td>
    </tr>
  </tbody>
</table>

colgroup 要素

colgroup 要素は、表の列をグループ化します。この要素は、table 要素の子要素として使用します。

elements_table_05

<table border="1" summary="縦列をグループ化">
  <colgroup span="1" class="left">
  </colgroup>
  <colgroup span="2" class="right">
  </colgroup>
  <tr>
    <th>見出しセル1</th>
    <th>見出しセル2</th>
    <th>見出しセル3</th>
  </tr>
  <tr>
    <td>データセル1-1</td>
    <td>データセル2-1</td>
    <td>データセル3-1</td>
  </tr>
  <tr>
    <td>データセル1-2</td>
    <td>データセル2-2</td>
    <td>データセル3-2</td>
  </tr>
</table>

colgroup 要素

colgroup 要素に span 属性が指定されていない場合には col 要素が使用できます。

elements_table_06

<table border="1" summary="縦列をグループ化">
  <colgroup span="1" class="left">
  </colgroup>
  <colgroup>
    <col class="center">
    <col class="right">
  </colgroup>
  <tr>
    <th>見出しセル1</th>
    <th>見出しセル2</th>
    <th>見出しセル3</th>
  </tr>
  <tr>
    <td>データセル1-1</td>
    <td>データセル2-1</td>
    <td>データセル3-1</td>
  </tr>
  <tr>
    <td>データセル1-2</td>
    <td>データセル2-2</td>
    <td>データセル3-2</td>
  </tr>
</table>

scope 属性

scope 属性を使用することで、見出しがどのセルと結びついているか明示できます。

elements_table_07

<table border="1" summary="列方向(縦列)のセルを対象にする">
  <tr>
    <th scope="col">見出しセル1</th>
    <th scope="col">見出しセル2</th>
    <th scope="col">見出しセル3</th>
  </tr>
  <tr>
    <td>データセル1-1</td>
    <td>データセル2-1</td>
    <td>データセル3-1</td>
  </tr>
  <tr>
    <td>データセル1-2</td>
    <td>データセル2-2</td>
    <td>データセル3-2</td>
  </tr>
</table>

elements_table_08

<table border="1" summary="行方向(横列)のセルを対象にする">
  <tr>
    <th scope="row">見出しセル1</th>
    <td>データセル2-1</td>
    <td>データセル3-1</td>
  </tr>
  <tr>
    <th scope="row">見出しセル2</td>
      <td>データセル2-2</td>
      <td>データセル3-2</td>
  </tr>
  <tr>
    <th scope="row">見出しセル3</td>
      <td>データセル2-3</td>
      <td>データセル3-3</td>
  </tr>
</table>