表はtable,tr,tdの3つの要素でできる
ホームページで表を作る時にはtable要素とtr要素、td要素をを使ってマークアップします。
子要素が多くなるので少しややこしい部分もありますが、開始タグと終了タグがセットになっているかを確認していけば大丈夫。
tableは様々な活用ができる要素なので理解できれば頼もしい要素です。
tableタグを使ったマークアップ
まず表にしたい部分全体をtable要素で囲みます。
次に行にしたい部分をtr要素で囲み、列にしたい部分をtd要素で囲みます。
表の作り方は以下の図のような構造になります。
実際のhtmlは以下のようになります。
この時に注意したいのがtd要素の個数です。
1行目は2列なのに、2行目は1列分のtd要素しかないと表が思ったように表示されません。
td要素は例外を除き、各行で同じ個数だけ必要となる事を覚えておいてください。
列を結合したい時は
列を合体させて下記のような表にしたい時にはtd要素に「colspan」を使います。
数字で2と入っている部分については、結合させる列の数が入ります。
上の図では2列を結合させたいので2が入っています。
行を結合したい時は
行を合体させて下記のような表にしたい時にはtd要素に「rowspan」を使います。
数字で2と入っている部分については、結合させる行の数が入ります。
上の図では2行を結合させたいので2が入っています。
まとめ
・表を作るときにはtable要素で全体を囲む
・行を増やしたいときにはtr要素を使い、子要素にtd要素で囲む
・td要素は各行で同じ個数書く
・列を結合したい時は「colspan」
・行を結合したい時は「rowspan」
