HTMLテーブルの「セル結合」でつまずかない！colspanを優しく攻略しよう
Web制作を始めたばかりの頃、誰もが一度は「あれ、テーブルがなんだかガタガタになってる…？」という経験をするはずです。表組み（テーブル）は、Excelのように自由に線を引けるわけではなく、少し独特のルールがあるんですよね。
今回は、その中でも特に「横にセルを合体させる」`colspan`属性について、一緒に紐解いていきましょう。「難しそう…」なんて思わなくて大丈夫です。身近な例えを使いながら、パズルを組み立てるような感覚で解説しますね！
—
1. colspanって何者？：横に広がる「魔法の数字」
`colspan`（コールスパン）は、「このセル、右に向かって何個分をぶち抜いて広がる？」というのを決めるための属性です。「col」はColumn（列）、「span」は期間や広がりを意味します。
例えば、スーパーのレシートを想像してみてください。
- 左側の列には「商品名」
- 右側の列には「価格」
と書かれていますよね。でも、一番下の「合計金額」という項目は、商品名の欄と価格の欄をまたいで、ドーンと大きく一つにまとまっていたりしませんか？
あのような「横にまたぐ」動きを作れるのが、`colspan`なんです。
—
2. さっそくコードを書いてみよう
まずは、シンプルなテーブルを作ってみましょう。ここでは「3列あるテーブル」を基準にして、一番上のセルを3列分合体させてみます。
| 本日の特売品リスト | ||
|---|---|---|
| りんご | 100円 | 残りわずか |
| バナナ | 150円 | 在庫あり |
ここで注目してほしいポイント！
`colspan=”3″` を指定したセルは、「自分を含めて3列分」を占拠します。だから、その下の行では、本来3列あるべき場所がちゃんと埋まっているかを確認するのがコツです。
—
3. なぜテーブルが崩れるの？「足し算のルール」
初心者の頃によくある失敗が、「テーブルが崩れて表示される」という現象です。これ、実はパズルのピースが足りない（あるいは多すぎる）状態になっているだけなんですよ。
テーブルを作る時は、「すべての行で、合計の列数が一致していないといけない」という鉄則があります。
- 例：3列のテーブルを作りたい場合
- 1行目：`
` が3個（合計3）→ OK！ - 2行目：`colspan=”2″` のセルが1個 ＋ `
` が1個（2+1＝合計3）→ OK！ - 3行目：`colspan=”2″` のセルが1個だけ（2しかない！）→ 崩れる！
もしテーブルが崩れてしまったら、各行の「列の合計」を計算してみてください。「あれ、ここだけ数字が足りないな？」という箇所が必ず見つかるはずです。
—
4. 現場からのちょっとしたアドバイス
最後に、プロの現場でもよく気をつけていることをお伝えしますね。
1. 「やりすぎ」に注意！
複雑なテーブルは、スマホで見ると画面からはみ出したり、レイアウトが崩れたりしやすいです。最近のWeb制作では、無理に複雑なテーブルでレイアウトを組まず、必要に応じてCSS（FlexboxやGrid）を使うのがトレンドですよ。
2. アクセシビリティも忘れずに
スクリーンリーダー（視覚障がい者のための読み上げツール）を使っている方にとって、複雑に結合されたテーブルは構造が伝わりにくいことがあります。`scope`属性を使って「ここは見出しですよ」としっかり教えてあげることも、優しさの一つですね。—
まとめ：失敗しても大丈夫！
`colspan`は、最初は頭の中で計算するのが少し大変かもしれません。「右に広がるから…えっと、この行は残り2つ必要だよね」と、指を折りながらパズルを組む感覚で大丈夫です。
もし表示が崩れても、それは「ここを修正してね！」というHTMLからのサインです。一つずつピースを埋めていけば、必ずきれいに整います。
ぜひ、あなたのWebサイトでもこの「魔法の数字」を使って、見やすい表を作ってみてくださいね。応援しています！
タイトルとURLをコピーしました - 2行目：`colspan=”2″` のセルが1個 ＋ `
コメント