背景

表としては1列で表示しつつも、一部の行では2列で表示させたい事があった。
表のセルを結合させるという発想がすぐに出てこず、1つのセルの中にもう1つセルを作れないか考えたが、思うようにはいかなかった。
本記事では、以下画像のような表のセル同士を結合させて一部の行だけ2列に表示させた方法について記載します。

表のイメージ

全体のコード

以下が全体のコードを記載します。
今回は表の見出しとなる<th>タグは使用しておりません。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 表 -->
    <table border="1">
        <!-- 1行目 -->
        <tr>
            <td colspan="2">1st Column</td>
        </tr>
        <!-- 2行目 -->
        <tr>
            <td colspan="2">1st Column</td>
        </tr>
        <!-- 3行目 -->
        <tr>
            <td style="width: 75%;">1st Column</td>
            <td style="width: 25%;">2nd Column</td>
        </tr>
    </table>
</body>

</html>

コードの詳細

ポイントはCSSとして適用させているcolspan属性です。
colspan属性を使用する事でテーブルのセルを横方向に結合させる事ができます。
今回は表を2列で作成しており、1行目と2行目を横方向にセルを結合させています。

<!-- 表 -->
    <table border="1">
        <!-- 1行目 -->
        <tr>
            <td colspan="2">1st Column</td>
        </tr>
        <!-- 2行目 -->
        <tr>
            <td colspan="2">1st Column</td>
        </tr>
        <!-- 3行目 -->
        <tr>
            <td style="width: 75%;">1st Column</td>
            <td style="width: 25%;">2nd Column</td>
        </tr>
    </table>

colspan属性=結合するセルの数
のため、今回は2つのセルを横方向に結合させています。

<td colspan="2">1st Column</td>

補足
今回は表のセルを横方向にcolspan属性で結合させましたが、
rowspan属性を使用すると縦方向にセルを結合します。

参考

https://developer.mozilla.org/ja/docs/Web/CSS/column-span