tableタグで表を作る

  • このエントリーをはてなブックマークに追加
tableタグで表を作る

表は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」

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

CONTACTお問い合わせ

ホームページ制作に関するご質問などございましたら、
お気軽にお問い合わせください。

※ブログ記事に関するご質問はお答えしかねます。

TEL:0258-31-5005FAX:0258-37-7301

ホームページ制作やSEOのお悩みはぜひ弊社へご相談ください