使用css精准控制table边框与各单元格边框

本节目录：

l   css如何控制表格单元格内文字的对齐效果；

l   如何通过css设置表格的边框、th的边框、td的边框；

l   如何通过css实现这样的表格：表格只有上下边框，没有左右边框；单元格只有上下边框，没有左右边框；表格上下边框是实现，而内部表格行的上下边框都是虚线；

l   如何通过css实现这样的表格：表格第一行左起第一个单元格为空白单元格，没有背景色，也没有边框；表头行有背景色；非表头行的单元格无背景。

使用css实现单元格文字居中、靠左显示，主要设置单元格td的text-align属性，该属性有3种取值：left、center、right，分别代表靠左、居中、靠右对齐，如下例所示：

                                     text-align:center; border:1px solid #aaa; background:white">张三

                                     text-align:left; border:1px solid #aaa; background:white">张三

                             

HTML制作新手在用TABLE表格时，会碰到如何改变边线粗细的问题，因为默认的TABLE边线设置即使是1px 也是很粗的。常见的做法是利用 CSS2 的 "border-collapse:collapse;" 属性合并表格边框，并对 table 元素设置左边框和上边框，对 th 和 td 元素设置右边框和下边框，如下例所示：

编号	用户名	所属部门
1	张三	研发部
1	张三	研发部

实现的效果如下图所示：

如果要实现这样的表格：表格只有上下边框，没有左右边框；单元格只有上下边框，没有左右边框；表格上下边框是实现，而内部表格行的上下边框都是虚线。效果示意图如下图所示：

这样的表格效果该如何实现呢？其实知道了上面的原理后，只需将上例中的CSS样式改成如下即可：

         div,span,font,a,td{font-size:13px;}

         table{border-collapse:collapse; border-spacing:0; border-left:0px; border-top:1px solid #aaa; border-bottom:1px solid #aaa; background:#efefef;}

         th{border-right:0; border-bottom:1px dotted #aaa; padding:3px 15px; text-align:center; font-weight:bold; background:#efefef; font-size:13px;}

         td{border-right:0; border-bottom:1px dotted #aaa; padding:3px 15px; text-align:center; color:#3C3C3C; background:white}

我们看到：为了让表格没有左边框，只需将其border-left设为0；为了让单元格没有左右边框，只需将th和td的border-right设置为0；为了让表格行上下边框呈现虚线效果，只需设置th和td的broder-bottom属性。但是这样会出现一个问题：由于td的下边框被设置为虚线，那么表格的下边框也会呈现虚线，因为表格下边框就是最后一行各个单元格的下边框，为此，只需设置table的border-bottom属性，将其设置为实现效果。

接下来，如果要实现下面的效果（表格第一行左起第一个单元格为空白单元格，没有背景色，也没有边框；表头行有背景色；非表头行的单元格无背景。如下图所示）：

这样的效果该如何实现呢？我们可以纯粹利用单元格的属性来实现而不设置任何table的边框属性，如下所示：

	用户编号	所属部门
张三	1	研发部
李四	2	研发部

在这里，我们设置每一个单元格的border-top、border-right、border-bottom、border-left的属性来精确控制各个单元格的显示效果。

                            div,span,font,a,td{font-size:13px;}

                            table{border-collapse:collapse; border-spacing:0; border-left:1px solid #aaa; border-top:1px solid #aaa; background:#efefef;}

                            th{border-right:1px solid #888; border-bottom:1px solid #888; padding:3px 15px; text-align:center; font-weight:bold; background:#ccc; font-size:13px;}

                            td{border-right:1px solid #888; border-bottom:1px solid #888; padding:3px 15px; text-align:center; color:#3C3C3C;}