HTMLの豆知識2

HTML

参考になるURLがありましたのでメモします。
また、個人のメモとしてページの一部を引用させていただきました。

同じwidth=200でもセル内の文字によって幅が違う

http://okwave.jp/qa/q1729772.html

※60px、320px、200pxで合計は580pxになりますが、cellspacingとborder分を加えると、1+1+1+60+1+1+1+320+1+1+1+200+1+1+1＝合計で604pxになってしまいます。
全体で580pxと指定されているため、それを超えた分はブラウザ側が勝手に、セルの幅を狭めることで対応しているのだと思います。
⇒対応：border・cellspacing・ついでにcellpaddingも0pxで指定します。

※tableに580をふったら、3列あれば、2列にしか幅を設定しない。
　もしくは3列に幅を設定しテーブルには幅を設定しないのが正しいやりかたでしょう。
あとセルの幅は、colgroupを使うとより確定しやすいようです

<table>
<colgroup width="60">
<colgroup width="320">
<colgroup width="200">
<tr><th>【Ａ列】</th><th>【Ｂ列】</th><th >【Ｃ列】</th></tr>
・・・</table>

※＜COLGROUP＞タグは縦列を構造的な意味でグループ化。
　対し、＜COL＞タグは縦列をグループ化しない。
※COLGROUPやCOLは、＜TABLE＞内の＜CAPTION＞より後＜thead＞より前に置いてください。
■COLGROUPについて⇒　http://www.htmq.com/html5/colgroup.shtml
■活用例⇒　http://honttoni.blog74.fc2.com/?tag=colgroup%E8%A6%81%E7%B4%A0