HTMLでテーブル(table)を作る方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLでテーブル(table)を作る方法について、基本的な作り方と見出しのセルを付ける作り方に分け、簡単に解説していきます。

テーブルの基本的な作り方

テーブルはtableタグ、trタグ、tdタグで作れます。

テーブルの枠にはtableタグ、行にはtrタグ、セルにはtdタグを使います。

<table border="1">
    <tr>
        <td>氏名</td>
        <td>性別</td>
    </tr>
    <tr>
        <td>田中</td>
        <td>男性</td>
    </tr>
    <tr>
        <td>髙橋</td>
        <td>女性</td>
    </tr>
</table>

上記のコードでは、氏名と性別の一覧表をHTMLのtableタグを使ってシンプルに表現しています。

テーブルに見出しのセルを付ける作り方

テーブルに見出しのセルを付けるにはtdタグではなくthタグを使います。

また、見出しのtrタグ群はtheadタグ、見出しでないtrタグ群はtbodyタグで囲います。

<table border="1">
    <thead>
        <tr>
            <th>氏名</th>
            <th>性別</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>田中</td>
            <td>男性</td>
        </tr>
        <tr>
            <td>髙橋</td>
            <td>女性</td>
        </tr>
    </tbody>
</table>

上記のコードでは、先程の氏名と性別の一覧表に、ヘッダ(見出し)行やセルを付けて見やすくしています。

テーブルでセルを垂直方向に結合する方法

セルを垂直方向に結合するには、thタグもしくはtdタグにrowspan属性を付けます。

セルを水平方向に結合する場合にも、同じ要領で、thタグやtdタグにcolspan属性を付けます。

<table border="1">
    <thead>
        <tr>
            <th>部署</th>
            <th>名前</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">総務</td>
            <td>田中</td>
        </tr>
        <tr>
            <td>髙橋</td>
        </tr>
        <tr>
            <td>財務</td>
            <td>山田</td>
        </tr>
    </tbody>
</table>

上記のコードでは、部署と名前の一覧表をtableタグで表現しており、ここでは総務が2人いるため、rowspanで2人の部署のセルを結合しています。