HTMLでテーブルのセルを結合する方法：colspanとrowspanの使い方
HTMLでテーブルのセルを結合するには、colspan属性とrowspan属性を使用します。それぞれの役割は以下の通りです。
- rowspan属性：セルが縦方向（行）にまたがる行数を指定します
- colspan属性：セルが横方向（列）にまたがる列数を指定します
どちらの属性も<td>タグ内に記述し、値は数値で指定します。例えば、rowspan="2"と指定すれば2行分、colspan="2"と指定すれば2列分のセルが結合されます。
例1：通常のテーブルを作成する
まず、HTMLで3行×3列のシンプルなテーブルを作成してみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<h1>見出し</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とrowspanでセルを結合する
次に、colspan属性とrowspan属性を使って、実際にセルを結合してみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<h1>見出し</h1>
<table>
<tr>
<th colspan="2"></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>上記のコードでは、1行目の<th>タグにcolspan="2"を指定して2列分のヘッダーセルを結合し、2行目の<td>タグにrowspan="2"を指定して2行分のセルを縦に結合しています。このように、colspanとrowspanを組み合わせることで、柔軟なレイアウトのテーブルを作成できます。
表示結果
-
HTMLのcolspan属性とは？td・th要素での使い方をわかりやすく解説
HTMLのcolspan属性は、テーブル内で1つのセルが横方向にまたぐ列数を指定するための属性です。<td>要素または<th>要素に対して使用することができます。 <td>要素のcolspan属性 <td>要素のcolspan属性は、データセルがまたぐ列数を定義します。例えば「colspan=2」と指定すると、そのセルは2列分の幅を持つようになります。合計金額の行など、複数列をひとつにまとめたい場合に活用できます。 構文は以下の通りです。 <td colspan="num"> 上記の「num」には、セルがまたぐ列
-
HTMLのcenterタグとは？中央揃えの基本とCSSでの代替方法を解説
HTMLの<center>タグは、テキストやコンテンツを水平方向に中央揃えで表示するための要素です。かつては見出しや段落、表などをページの中央に配置する際に広く使われていました。 注意：<center>タグはHTML5では廃止されており、最新のWeb制作では使用が推奨されません。中央揃えを実装したい場合は、CSSを使うことが公式にも提案されています。 centerタグが非推奨となった理由 <center>タグは、「文書の構造」と「見た目の装飾」を分離するというHTMLの設計思想に反するため、HTML5で廃止されました。レイアウトやデザインに関する指定はす