Để tạo đường viền thu gọn trong HTML, hãy sử dụng thuộc tính CSS thu gọn đường viền. Thuộc tính này có thể có các giá trị sau:
| Giá trị thuộc tính | Mô tả |
|---|---|
| tách biệt | Các đường viền được tách ra |
| sụp đổ | Thao tác này sẽ thu gọn đường viền thành một đường viền duy nhất |
Đây là cách bạn có thể thêm,
Ví dụ
Bạn có thể thử chạy mã sau để tạo đường viền thu gọn với tính năng thu gọn thuộc tính:
<!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> Ví dụ
Bạn có thể thử chạy mã sau để tạo đường viền thu gọn với thuộc tính riêng biệt:
<!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>