科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道应用软件使用CSS处理表格边框样式化

使用CSS处理表格边框样式化

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

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

作者:builder.com.cn 2007年4月11日

关键字: Tony Patton 网站设计 网页设计 html CSS

  • 评论
  • 分享微博
  • 分享邮件

在本页阅读全文(共19页)

在以前的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: 外凸效果边框,和内凹效果相反。

    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章