カスタム検索

テーブルのセルを結合

テーブルでは、別の行や列の複数のセルに対し、1つのセルを割り当てて(セルを結合させて)表示させることもできます。

横方向にセルを結合

セルを結合した様子は言葉で説明するより、見てもらった方が分かりやすいと思います。気になる方は、先に確認ページを参照してみてください。

colspan.html
<html>
    <head>
        <title>セルをまたぐ</title>
    </head>
    <body>
        <h2>セルをまたぐ</h2>
        <table border="1">
            <caption>従業員</caption>
            <tr>
                <th colspan="2">名前</th>
                <th>性別</th>
            </tr>
            <tr>
                <td>山田</td>
                <td>太郎</td>
                <td></td>
            </tr>
            <tr>
                <td>鈴木</td>
                <td>花子</td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

この例では、名前を性と名に分けていますが、項目名である「名前」のセルが下の2つのセル(性と名)に対し、横またがって(結合されて)表示されています。

このように、横方向にセルを結合するには、<td>あるいは、<th>タグにcolspan属性を指定します。値には結合するセルの数を指定します。

2つのセルを横方向に結合するため、結合されたセルの右にあるセルは、セル1つ分右にずれて表示されることになります。

そのため、上の例では、2列目を定義している<tr>が<td>を3つ分ネストしているのに対し、1列目を定義する<tr>は<td>を2つ分しかネストしないことになります。

縦方向にセルを結合

こちらも見てもらった方が分かりやすいと思いますので、先に確認ページを見てください。

rowspan.html
<html>
    <head>
        <title>セルをまたぐ その2</title>
    </head>
    <body>
        <h2>セルをまたぐ その2</h2>
        <table border="1">
            <caption>戸籍</caption>
            <tr>
                <th></th>
                <th></th>
                <th>性別</th>
            </tr>
            <tr>
                <td rowspan="2">山田</td>
                <td>太郎</td>
                <td></td>
            </tr>
            <tr>
                <td>花子</td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

今度は縦方向に結合します。「山田」のセルが縦に結合されて表示されています。

縦方向に結合するには<td>あるいは、<th>タグにrowspan属性を指定します。値にはcolspan属性と同様、結合するセルの数を指定します。

この例では縦に結合した分、最後の列を定義する<tr>で<td>を2つ分のネストに減らさなければなりません。

セルの結合は慣れないうちは少し分かりにくいかもしれません。いくつかの例を紹介しておきますので参考にしてみてください(入力例についてはブラウザでソースを表示させて確認してください)。

まとめ
  • colspan属性で横方向にまたぐ
  • rowspan属性で縦方向にまたぐ
CopyLeft 2017 Webデザインレッスン プライバシーポリシー サイト管理者に連絡