tableタグの使い方について

tableタグ、行を表すtrタグ、見出しセルを表すthタグ、セルを表すtdタグを併用して、一つの表を作る事が出来ます。

シンプルな表

例えば、下図の様な表を作る場合、下記の様に表記します。

WS000008

 

上一行が見出しになっている表

また、下図の様に、上一行を見出しとした場合、下記の様に表記します。

WS000009

セルを結合

一つ一つのセルは、colspan、及びrowspanを使う事で、結合する事が出来ます。使う場合は、セルの数が合う様にいらないセル分のtd、thを消さないといけません。

 

colspanで、横に結合する場合、下記の様に表記します。

スクリーンショット 2014-02-26 1.26.23

 

rowspanで、縦に結合する場合、下記の様に表記します。

スクリーンショット 2014-02-26 1.28.19

複雑な表を作る

colspan、rowspanを使うと下記の図の様な、複雑な表も作成する事が出来ます。

WS000011

まとめ

複雑な表を作る時は、まずcolspanもrowspanも入っていない(結合されていない)、表をまず最初に作って、少しずつ結合しながら、いらないtd、thを消していくとやりやすいと思います。