HTMLのcolspanとrowspanのどっちがどっちか覚える方法

わかります。ものすごくよくわかる。

Twitter / Masahiro Akita

htmlのcolspanとrowspan、どっちがどっちだかいつもわからなくなって間違える。

なので、迷ったときに思い出す方法の提案を。
ちょっと長い話になるけど、
こういうものはイメージで覚えるのが一番なので
映像を思い浮かべながらいきましょう。

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 も全部英語。
はいイメージイメージ。

  • このエントリーをはてなブックマークに追加