HTML テーブルがはみ出さない為のタグと設定方法

テーブルタグの幅を整える方法

PHPなどのプログラムで表を作ってしまうと td タグ全てに style=”width:10%;” なんて書込む芸当が出来てしまいます。でもコードを見るとやっぱり美しくない。きれいなコードの方が後々のメンテナンスでも工数が少なくて済みます。

テーブルをはみ出させない為の決め事

1. テーブル自体のサイズを％で指定
2. 列ごとに％で幅を指定
3. 文字の折り返しを有効にする

「あれ？上手くいかない？？」
そんな時は大概、何処かで3番の折り返しをOFFにされてる事が多いです。

CSSでテーブルの幅を設定

テーブルそのもののサイズ指定を行うと、どんな画面になってもレイアウトを守ってくれます。

colgroupタグとcolタグで調整

colgroupタグを使えば全てのカラムの設定を一括で行えます。
デザイン変更など、修正が必要な時に1か所の修正で済むというのはありがたいですね。

折り返しの指示

この備忘録を書こうと思った切っ掛けです。
カラムサイズ指定したのにどうしてもズレる。指定されたサイズ(比率)にどうしてもならない。
原因は文字列の折り返しでした…。