HTMLでテーブルの列を結合する方法｜colspan属性の使い方を解説
HTMLでテーブルの列を結合（マージ）するには、<td>タグにcolspan属性を使用します。この属性を指定することで、隣接するセル同士を横方向にまとめることができます。
例えば、4行4列のテーブルがある場合でも、colspan属性を使えば、2つや3つのセルを簡単に結合できます。
例1：基本となるテーブルを作成する
まずは、colspan属性を使う前の状態として、3行3列のシンプルなテーブルをHTMLで作成してみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
出力結果
例2：colspan属性で列を結合する
次に、colspan属性を使って実際に列を結合してみましょう。以下のコードでは、2行目の最初の2つのセル（列）が結合されます。
ポイントは、<td colspan="2">と指定することで、そのセルが2列分の幅を持つようになる点です。結合した分だけ、同じ行内の<td>タグの数を減らす必要があるので注意しましょう。
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
出力結果
まとめ
HTMLでテーブルの列を結合したい場合は、<td>タグや<th>タグにcolspan属性を指定します。値に「2」を設定すれば2列分、「3」を設定すれば3列分のセルを結合できます。なお、行方向（縦）にセルを結合したい場合は、rowspan属性を使用します。用途に応じて両者を使い分けることで、柔軟なテーブルレイアウトを実現できます。
-
HTMLの<col>タグの使い方！span属性でテーブルの列スタイルを一括設定
HTMLの<col>タグとは？ HTMLの<col>タグは、テーブルの各列（カラム）に対してスタイルやプロパティをまとめて設定するための要素です。<col>要素は単体では機能せず、必ず<colgroup>要素の中に配置して使用します。 このタグを使うことで、行ごとのセルに個別にスタイルを指定することなく、列単位で背景色や幅などを一括制御できます。その結果、コードがすっきりし、メンテナンス性も向上します。 <col>タグの主な属性 span：<col>要素が適用される列の数を指定します。たとえば「span=2」と記述する
-
HTMLのcolspan属性とは？td・th要素での使い方をわかりやすく解説
HTMLのcolspan属性は、テーブル内で1つのセルが横方向にまたぐ列数を指定するための属性です。<td>要素または<th>要素に対して使用することができます。 <td>要素のcolspan属性 <td>要素のcolspan属性は、データセルがまたぐ列数を定義します。例えば「colspan=2」と指定すると、そのセルは2列分の幅を持つようになります。合計金額の行など、複数列をひとつにまとめたい場合に活用できます。 構文は以下の通りです。 <td colspan="num"> 上記の「num」には、セルがまたぐ列