從 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>
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