(1) テーブル（表）

テーブル関連のタグ

テーブル（表）を挿入するには次の複数のタグを組み合わせます。

テーブルの挿入

<table>タグだけではテーブルの罫線が表示されないため、テーブルを作成するときはborder属性を指定して<table border="1">とします。作成後、不要であればこれを削除します。

        <table border="1">
          <tr>
            <th>見出し1</th>
            <th>見出し2</th>
            <th>見出し3</th>
          </tr>
          <tr>
            <td>2行目の1列目</td>
            <td>2行目の2列目</td>
            <td>2行目の3列目</td>
          </tr>
          <tr>
            <td>3行目の1列目</td>
            <td>3行目の2列目</td>
            <td>3行目の3列目</td>
          </tr>
        </table>
      

これをブラウザで表示すると、次のようになります。実際にブラウザを更新して確かめてみましょう。

(2) セルの結合

横方向にセルを結合する

セルを横方向につなげたいときは、つなげたいセルの<th>または<td>タグにcolspan属性を追加します。2つつなげたいときはcolspan="2"のように指定します。

        <table border="1">
          <tr>
            <th colspan="2">見出し１と見出し2</th>
            <th>見出し3</th>
          </tr>
          <tr>
            <td>2行目の1列目</td>
            <td>2行目の2列目</td>
            <td>2行目の3列目</td>
          </tr>
          <tr>
            <td colspan="3">3行目の1列目〜3列目</td>
          </tr>
        </table>
      

縦方向にセルを結合する

セルを縦方向につなげる場合は、rowspan属性を加えます。

        <table border="1">
          <tr>
            <th>見出し1</th>
            <th>見出し2</th>
            <th>見出し3</th>
          </tr>
          <tr>
            <td rowspan="2">2行目と3行目の1列目</td>
            <td>2行目の2列目</td>
            <td>2行目の3列目</td>
          </tr>
          <tr>
            <td>3行目の2列目</td>
            <td>3行目の3列目</td>
          </tr>
        </table>
      

(3) 実習コード④

自分でテーマを設定して、何かの表を作ってみましょう（3行3列以上の表形式であれば何でもいいです）。次の例では、時間割表を作成しています。

        <table border="1">
          <tr>
            <th></th>
            <th>月</th>
            <th>火</th>
            <th>水</th>
            <th>木</th>
            <th>金</th>
            <th>土</th>
          </tr>
          <tr>
            <td>1限</td>
            <td>国語A</td>
            <td>数学A</td>
            <td>英語B</td>
            <td>体育</td>
            <td>技術</td>
            <td>技術</td>
          </tr>
          <tr>
            <td>2限</td>
            <td>物理</td>
            <td>英語A</td>
            <td>数学B</td>
            <td>国語B</td>
            <td>社会A</td>
            <td>化学</td>
          </tr>
          <tr>
            <td>3限</td>
            <td>情報</td>
            <td>生物</td>
            <td>英語B</td>
            <td>数学A</td>
            <td>社会B</td>
            <td>地学</td>
          </tr>
          <tr>
            <td colspan="7">昼休み</td>
          </tr>
          <tr>
            <td>4限</td>
            <td>国語A</td>
            <td>地学</td>
            <td>生物</td>
            <td>国語B</td>
            <td>英語A</td>
            <td>数学B</td>
          </tr>
          <tr>
            <td>5限</td>
            <td>社会A</td>
            <td>社会B</td>
            <td>数学A</td>
            <td>物理</td>
            <td>化学</td>
            <td></td>
          </tr>
          <tr>
            <td>6限</td>
            <td>英語B</td>
            <td>英語A</td>
            <td>数学B</td>
            <td>物理</td>
            <td>化学</td>
            <td></td>
          </tr>
        </table>