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

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

目次

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

colspan 属性

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

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

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

テスト  colspan セルを横につなげる テスト 

コード

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

<style>
  table{border-collapse:collapse;}
  table td{border:1px solid}
  #t1{background:#e0ffff}
</style>
<table style="width: 70%;">
  <tr>
    <td>テスト1</td>
    <td id="t1" colspan="3">colspan セルを横につなげる</td>
    <td>テスト2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>赤</td>
    <td>黄</td>
    <td>青</td>
    <td>2</td>
  </tr>
</table>

9行目は、colspan=3を指定しています。id="t1"は4行目のCSSで水色を指定しています。
9行目に対応するtdの列は14~16行目です。
8~10行目のtdタグは3つです。13~17行目のtdタグは5つです。

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

関連の記事

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

△上に戻る