從 HTML 表格中刪除邊框

1. 使用 border-collapse CSS 屬性從 HTML 表格中的單元格中刪除邊框
2. 將 CSS border 屬性設定為 none 以從 HTML 表格中刪除邊框

本文將介紹從 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>