【网站设计技巧】使用CSS处理表格边框样式化

2019-12-10

【网站设计技巧】使用CSS处理表格边框样式化

在以前的web开发栏目中,我介绍了不少处理html表格的方法,尽管现在使用表格来布局网页的方法已经不再时髦了,但是您依然可以使用表格来显示表列数据。

显示和样式化表格的方法有很多种,在这篇文章中,我将介绍使用CSS对表格边框进行样式化的方法。

链接

CSS2表格模型是基于HTML 4.01表格模型的。表格包含了一个可选的锚标记和单元格以及数据行,表格模型包含以下的元素:表格、锚、数据行、数据行组、数据列、数据列组和单元格。这篇文章将集中讲解表格中各个元素的边框处理方法。

边框

根据不同的需求,您可以对表格和单元格应用不同的边框。您可以定义整个表格的边框也可以对单独的单元格分别进行定义。CSS的边框属性可以指定边框的大小以及颜色和类型。以下的代码定义了宽度为5个像素的黑色实线边框:

TABLE { 5px solid black; }

除此以外,您还可以使用相同的语法为表格中单独的单元格分别指定边框属性。您可以使用以下的属性值来定义边框类型:

l none: 指定表格没有边框,所以边框宽度为0。

l dotted: 由点线组成的表格边框。

l dashed: 由虚线组成的表格边框。

l solid: 由实线组成的表格边框。

l Double: 由双实线组成的表格边框。

l Groove: 槽线效果边框。

l ridge: 脊线效果边框,和槽线效果相反。

l inset: 内凹效果边框。

l outset: 外凸效果边框,和内凹效果相反。

  • 上一篇:【网站设计技巧】Div+CSS网站设计的优点
  • 下一篇:企业网站设计需要做好哪些准备?
  • 新闻中心
    为何不同网站用同一SEO优化…

    为何不同网站用同一SEO优化方式,结果各不相同? 在SEO优化道路上,想要做出排名其实并不是很难,但是…

    聊聊网页制作中整体构造、页面…

    网页制作一之整体构造网页制作为什么需要整体构造?其实它就等于给网页制作一个造型,这里是指的是页面的整…

    详解网页设计的内容策划、版式…

    网页设计之内容策划网页设计前,首先应对网页设计的内容进行策划,这些内容策划内容:提供哪些服务?有哪些…

    做网站之各种兼容性及影响速度…

    做网站之各种兼容性及影响速度问题一、margin加倍问题,如果给一个块级元素同时加了float:left和margin-l…

    客户评价