HTML表格边框变细的css样式

作者:分开不是尽头 | 创建时间: 2023-07-09
表格在HTML中很多情况的默认样式太难看,设计人员就需要自己设置,在这我和大家分享下表格边框变细的,适合css初学者。...
HTML表格边框变细的css样式

操作方法

首先新建表格,代码如下: <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>

在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>

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

温馨提示

border="1" 这个地方别把border="1" 写成border="0"
点击展开全文

更多推荐