迹忆客 专注技术分享

本文将介绍从 HTML 表格中去除边框的方法。我们将学习在表格单元格中插入图像时删除单元格的边框。

使用 border-collapse CSS 属性从 HTML 表格中的单元格中删除边框

我们可以使用 HTML 表格来插入图像。我们可以为表格中的元素分配类，并在 CSS 中定义类的属性。这个方法帮助我们设置 td 元素的高度和宽度，并使用 background-image 属性插入图像。因此，在每个 td 元素中，我们可以插入图像。以这种方式插入图像时，我们可以看到表格中每个单元格的边框。我们可能想要删除单元格和表格中的边框，以使我们的图像看起来更好。为此，我们可以使用 CSS border-collapse 属性。我们可以将属性的值设置为 collapse，这样单元格的边框就会合并。这使单元格间距为 0。如果我们不使用 table 标签中的 border 属性，边框将不会出现。

例如，在 HTML 中，编写 <table> 标签，然后在其中编写 <tr> 标签。在 <tr> 标签内，编写三个 <td> 标签，并在第一、第二和第三类中编写类 left、middle 和 right。在 CSS 中，选择 table 标签并将 border-collapse 属性设置为 collapse。然后一次选择所有三个类别 left、middle 和 right 并设置高度、宽度和背景图像。

在下面的示例中，我们创建了三个 td 元素并在这些元素中插入了图像。使用 border-collapse 属性，我们从单元格中删除了边框。我们可以删除 border-collapse 属性来查看单元格的边框如何使图像看起来像。

示例代码：

<table>
 <tr>
 <td class="left"></td>
 <td class="middle"></td>
 <td class="right"></td>
 </tr> 
</table>

table{
 border-collapse:collapse;
}
.left, .middle, .right
{
 width: 200px;
 height: 280px;
 background-image: url('https://loremflickr.com/212/280'); 
}

将 CSS border 属性设置为 none 以从 HTML 表格中删除边框

我们可以将 border 属性设置为 none 以从 HTML 表格中删除边框。该属性是不同边界属性的简写。这些不同的属性是 border-width、border-style 和 border-color。当我们使用 border 属性并将其设置为 none 时，将不会形成边框。

例如，我们可以使用上面创建的表。我们可以使用 border 属性稍微修改上面的 CSS 来实现我们的目标。我们可以从表中选择 table、tr 和 td 标签，并将 border 属性设置为 none。通过这种方式，我们可以在 HTML 中去除表格的边框和表格单元格的边框。

示例代码：

table, tr, td{
 border:none;
}

<table>
 <tr>
 <td class="left"></td>
 <td class="middle"></td>
 <td class="right"></td>
 </tr> 
</table>