テーブル

テーブルとはデータを列と行の形式で整理して表示するためのものです。表形式で情報を構造化し、視覚的にわかりやすく表現することができます。テーブルは以下のタグを使用します。

タグ	説明
table	テーブル全体を囲む要素
tr	行を定義する要素
th	見出しセルを定義する要素
td	データセルを定義する要素
caption	テーブルのタイトルや説明を定義する要素
thead	テーブルのヘッダー部分を定義する要素
tbody	テーブルのデータ部分を定義する要素
tfoot	テーブルのフッター部分を定義する要素

テーブルの例

テーブルのコードの例と表示の例は以下のようになります。

<table>
    <thead>
        <tr>
            <th>ヘッド1</th>
            <th>ヘッド2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>データ1</td>
            <td>データ2</td>
        </tr>
        <tr>
            <td>データ3</td>
            <td>データ4</td>
        </tr>
        <tr>
            <td>データ5</td>
            <td>データ6</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>フッド1</td>
            <td>フッド2</td>
        </tr>
    </tfoot>
</table>

ヘッド1	ヘッド2
データ1	データ2
データ3	データ4
データ5	データ6
フッド1	フッド2

まず、tableタグで全体を囲い、theadタグでヘッダーを定義します。trタグで行を定義し、thタグでヘッドの列を定義します。次に、tbodyタグでボディを定義します。これもtrタグで行を定義し、tdタグでデータの列を定義します。最後にtfootタグでフッターを定義します。これもtrタグで行を定義し、tdタグでデータの列を定義します。

セルの結合

HTMLのテーブルではセルの結合ができます。

横方向の結合

colspan属性を使用してセルを横方向（列方向）に結合します。colspan属性には結合する列数を指定します。

横方向の結合の例

テーブルのコードの例と表示の例は以下のようになります。

<table border="1">
    <tr>
        <td>セル1-1</td>
        <td>セル1-2</td>
        <td>セル1-3</td>
    </tr>
    <tr>
        <td colspan="2">セル2-1 2-2</td>
        <td>セル2-3</td>
    </tr>
</table>

セル1-1	セル1-2	セル1-3
セル2-1 2-2		セル2-3

縦方向の結合

rowspan属性を使用してセルを縦方向（行方向）に結合します。rowspan属性には結合する行数を指定します。

縦方向の結合の例

テーブルのコードの例と表示の例は以下のようになります。

<table border="1">
    <tr>
        <td rowspan="2">セル1-1 2-1</td>
        <td>セル1-2</td>
        <td>セル1-3</td>
    </tr>
    <tr>
        <td>セル2-2</td>
        <td>セル2-3</td>
    </tr>
</table>

セル1-1 2-1	セル1-2	セル1-3
	セル2-2	セル2-3

以上、テーブルについて説明しました。テーブルはデータを整理するのに便利です。