HTML表格边框变细的css样式

表格在HTML中很多情况的默认样式太难看，设计人员就需要自己设置，在这我和大家分享下表格边框变细的，适合css初学者。

操作方法

  • 01

    首先新建表格，代码如下： <table width="500" border="1"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table>

  • 02

    在table里加css样式，代码如下： <table width="500" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table>

  • 03

    样式注解： 单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间 单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离 border-collapse:collapse表示表格的两边框合并为一条

赞 (0)

相关推荐

  • 怎么用CSS设置html中的表格边框样式

    table表格边框如果不做设置,出来很不美观. 操作方法 01 一个普通的表格如下: 02 相关设置 单元格边距(表格填充)(cellpadding) -- 代表单元格外面距离,用于隔开单元格与单元格 ...

  • 使用CSS改变表格边框样式

    操作方法 01 用CSS改变表格边框样式,很实用的一种方法. 制作方法: 将下面的代码复制到<body>~</body>里,此为隐藏下边框 将下面的代码复制到<body& ...

  • css设置表格边框合并;css设置table边框合并

    table表格是制作前端常常需要使用到的一个标签,表格边框默认是不合并的,通过使用border-collapse:collapse可以对表格设置合并的边框效果. 操作方法 01 打开前端开发工具,新建 ...

  • Word2013中使用格式刷如何实现快速复制表格边框样式?

    使用"格式刷"工具可以方便地实现格式的复制.实际上,为了方便表格边框样式的设置,Office 2013也提供了一个和"格式刷"工具类似的"边框刷&qu ...

  • 如何给Excel表格设置表格边框和样式

    如何给Excel表格设置表格边框和样式

    我们在使用Excel表格编辑数据的时候,经常会需要设置表格的边框和样式,今天就跟大家介绍一下如何给Excel表格设置表格边框和样式的具体操作步骤.1. 首先打开电脑上的Excel软件.2. 然后找到想 ...

  • word中如何设置表格边框线的样式和颜色？

    在用word文档绘制表格的时候,有时候需要将表格设置为自己喜欢的颜色和线型.下面,就给大家讲讲设置表格线型和颜色的方法. 操作方法 01 首先,打开word文档,将需要调整的表格整体选中,如下图所示. ...

  • 在Frontpage 中定义网页CSS样式

    说明:目前Frontpage的最新版本是FrontpageXP(Frontpage 2003),本文是以Frontpage2000讲述的,但本文所描述的方法在FrontpageXP中基本上是适用的!另 ...

  • css样式兼容不同浏览器问题解决办法

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...

  • 在word2010中如何设置表格边框底纹

    在Word2010中，用户不仅可以在“表格工具”功能区设置表格边框，还可以在“边框和底纹”对话框设置表格边框，操作步骤如下所述： 第1步，打开Word2010文档窗口，在Word表格中选中需要设置边框 ...