css table & django form

文本代码

form 包含 table (一般，不是必须)
如下图的table

django 自动生成的代码，层次结构如下

 table 包含 tbody
tbody 包含多个 tr
tr 包含 th和td

th 包含一个label
td 一般包含 input

但是如“性别”一栏，两个 radio 组成 ul
每个 li 包含一个 label，label 里面再包含 input

table的CSS

form 最好要设定宽度
table 宽度为 100%

字体不要粗体
form * { font-size: 16px; font-weight: normal;}

每一行的宽度和高度，设在 table cell (th, td)。不要设在 tr，并且 tr 不能设置 padding。

根据 Chris 的说法，table cell 不能设置 margin
这是有道理的，表格只有行高，两行之间有border，但是没有margin

宽度

方面，th td 独自设置宽度，但这个宽度并非最后的宽度

如上图，table width = 700, th width = 100, td width = 300
CSS 尽量将剩余的 300 按 th 和 td 的比例 1:3 分配给它们，所以最终
th width = 175, td width = 525 （以上计算为约等，实际上 th td 间还有 space）

如果 td padding-left 为 100
分配比例为 1:4

总结：可以设置 th, td 的宽度，以及 padding-left, padding-right。CSS 尽量将剩余的宽度按 th 和 td 的比例分配给它们

th            { width: 200px; text-align:right; }
td            { width: 300px; padding-left: 10px;}
padding-left 调整横向间距

高度

高度方面，每一行的高度，推荐设在 table cell (th, td)
因为 laytou 是由上往下，所以 css 一般会遵从我们的设置。但是所设的 height 也不一定为最终的高度。 CSS 要计算一个所谓的 minimum height。如果我们设的高度能容纳内容，那一般没有问题。

可以设置 padding-top, padding-bottom，这可以调整表格每行的间距。但是 height 也能完成类似任务，所以如果没有必要，就用 height 好了。特殊情况才考虑用 padding

table cell 之内的内容排版

值得庆幸的是，table cell 的content box 里的内容总是垂直居中的（ padding-top/bottom 不属于 content-box）。不用再设置 line-height = height 的 trick.

特殊情况，如上面 td-ul-li-lable-input
input vertical-align=baseline 不会垂直居中，改成 middle 就可以了

input

input 不继承 font-family

Django

django 的 form field 有id，也可以通过 widget 的attrib参数添加 class，这要利用起来。
有些特殊的元素要通过 id和class来 cssing