「表の中でセルを縦につなげたい！」そんな時はrowspanにお任せあれ
Webサイトを作っていると、一度は必ずぶつかるのが「テーブル（表）」の壁ですよね。特に、「項目を縦にドーンと長くつなげたい！」という場面、意外と多いはずです。
「Excelならマウスでドラッグして『セルを結合』ボタンを押すだけなのに、HTMLだとどうやるの…？」と頭を抱えてしまった経験はありませんか？大丈夫、安心してください。実はHTMLにも、その魔法のような機能がちゃんと用意されているんです。
それが今回紹介する`rowspan`（ロースパン）属性です。今日は、この属性を使って、きれいで読みやすいテーブルを作るコツを一緒に学んでいきましょう！
—
rowspanって、例えるなら「縦の貫通力」
`rowspan`を一言で表すと、「自分のいる場所から、下の階（行）に向かって領土を広げる」というイメージです。
例えば、お買い物リストを想像してみてください。「野菜」というカテゴリーがあって、その中に「キャベツ」「人参」「玉ねぎ」があるとします。「野菜」という文字をいちいち3回も書くのは面倒だし、見た目もスッキリしませんよね。そんな時、一番上の「野菜」セルを`rowspan=”3″`と設定してあげれば、その下の2行分も飲み込んで、縦に長い一つのセルになってくれるんです。
書き方のルールはこれだけ！
| カテゴリー | 品名 |
|---|---|
| 野菜 | キャベツ |
| 人参 | |
| 玉ねぎ |
—
ここでつまずく人が多い！「消えるセルの法則」
さて、ここからが一番大切なポイントです。初心者の方が一番「あれ？表示が崩れた！」と焦ってしまうのが、「結合した分、下の行のセルを削除し忘れる」というミスです。
先ほどのコードをもう一度見てみましょう。
1行目で「縦に3つ分使うよ！」と宣言したので、本来ならその下の行に書くはずだった「野菜」担当の`
もし、下の行にも律儀に`
`を書いてしまうと、ブラウザは「おっと、スペースがないのにセルが追加されたぞ？」とパニックを起こして、表の形がグニャグニャに崩れてしまいます。
「rowspanで結合した数だけ、次の行からはその列の記述を削る」。
この引き算の感覚さえ掴めれば、もうテーブルマスターへの道は開かれたも同然です！
—
実際に動かしてみよう
ご自身のPCでエディタを開いて、以下のコードを試してみてください。CSSで少しだけ枠線を足すと、構造がわかりやすくなりますよ。
| Aさん | 算数：80点 |
| 国語：90点 |
—
最後に：完璧を目指さなくても大丈夫
最初は「どこの列が消えるんだっけ？」と混乱して、何度もブラウザをリロードすることになるかもしれません。でも、それでいいんです。僕も駆け出しの頃は、表を書くたびに紙に図を書いて、指で数えながらHTMLを書いていました。
`rowspan`は、表をスッキリ見せるための「おもてなしの心」です。少しずつ慣れていけば、複雑な表もパズルのように組み立てられるようになりますよ。
もし崩れてしまっても、それは「パズルのピースをもう一つ減らしてみようかな？」というサイン。気負わずに、一つずつ紐解いていきましょうね。あなたのWeb制作ライフが、今日より少しだけ楽しくなりますように！
コメント