HTML表格怎么设置边框样式

发布时间：2022-03-01 16:36:59 作者：iii
来源：亿速云阅读：239

本篇内容介绍了“HTML表格怎么设置边框样式”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

HTML表格怎么设置边框样式

对于边框的设置我们可以通过border属性来实现，比如给表格一个1px边框我们可以这样设置：

1	<table border="1px solid #ccc">

效果图：

HTML表格怎么设置边框样式

从上图我们可以发现这样设置只有表格的外边框才有，里面的单元格都无边框，所以我们也要给内部的单元格设置边框

table,table tr th, table tr td {

border:1px solid #ccc;

}

效果图：

HTML表格怎么设置边框样式

我们可以通过设置cellspacing（单元格间距）， cellpadding（单元格边距）以及border-collapse: collapse （边框合并）使表格的边框合并为一个单一的边框，这样使得表格更加美观该属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示使表格更加美化

<style>

table,table tr th, table tr td {

border:1px solid #ccc;

}

table{

width: 400px;

border-collapse: collapse;

}

</style>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

效果图：

HTML表格怎么设置边框样式

同样通过设置border属性还可以更改表格边框的颜色

“HTML表格怎么设置边框样式”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！

HTML表格怎么设置边框样式

相关阅读