【初心者向け】table要素で表の作り方を解説します。

なやむくん

table要素で表を作りたいけど作り方がわからない…

なやむさん

セルを結合した表を作りたいけどcolspanを使うとわからなくなる

などの疑問や悩みを解決してまいります。

tableを使用した表をWebページ上で作成したいときがあると思いますが、少々作り方が特殊で初心者が理解できず挫折してしまうポイントでもあります。

みつた

自分も最初かなり苦手でした・・・

「table要素を理解したい」、「table要素で挫折したけどマスターしたい」という方に向けて今回の記事ではtable要素の使い方について解説していきます。

完成例のコードを紹介【通常編】

まずは簡単な表を作成して仕組みを理解しましょう。以下が今回の完成例です。

See the Pen table要素の使い方 by koutarou mori (@koutarou-mori) on CodePen.

今回は架空の学校の生徒数をまとめた表を作成しました。

HTMLのコードを重点的に見ていきましょう。

表を作成しているコードは以下になります。

    <!-- 表の作成はここから -->
    <table>
        <tr>
            <td>男子生徒</td>
            <td>女子生徒</td>
            <td>合計人数</td>
        </tr>
        <tr>
            <td>530人</td>
            <td>626人</td>
            <td>1156人</td>
        </tr>
    </table>
    <!-- ここまで -->

table要素

表を作成するにはまずtable要素を使用することが条件になります。

table要素は表の作成を宣言する要素です。

table要素が親要素でないとtr要素や、td要素は使用することができないので必ず使用することになります。

<table>: 表要素 - HTML: ハイパーテキストマークアップ言語 | MDN

みつた

表を作成する上でtable要素は必須です！

tr要素

次にtr要素について解説していきます。

tr要素は表の「行」を示します。

<tr>: 表の行要素 - HTML: ハイパーテキストマークアップ言語 | MDN

つまりtr要素が増えるほど行が増えて縦長の表が出来上がります。

td要素

td要素は表の中のデータ（セル）を示す要素で、tr要素内で使用します。

td要素を追加していくことで横並びに表示されていきます。

<td>: 表データセル要素 - HTML: ハイパーテキストマークアップ言語 | MDN

ここまでのおさらいです。

完成例のコードを紹介【行（縦）のセル結合編】

基本は理解できたかと思いますので、次はセルが結合されている場合を解説していきます。

完成例は以下の通りです。

See the Pen table要素の使い方（rowspan完成編） by koutarou mori (@koutarou-mori) on CodePen.

今回はセルが結合されている表について解説していきます。

rowspan属性

完成例を見ていただくと値段の箇所のセルが結合されていることがわかるかと思います。

このように行のセルを結合させる場合はrowspan属性を使用します。

rowspan属性の値に正の整数を入力することでその値分のセルを結合させることができます。

上記を踏まえて完成例のHTMLコードを見てみましょう。

    <!-- 表の作成はここから -->
    <table>
        <tr>
            <td>品名</td>
            <td>価格</td>
        </tr>
        <tr>
            <td>りんご</td>
            <td rowspan="3">150円</td>
        </tr>
        <tr>
            <td>もも</td>
        </tr>
        <tr>
            <td>みかん</td>
        </tr>
        <tr>
            <td>メロン</td>
            <td rowspan="2">1,000円</td>
        </tr>
        <tr>
            <td>すいか</td>
        </tr>
        <tr>
            <td>マンゴー</td>
            <td>1,500円</td>
        </tr>
    </table>
    <!-- ここまで -->

まずはりんごともも、みかんの値段を見てましょう。

値段が150円で3行分のセルが結合されていることがわかるかと思います。

これはりんごのセルから結合が開始しているので、りんごの後のtd要素にrowspan属性を指定して、値を「3」としています。

そして大事なこととしてそのあとのももとみかんの値段を表記するtd要素は記述しないのがルールです。

<td>もも</td>と<td>みかん</td>のあとにtd要素を記述してしまうと表のレイアウトが崩れてしまいます。

以下が追加した例になります。

See the Pen table要素の使い方（通常の表） by koutarou mori (@koutarou-mori) on CodePen.

このように不要なtd要素が表示されますので、記述は不要です。

このあとにメロンとすいかの値段のセルも結合してします。

メロンとすいかの2行分のセルを結合しているため、rowspan属性の値は「2」となります。

こちらについても<td>すいか</td>のあとのtd要素の記述は不要となります。

完成例のコードを紹介【列（横）のセル結合編】

先程ほどは行のセルの結合について解説しました。

今回は列のセルの結合パターンの表について解説していきます。

以下が完成例になります。

See the Pen table要素の使い方（colspan） by koutarou mori (@koutarou-mori) on CodePen.

colspan属性

colspan属性をtd要素に指定することで、列（横）のセルを結合させることができます。

値にはrowspan属性同様正の整数を指定します。

完成例のHTMLコードを見てみましょう。

    <!-- 表の作成はここから -->
    <table>
        <tr>
            <td>名前</td>
            <td>身長</td>
            <td>体重</td>
            <td>血液型</td>
            <td>上体起こし</td>
        </tr>
        <tr>
            <td>Aさん</td>
            <td>1m50cm</td>
            <td>60kg</td>
            <td>A</td>
            <td>30回</td>
        </tr>
        <tr>
            <td>Bさん</td>
            <td colspan="4">欠席のため測定なし</td>
        </tr>
        <tr>
            <td>Cさん</td>
            <td>1m67cm</td>
            <td>67kg</td>
            <td>AB</td>
            <td>38回</td>
        </tr>
    </table>
    <!-- ここまで -->

Bさんの「欠席のため測定はなし」の箇所にcolspan属性を指定しています。

名前以外の「身長」～「上体起こし」まで結合したいので値は「4」としています。

4つ分のセルを結合していますので、この後に続くtd要素は不要です。

まとめ：table要素で表を作成する方法

みつた

ここまでお疲れさまでした！最後におさらいです！

いかがでしたでしょうか。

まずは簡単な表の作成からスタートしていき、少しずつ理解を深めていきましょう。

次にセルの結合に挑戦していき、複雑な表を作っていくことがオススメです。