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

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

サンプル	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>１</td>
    <td>赤</td>
    <td>黄</td>
    <td>青</td>
    <td>２</td>
  </tr>
</table>

9行目は、colspanを指定しています。

テーブルの行と列をつなぐ

テーブルの行と列をcolspanとrowspanでつなげています。

テスト1	テスト2			テスト3
テスト4	テスト2			テスト5
テスト5	7	8	9	テスト10

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

<style>
  table{border-collapse:collapse;}
  table td{border:1px solid}
  #t1{background:#e0ffff}
</style>
<table style="width: 30%;">
  <tr>
    <td>テスト1</td>
    <td id="t1" colspan="3" rowspan="2">テスト2</td>
    <td>テスト3</td>
  </tr>
  <tr>
    <td>テスト4</td>
    <td>テスト5</td>
  </tr>
  <tr>
    <td>テスト5</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>テスト10</td>
  </tr>
</table>

9行目は、colspanとrowspanを指定しています。

colspanの列幅を指定する(colgroup)

列幅はcolgroupで指定します。

1	colspan　セルを横につなげる			3
１	赤	黄	青	２

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

<style>
  table{border-collapse:collapse;}
  table td{border:1px solid}
  #t1{background:#e0ffff}
</style>
<table style="width: 500px;">
  <colgroup>
    <col style="width:5%;">
    <col style="width:10%;">
    <col style="width:25%;">
    <col style="width:35%;">
    <col style="width:25%;">
  </colgroup>
  <tr>
    <td>1</td>
    <td id="t1" colspan="3">colspan　セルを横につなげる</td>
    <td>3</td>
  </tr>
  <tr>
    <td>１</td>
    <td>赤</td>
    <td>黄</td>
    <td>青</td>
    <td>２</td>
  </tr>
</table>

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