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

发布网友发布时间：2022-04-22 22:36

共2个回答

懂视网时间：2022-04-06 15:00

本篇文章主要讲述的就是关于css表格添加边框样式，这里还有关于css表格边框样式的总结，还有css表格边框的完整实例。接下来就让我们一起来看这篇文章吧

首先我们先看看如何利用css来给表格添加边框：

还记得我们在学html表格的时候也学过用border属性来给表格添加边框的，现在我们也是这样，我们来看下border在CSS样式中是如何使用的：

我们看下添加边框的属性：border-style属性。现在我们先来看个完整实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
table,td{border-style:dotted}
</style>
</head>
<body>
<table>
<tr><td>11</td><td>22</td></tr>
<tr><td>22</td><td>44</td></tr>
</table>
<table>
<tr><td>11</td><td>22</td></tr>
<tr><td>22</td><td>44</td></tr>
</table>
</body>
</html>

上面的这个代码你知道效果吗？我们一起来看看效果吧：

看着效果图大家应该都能明白吧，这里还是要解释下代码的用处：

border-style：定义了表格加边框（table表格的边框，如果在用table{}这个的话就会没有那么多线了，就只会出现边框线，中间的那些线都不会出现的，所以这里我加上了td标签，让它也在里面显示出线来）

dotted：dotted属性定义了点状边框，所以出现了这么多的点。（当然还有别的属性，也是显示边框的，我们一起来看下）

solid：solid属性定义实线边框

double：double属性定义双线边框

dashed：dashed属性定义虚线边框

看完这些大家应该都能明白吧，图中我只介绍了一种点状边框，还有双线边框还有虚线边框等，大家也可以一个一个的试试，看的出来也很明显的。

现在我们继续说说边框样式，当然还有几种样式，不然怎么能叫总结呢：

border-spacing 属性设置相邻单元格的边框间的距离

caption-side 属性设置表格标题的位置

今天就介绍两种属性把，加上上面的border-style 属性刚好就三种了。（推荐PHP中文网css学习手册栏目去学习更多css样式知识）

先看看border-spacing属性：

border-spacing属性设置相邻单元格的边框间的距离（length 水平间隔/length垂直间隔）

<style>
table,td{border-spacing:length}
</style>
</head>
<body>
<table>
<tr><td>11</td><td>22</td></tr>
<tr><td>22</td><td>44</td></tr>
</table>
<table>
<tr><td>11</td><td>22</td></tr>
<tr><td>22</td><td>44</td></tr>
</table>
</body>

和上图一样，但是这个设置的是垂直间隔，所以我们看到的可能不太一样，所以这里就没有效果图展示了，大家可以自己实践，最后还有个caption-side属性，这个是设置表格标题的位置，可以设置在上面也可以设置在下面。这样都可以的。

所以有了这几种属性还是挺方便的，好了，后面的知识我们以后再做介绍了。

今天的这篇关于css表格添加边框样式的总结的文章到这里就结束了（想学更多的CSS样式的知识，就到PHP中文网css学习手册栏目学习），有问题的同学可以在下面留言提问

【小编推荐】

如何利用css来设置文本的背景颜色？css设置背景颜色代码详解

css怎么设置无序列表？css的列表样式总结

热心网友时间：2022-04-06 12:08

一、只对表格table标签设置边框 - TOP

只对table标签设置border（边框）样式，将让此表格最外层table一个边框，而表格内部不产生边框样式。

案例详细如下：

1、对应css代码

2、对应html代码片段

<divclass="table-a"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">网址td><tdwidth="112">说明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS学习td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切图td>tr>table>div>

二、对td设置边框 - TOP

对table表格td设置边框样式，表格对象内td将实现边框样式，但中间部分td会导致出现双边框。

详细案例教程如下：

1、对应css代码

2、对应html源代码片段

<divclass="table-b"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">网址td><tdwidth="112">说明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS学习td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切图td>tr>table>

三、对table和td技巧性设置表格边框 - TOP

如上第二点，只对表格对象td设置单一边框样式，中间部分td与td标签之间就会出现双边框现象。

解决方法：对td只设置两个边的边框，对table也设置两个边的边框样式。

解释：对td设置左与上边框，这样td与td相邻就会只出现单一边框样式，这样就会出现表格右侧和下部没有边框，这个时候我们设置table右和下边框解决显示右侧和下侧td剩下未显示边框。

1、对应css代码：

2、对应html源代码片段：

<divclass="table-c"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">网址td><tdwidth="112">说明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS学习td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切图td>tr>table>

四、对table和td设置背景，实现完美表格边框 - TOP

1、基础设置

1）、先设置table css背景为红色

2）、设置table单元之间间距为1
使用DW软件辅助设置table表格单元间距为1，具体DW软件可视化操作步骤简要说明，首先（视图模式）选中表格后，对应DW软件编辑窗口底部会“属性”面板会出现对应table表格属性设置地方，我们将“间隔”填写为“1”。这个时候我们会看到table表格标签里cellspacing值为“1”（cellspacing="1"）。

借助DW软件设置表格单元之间间距

或

直接对

标签内cellspacing="1"即可，得到：

<tablewidth="400"border="0"cellspacing="1"cellpadding="0">

3）、设置table td背景为白色

2、css代码：

3、对应html源代码：

<divclass="table-d"><tablewidth="400"border="0"cellspacing="1"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">网址td><tdwidth="112">说明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS学习td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切图td>tr>table>div>

五、css table表格边框实现总结 - TOP

以上四种方式实现table表格边框样式方法，推荐使用第三和第四种方法来解决表格边框样式。希望DIVCSS5整理总结html table边框布局方法对大家有帮助并能掌握，平时需要时灵活运用。

全部频道

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