1. 使用css精准控制table边框与各单元格边框
本节目录：
l css如何控制表格单元格内文字的对齐效果；
l 如何通过css设置表格的边框、th的边框、td的边框；
l 如何通过css实现这样的表格：表格只有上下边框，没有左右边框；单元格只有上下边框，没有左右边框；表格上下边框是实现，而内部表格行的上下边框都是虚线；
l 如何通过css实现这样的表格：表格第一行左起第一个单元格为空白单元格，没有背景色，也没有边框；表头行有背景色；非表头行的单元格无背景。
使用css实现单元格文字居中、靠左显示，主要设置单元格td的text-align属性，该属性有3种取值：left、center、right，分别代表靠左、居中、靠右对齐，如下例所示：
| <html> <body> <table style="30%; border-collapse:collapse; border-spacing:0;"> <tr> <td style="text-align:center; border:1px solid #aaa; background:white">张三</td> <td style="text-align:left; border:1px solid #aaa; background:white">张三</td> </tr> </table> </body> </html> |
HTML制作新手在用TABLE表格时，会碰到如何改变边线粗细的问题，因为默认的TABLE边线设置即使是1px 也是很粗的。常见的做法是利用 CSS2 的 "border-collapse:collapse;" 属性合并表格边框，并对 table 元素设置左边框和上边框，对 th 和 td 元素设置右边框和下边框，如下例所示：
| <html> <head> <META http-equiv=Content-Type content="text/html; charset=UTF-8" />
<style type="text/css"> 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;} </style> </head>
<body> <table style=" 30%"> <tr> <th>编号</th> <th>用户名</th> <th>所属部门</th> </tr> <tr> <td>1</td> <td>张三</td> <td>研发部</td> </tr> <tr> <td>1</td> <td>张三</td> <td>研发部</td> </tr> </table> </body> </html> |
实现的效果如下图所示：
如果要实现这样的表格：表格只有上下边框，没有左右边框；单元格只有上下边框，没有左右边框；表格上下边框是实现，而内部表格行的上下边框都是虚线。效果示意图如下图所示：
这样的表格效果该如何实现呢？其实知道了上面的原理后，只需将上例中的CSS样式改成如下即可：
| <style type="text/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} </style> |
我们看到：为了让表格没有左边框，只需将其border-left设为0；为了让单元格没有左右边框，只需将th和td的border-right设置为0；为了让表格行上下边框呈现虚线效果，只需设置th和td的broder-bottom属性。但是这样会出现一个问题：由于td的下边框被设置为虚线，那么表格的下边框也会呈现虚线，因为表格下边框就是最后一行各个单元格的下边框，为此，只需设置table的border-bottom属性，将其设置为实现效果。
接下来，如果要实现下面的效果（表格第一行左起第一个单元格为空白单元格，没有背景色，也没有边框；表头行有背景色；非表头行的单元格无背景。如下图所示）：
这样的效果该如何实现呢？我们可以纯粹利用单元格的属性来实现而不设置任何table的边框属性，如下所示：
| <html> <body> <table style="30%; border-collapse:collapse; border-spacing:0;"> <tr> <th style="border:0; background:white;"></th> <th style="border:1px solid #aaa; background:#efefef">用户编号</th> <th style="border:1px solid #aaa; background:#efefef">所属部门</th> </tr> <tr> <td style="border-bottom:1px solid #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; border-top:1px solid #aaa; background:white">张三</td> <td style="border-bottom:1px solid #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; background:white">1</td> <td style="border-bottom:1px solid #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; background:white">研发部</td> </tr> <tr> <td style="border-bottom:1px solid #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; background:white">李四</td> <td style="border-bottom:1px solid #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; background:white">2</td> <td style="border-bottom:1px solid #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; background:white">研发部</td> </tr> </table> </body> </html> |