前面的话
在CSS出现之前，table元素常常用来布局。这种做法在HTML4之后不再推荐使用。而现在有些矫枉过正，使用table展示数据都可能会被说不规范。本文将详细介绍HTML表格table。
table
【默认样式】
//IE7-浏览器不支持border-spacing
table{
border-collapse: separate;
border-spacing: 2px;
border: 1px solid gray;
}
【属性】
1、border（在HTML5中，border只能为"1"或" "）（HTML5已废弃）。
如下：
border="0"//没有边框
border="8"//8像素宽的边框
2、cellpadding（px或%）（HTML5已废弃）。规定单元格边界与单元格内容之间的间距。
3、cellspacing（px/%）（HTML5已废弃）。规定单元格之间的间距。
4、summary(HTML5已废弃)。表格内容的摘要。
5、width(HTML5已废弃)。表格宽度。
表格属性示例01
示例01结果显示
6、frame(IE7-浏览器不能正常显示)(html5已废弃)。
7、rules(IE7-浏览器不能正常显示)(html5已废弃)。
【样式】
1、border-spacing（可替代HTML属性cellspaing）（IE7不支持）。
【注意】只有当border-collapse值为separate时，该样式才有效。
2、empty-cells(IE7-不支持)。
如下：
empty-cells: hide 不在空单元格周围绘制边框和背景，类似于hidden效果。
empty-cells: show(默认) 在空单元格周围绘制边框和背景。
3、CSS实际上有两种截然不同的边框模型。按布局术语来说，如果单元格相互之间是分隔的，是分隔边框模型在起作用；另一种是合并边框模型，单元格边框会相互合并。
border-collapse:separate；
【注意】在分隔边框模型中，不能为行、行组、列和列组设置边框。
border-collapse:collapse；
【边框合并的规则】
a、某个合并边框的border-style为hidden，它会优先于所有其他合并边框。这个位置上的所有边框都隐藏；
b、某个合并边框的border-style为none，它的优先级最低；
c、宽边框优先于窄边框；
d、若宽度相同，double\solid\dashed\dotted\ridge\outset\groove\inset，优先级逐渐降低；
e、若样式也相同，cell\row\row group\column\column group\table，优先级逐渐降级。
4、table-layout
table-layout:auto //自动宽度布局
【自动布局的步骤】
a、对于一列中的单元格，计算最小和最大单元格宽度；
b、对于各一列，计算最小和最大列宽；
c、若单元格跨列，最小列宽之和要等于跨列单元格最小单元格宽度。
table-layout:fixed //固定宽度布局
【注意】对于表单元格的长文本来说，使用word-wrap或word-break来强制换行，使用text-overflow实现文本溢出控制都需要设置table-layout:fixed。
【固定布局的步骤】
a、width属性值不是auto的所有列元素会根据width值设置该列的宽度；
b、如果一个列的宽度为auto，则根据该单元格设置此列宽度，如果跨多列，则宽度平均分配；
c、如果列宽度仍为auto，则自动确定其大小，使其宽度尽可能相等。
【注意】使用固定宽度布局，用户代理可以更快地计算出表格的布局。
5、vertical-align
vertical-align: top;//顶端对齐
vertical-align: bottom;//底端对齐
vertical-align: middle;//中间对齐
vertical-align: baseline(默认);//基线对齐
【注意】vertical-align:sub\super\text-top\text-bottom应用到表格单元格时会被忽略。
行
【tr、th和td】
tr行 table row
th表头 table head
td表格数据 table data
【默认样式】
th{
padding: 1px;
text-align: center;
font-weight: bold;
}
td{
padding: 1px;
}
【属性】
1、colspan。规定单元格可横跨的列数。
2、rowspan。规定单元格可横跨的行数。
【注意】关于行的表格元素生成矩形框，这些框有内容、内边距和边框，但是没有外边距margin。表头呈现为居中的粗体文本。
网友评论