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」

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

新潟県内地域別ホームページ制作実績

弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。
ホームページ制作・Webデザイン・インターネット戦略のご相談は、株式会社アテンドまで。

CONTACTお問い合わせ

ご相談やご質問、ご要望などございましたら、
お気軽にお問い合わせください。

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