colspan属性は、表（テーブル）内の th要素、td要素で、この属性を指定したセルから指定された数だけ右方向にセルをまたいで表示します。
セルをまたぐ“前”のサンプル
| A1 | B1 | C1 |
| A2 | B2 | C2 |
| A3 | B3 | C3 |
セルがまたいだ“後”のサンプル
| A1 | ||
| A2 | B2 | C2 |
| A3 | B3 | C3 |
よくやる間違いのサンプル
| A1 | B1 | C1 | ||
| A2 | B2 | C2 | ||
| A3 | B3 | C3 | ||
カンの良い方は、見た瞬間にお気づきだと思いますが、消し忘れですね。
エクセルなどのように「セルの結合」とは違います。この colspan属性は、あくまでも「何列またいで表示するのか」を指定します。なので、２つ目のサンプルのように表示させたい場合は、セルとなる td要素を１つだけにしなければなりません。
一般的にセルをまたいだ表（テーブル）を作成する場合は、以下のような手順になると思います。
この３番目の手順を忘れてしまうと、３つ目のサンプルの状態になってしまいます。
では、実際の HTML表記でも確認してみてください。ここでは、表（テーブル）の縦横方向の感じがつかみやすいように td要素をあえて横に並べています。
セルをまたぐ“前”のサンプルのソース
<table>
<tbody>
<tr>
<td>A1</td><td>B1</td><td>C1</td>
</tr>
<tr>
<td>A2</td><td>B2</td><td>C2</td>
</tr>
<tr>
<td>A3</td><td>B3</td><td>C3</td>
</tr>
</tbody>
</table>
セルをまたいだ“後”のサンプルのソース
<table>
<tbody>
<tr>
<td colspan="3">A1</td>
</tr>
<tr>
<td>A2</td><td>B2</td><td>C2</td>
</tr>
<tr>
<td>A3</td><td>B3</td><td>C3</td>
</tr>
</tbody>
</table>
よくやる間違いのサンプルのソース
<table>
<tbody>
<tr>
<td colspan="3">A1</td><td>B1</td><td>C1</td>
</tr>
<tr>
<td>A2</td><td>B2</td><td>C2</td>
</tr>
<tr>
<td>A3</td><td>B3</td><td>C3</td>
</tr>
</tbody>
</table>
このような感じで、消し忘れてしまうと想定していたものとは違うおかしな形の表（テーブル）になってしまいますので、ご注意ください。
上にも書きましたが、ここでは、表（テーブル）の縦横方向の感じがつかみやすいように td要素をあえて横に並べています。しかし、一般的には td要素を縦に並べることの方が多いと思います。そうなってくると縦横のセルの数などをしっかり確認しておく必要があります。
セルをまたぐ“前”のサンプルのソースで td要素を縦に並べた場合
<table>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
</tbody>
</table>
セルをまたいだ“後”のサンプルのソースで td要素を縦に並べた場合
<table>
<tbody>
<tr>
<td colspan="3">A1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
</tbody>
</table>
消し忘れによるミスもありますが、消しすぎによるミスも注意したいところです。
セルを消しすぎたサンプル
<table>
<tbody>
<tr>
<td colspan="2">A1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
</tbody>
</table>
上の「セルがまたいだ“後”のサンプル」の colspan属性の値を「2」に変更してみました。これを表示させてみると、
セルを消しすぎたサンプル
| A1 | ||
| A2 | B2 | C2 |
| A3 | B3 | C3 |
やはり形がおかしなことに、セルが１つ足りません。当然、セルを付け足すのですが、セルの位置関係にも注意が必要です。
セルの位置関係を考えるサンプル
<table>
<tbody>
<tr>
<td colspan="2">A1</td>
<td>B1</td>
</tr>
<tr>
<td colspan="2">A2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
</tbody>
</table>
このサンプルでは、１行目と２行目を colspan属性でセルを横に２列分またがせています。
この「セルの位置関係を考えるサンプル」を見ていただいた際に、１行目と２行目の違いにお気づきでしょうか？
１行目のセル
<td colspan="2">A1</td>
<td>B1</td>
「A1」セルの次のセルだから、「B1」が来ています。
２行目のセル
<td colspan="2">A2</td>
<td>C2</td>
「A2」セルの次のセルなのに、「C2」が来ています。
これを表示してみます。
セルの位置関係を考えるサンプル
| A1 | B1 | |
| A2 | C2 | |
| A3 | B3 | C3 |
いかがでしょうか？ソースの状態で見たときと、実際にブラウザでレンダリング（表示）させた時には違いが出てくることを感じ取って頂けたでしょうか？
ここの表（テーブル）のように簡単、シンプルなものであれば、深く考えずとも見ただけですぐに気付き、正しく記述できると思いますが、複雑な表（テーブル）を作成したい場合には悩むことがあるかもしれません。基本的な位置関係が理解できれば、そう難しくはありませんのでいろいろな形の表を作ってみてください。
セルの位置関係を考えるサンプル
| A1 | C1 | |
| A2 | C2 | |
| A3 | B3 | C3 |
やっぱり、こっちの方が自然な気がします。
練習でこんな感じの表（テーブル）を作ってみませんか？
| A1 | C1 | |
| A2 | B2 | |
| A3 | B3 | C3 |
なお、縦方向にセルをまたぎたい場合は、rowspan属性で下方向にまたぐセルの数（行数）を値に指定します。