從 HTML 表格中刪除邊框

Subodh Poudel 2023年2月19日 2021年10月2日
  1. 使用 border-collapse CSS 屬性從 HTML 表格中的單元格中刪除邊框
  2. 將 CSS border 屬性設定為 none 以從 HTML 表格中刪除邊框
從 HTML 表格中刪除邊框

本文將介紹從 HTML 表格中去除邊框的方法。我們將學習在表格單元格中插入影象時刪除單元格的邊框。

使用 border-collapse CSS 屬性從 HTML 表格中的單元格中刪除邊框

我們可以使用 HTML 表格來插入影象。我們可以為表格中的元素分配類,並在 CSS 中定義類的屬性。這個方法幫助我們設定 td 元素的高度和寬度,並使用 background-image 屬性插入影象。因此,在每個 td 元素中,我們可以插入影象。以這種方式插入影象時,我們可以看到表格中每個單元格的邊框。我們可能想要刪除單元格和表格中的邊框,以使我們的影象看起來更好。為此,我們可以使用 CSS border-collapse 屬性。我們可以將屬性的值設定為 collapse,這樣單元格的邊框就會合並。這使單元格間距為 0。如果我們不使用 table 標籤中的 border 屬性,邊框將不會出現。

例如,在 HTML 中,編寫 <table> 標籤,然後在其中編寫 <tr> 標籤。在 <tr> 標籤內,編寫三個 <td> 標籤,並在第一、第二和第三類中編寫類 leftmiddleright。在 CSS 中,選擇 table 標籤並將 border-collapse 屬性設定為 collapse。然後一次選擇所有三個類別 leftmiddleright 並設定高度、寬度和背景影象。

在下面的示例中,我們建立了三個 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-widthborder-styleborder-color。當我們使用 border 屬性並將其設定為 none 時,將不會形成邊框。

例如,我們可以使用上面建立的表。我們可以使用 border 屬性稍微修改上面的 CSS 來實現我們的目標。我們可以從表中選擇 tabletrtd 標籤,並將 border 屬性設定為 none。通過這種方式,我們可以在 HTML 中去除表格的邊框和表格單元格的邊框。

示例程式碼:

table, tr, td{
 border:none;
}
<table>
 <tr>
 <td class="left"></td>
 <td class="middle"></td>
 <td class="right"></td>
 </tr> 
</table>
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn

相關文章 - HTML Table