テーブル（表）は、様々なデータをリストとして表示する際に頻繁に利用される。
かつてはテーブルによってレイアウトしていたケースもあったが、最近はスタイルシートによってデザインされる例が多くなっているので、この授業では、純粋に表としての機能の紹介にとどめる。

<table> … </table>

テーブルを作成するという宣言。

<caption> … </caption>

テーブルの枠外にキャプションを表示する。

<tr> … </tr>

table row（行）の略。
行を作成する場合に用いる。通常tableタグの次ぎにくる。

<th> … </th>

table headerの略。
一番最初のテーブルの項目に使われる。通常表の中で一階使われるが、複数使う場合もあるし、使わない場合もある。

<td> … </td>

table divisionの略。
列を作成する際に使用する。
必ず、tdはtrの中で使用される。
列を増やしたければ、複数tdタグを並べる。

サンプル

tableタグを使ったサンプルは以下の通り。
ボーダーは本来スタイルシートで書くものだが、ここでは便宜的に使用している。
インデントを忘れないこと。

<table border="1">
  <caption>キャプション</caption>
    <tr>
      <th>ヘッダ1</th>
      <th>ヘッダ2</th>
    </tr>
    <tr>
      <td>サンプル1</td>
      <td>サンプル2</td>
    </tr>
    <tr>
      <td>サンプル3</td>
      <td>サンプル4</td>
    </tr>
</table>

結果

列の連結

colspanを用いると、列を連結することができる。

<table border="1">
    <tr>
      <th>ヘッダ1</th>
      <th>ヘッダ2</th>
    </tr>
    <tr>
      <td colspan="2">サンプル1</td>
    </tr>
    <tr>
      <td>サンプル2</td>
      <td>サンプル3</td>
    </tr>
</table>

結果

行の連結

rowspanを用いると、行を連結することができる。

<table border="1">
    <tr>
      <th>ヘッダ1</th>
      <th>ヘッダ2</th>
    </tr>
    <tr>
      <td rowspan="2">サンプル1</td>
      <td>サンプル2</td>
    </tr>
    <tr>
      <td>サンプル3</td>
    </tr>
</table>

結果