HTML colspan テーブルのセルを横につなげる

HTMLのcolspan属性で、テーブルのセルを横につなげるサンプルです。

目次

仕様 colspan 属性
サンプル テーブルの列を横につなぐ

colspan 属性

< td colspan="横につなげるセルの数" >
  • 指定したセルの数分、セルを横につなげます。
  • セルを横に3つつなげる場合、colspan="3"とします。
  • 横に繋がる部分のtdタグは、colspan属性のあるtdタグ以外は不要になります。
  • colは、columnsの略で列という意味です。

テーブルの列を横につなぐ

テーブルの上側のセルをcolspanで横につなげています。

colspan セルを横につなげる
赤 red 黄 yellow 青 blue

コード

上記サンプルのコードです。

<style>
table{border-collapse:collapse;}
table td{border:1px solid}
</style>
<table>
	<tr>
		<td colspan="3">colspan</td>
	</tr>
	<tr>
		<td>赤 red</td>
		<td>黄 yellow</td>
		<td>青 blue</td>
	</tr>
</table>

7行目は、colspan=3を指定しています。
7行目は、trタグ間にtdタグが1つあります。
10,11,12行目は、trタグ間にtdタグが3つあります。

以下はMDNのtd要素のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/td

関連の記事

HTML rowspan テーブルのセルを縦につなげる
HTML cellpadding テーブルのセル内の余白を指定する
HTML cellspacing テーブルのセルの間隔を指定する

△上に戻る