頭ん中 わかります。ものすごくよくわかる。
htmlのcolspanとrowspan、どっちがどっちだかいつもわからなくなって間違える。
— akiyan (@akiyan) 2010年11月12日
ということで迷ったときに思い出す方法の提案を。
ちょっと長い話になるけど、こういうものはイメージで覚えるのが一番なので映像を思い浮かべながらいきましょう。
colspan で覚えると楽そうです。実際よく使うのも colspan だし。個人的には。
colspan の “col” は “column” =「コラム / カラム」の略ですね。
col. コル。コラム。新聞や雑誌の「コラム」もこれです。
もともと column とは円柱のことで、新聞（英字新聞を想像してください）の欄も縦長に区切られていることから column と呼ばれるようになったんだと思いますたぶん。
はいここで英字新聞を想像してくださいよ。
さて column は縦長い記事で、それに対してどれだけの数をぶち抜くかを指定するのが colspan です。
英字新聞の column は縦長いやつですよね。これをぶち抜いて横方向に長い広告を想像してください。それが colspan です。広告の内容は自分の好きなもんでいいです。
というわけでこれが colspan="3"
■■■□□
□□□□□
□□□□□
□□□□□
□□□□□
新聞の最上段に3コラムぶち抜きの立派な広告を出せましたね。
コル。コラム。コルスパン。コラムをぶち抜く大広告。はいイメージイメージ。
逆方向のこれが rowspan="3" です。
■□□□□
■□□□□
■□□□□
□□□□□
□□□□□
「そんなことかよ」っていう気もしますけどこういうのはイメージです。いっぺん染みこませたらこっちのもの。
ついでにもうちょっとイメージを補強しときましょう。手のひらをいっぱいに広げてみてください。
このときの親指の先から小指の先までの長さのことを英語で “span” といいます。スパン。 colspan の span.
スパーンと広く広げましたか。これイメージで覚えようっていう話をしてるんだからこの際ダジャレでもなんでもいいんです。あと実際に身体動かしてやらないとダメですよ。
やってみましたか。はいもう英字新聞の上で指を広げてるイメージとつながりましたね。いくつの欄にまたがってましたか。4つぐらいでしょうか。 colspan="4" ですね。
えっと、繰り返しますが英字新聞です。HTML も table も colspan も全部英語。はいイメージイメージ。
