綺麗なtableタグレイアウトには、幅を指定しない方がいい

HTMLを触り始めてから4、5年経過していますが、昨日まで知らなかったのでご紹介。

　今までtableタグには何らかの形（widthもしくはCSS）で幅を指定していたのですが、tableタグ自体に指定するより、thタグtdタグに指定した方がレイアウト的にかなり綺麗になるということに気づきました。

具体例

例えば、以下のようなテーブルがあるとしましょう。

これはtabel自体には幅を指定せずに、thとtdに幅を指定しています。

table自体に幅を指定してしまうと、例えばborderの太さによってはレイアウトが崩れてしまいますし、文章の長さによって簡単にレイアウトが崩れます。

デメリット

唯一のデメリットとしては、幅を揃えたいth、tdに対して、すべて厳密に幅を指定してやらないと、表示がおかしくなってしまうことです。

例えば以下は、2行目のthとtdに幅を指定していないため、表示がおかしくなっています。

1行目は幅を指定しているので、折り返されますが、2行目は1行になっているはずです。

スポンサード・リンク