我們使用 border-collapse 屬性在 HTML 中建立折疊邊框。 border-collapse 是一個 CSS 屬性，用於設定表格邊框應折疊為單一邊框或在 HTML 中與其自己的邊框分開。
Border-collapse 屬性有四個值：separate、collapse、initial、inherit。
如果將折疊作為 border-collapse 屬性的值傳遞，則表格的邊框將簡單地折疊為單一邊框。以下是在 HTML 中建立折疊邊框的語法。
border-collapse: collapse;
在下面給出的範例中，我們嘗試在 HTML 中建立折疊邊框 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Tables in HTML</h2>
<table style="width: 100%">
<tr>
<th>First Name </th>
<th>Job role</th>
</tr>
<tr>
<td>Tharun</td>
<td>Content writer</td>
</tr>
<tr>
<td>Akshaj</td>
<td>Content writer</td>
</tr>
</table>
</body>
</html>
以下是上述範例程式的輸出。
讓我們來看另一個例子，將折疊作為 border-collapse 屬性的值 -
<!DOCTYPE html>
<html>
<head>
<style>
table {border-collapse: collapse; }
table, td, th { border: 1px solid blue; }
</style>
</head>
<body>
<h1>Technologies</h1>
<table>
<tr>
<th>IDE</th>
<th>Database</th>
</tr>
<tr>
<td>NetBeans IDE</td>
<td>MySQL</td>
</tr>
</table>
</body>
</html>
如果我們透過傳遞separate作為border-collapse屬性的值來建立折疊邊框，則各個單元格將被包裹在單獨的邊框中。
border-collapse:separate;
在下面給出的範例中，我們嘗試在 HTML 中建立單獨的折疊邊框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,tr,th,td {
border:1px solid black;
border-collapse:separate;
}
</style>
</head>
<body>
<h2>Tables in HTML</h2>
<table style="width: 100%">
<tr>
<th >First Name </th>
<th>Job role</th>
</tr>
<tr>
<td >Tharun</td>
<td >Content writer</td>
</tr>
<tr>
<td >Akshaj</td>
<td >Content writer</td>
</tr>
</table>
</body>
</html>
以下是上述範例程式的輸出。
讓我們來看另一個例子，其中 split 會作為 border-collapse 屬性的值 -
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: separate;
}
table,
td,
th {
border: 1px solid blue;
}
</style>
</head>
<body>
<h1>Technologies</h1>
<table>
<tr>
<th>IDE</th>
<th>Database</th>
</tr>
<tr>
<td>NetBeans IDE</td>
<td>MySQL</td>
</tr>
</table>
</body>
</html>
如果將 initial 作為 border-collapse 屬性的值傳遞，它將被設定為其預設值，即單獨的。以下是語法，它使用 HTML 中的 border-collapse 屬性的初始屬性。
border-collapse:initial;
下面給出一個範例，它使用 HTML 中的 border-collapse 屬性的初始屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,tr,th,td {
border:1px solid black;
border-collapse:initial;
}
</style>
</head>
<body>
<h2>Tables in HTML</h2>
<table style="width: 100%">
<tr>
<th >First Name </th>
<th>Job role</th>
</tr>
<tr>
<td >Tharun</td>
<td >Content writer</td>
</tr>
<tr>
<td >Akshaj</td>
<td >Content writer</td>
</tr>
</table>
</body>
</html>
以上是如何在HTML中建立一個折疊邊框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
