利用CSS设置细边框的表格

1、在右边的CSS样式面板中点击新建CSS规则按钮,如下图所示:

2、新建CSS规则的选择器类型为“标签(重新定义HTML元素)”,选择器名称为table,如下图所示:

3、在规则定义对话框中点击边框分类,然后设置边框颜色为黑色(#000),如下图所示:

4、这时我们在浏览器查看网页,发现表格的边框是比较粗的,我们还需要给CSS规则增加一项属性,因为规则对话框中没有该属性的设置,我们需要切换到代码视图,找到刚才设置的table规则,如下图所示:

5、在table规则中增加一项属性:border-collapse:collapse;,该属性可使表格的边框变细,如下图所示:

6、在页面中插入表格,将表格的边框设置为1,保存后,在浏览器查看网页就可以看到效果了,点击查看效果

7、本例中所定义的CSS样式规则如下:

<style type="text/css">
table {
  border-top-color: #000;
  border-right-color: #000;
  border-bottom-color: #000;
  border-left-color: #000;
  border-collapse:collapse;
}
</style>