Dreamweaver怎样制作table细线表格边框CSS样式
作者:温州网站建设   发布时间:2016-09-01  浏览:

Dreamweaver怎样制作table细线表格边框CSS样式,平时我们在用Dreamweaver CC制作网页的时候经常会用到表格规范一些数据,但是默认的表格边框比较粗,不够美观,那么我们怎么才能快速的制作细线表格边框哪。下面我们通过CSS内嵌样式的方式来制作细线表格边框。

Dreamweaver怎样制作table细线表格边框CSS样式

平时我们在用Dreamweaver CC制作网页的时候经常会用到表格规范一些数据,但是默认的表格边框比较粗,不够美观,那么我们怎么才能快速的制作细线表格边框哪。下面我们通过CSS内嵌样式的方式来制作细线表格边框。

Dreamweaver怎样制作table细线表格边框CSS样式

1、
 
首先打开Dreamweaver CC创建一个表格,边框粗细为1像素,单元格边距和间距为零。
 
2、
Dreamweaver怎样制作table细线表格边框CSS样式
我们点实时视图看预览的表格边框比较粗
 
3、
Dreamweaver如何制作table细线表格边框CSS样式
我们在IE浏览器和Chrome浏览器中预览也是粗线边框。那么怎么修改成细线表格哪。
Dreamweaver如何制作table细线表格边框CSS样式
在table标签里面添加一个style内嵌样式
Dreamweaver如何制作table细线表格边框CSS样式
在设计器窗口中选中table表格,在CSS设计器中选择内嵌样式table,点击属性边框项
Dreamweaver如何制作table细线表格边框CSS样式
把border-collapse属性值设置为collapse
Dreamweaver如何制作table细线表格边框CSS样式
把border-width属性值设置为thin
Dreamweaver如何制作table细线表格边框CSS样式
把border-style属性值设置为solid
Dreamweaver如何制作table细线表格边框CSS样式
勾选显示集,看我们为table标签CSS内嵌样式设置这3个属性
Dreamweaver如何制作table细线表格边框CSS样式
当然也可以手写代码
Dreamweaver如何制作table细线表格边框CSS样式
点击实时视图,看表格变成细线边框了
Dreamweaver如何制作table细线表格边框CSS样式
选择多种预览方式观察一下
Dreamweaver如何制作table细线表格边框CSS样式
看在IE浏览器和Chrome浏览器中均显示为细线边框
 
 
推荐阅读:

Dreamweaver制作table细线表格边框《图文教程》

分享到:QQ空间新浪微博腾讯微博人人网微信
产品服务

欣网网络的小伙伴们随时为您待命