Hình ảnh sau đây chứng minh sự khác biệt giữa thu gọn và tách biệt. tách biệt giá trị của biên giới sụp đổ thuộc tính ngăn cách các đường viền của các ô:
Ví dụ
Bạn có thể thử chạy mã sau để hiểu sự khác biệt giữa thu gọn biên giới tách biệt và sụp đổ giá trị:
<html>
<head>
<style>
table.one {
border-collapse:collapse;
}
table.two {
border-collapse:separate;
}
td.a {
border-style:dotted;
border-width:2px;
border-color:#000000;
padding: 20px;
}
td.b {
border-style:solid;
border-width:2px;
border-color:#333333;
padding:20px;
}
</style>
</head>
<body>
<table class = "one">
<caption>Border Collapse</caption>
<tr><td class = "a"> India</td></tr>
<tr><td class = "b"> Australia</td></tr>
</table>
<br />
<table class = "two">
<caption>Border Separate</caption>
<tr><td class = "a"> India</td></tr>
<tr><td class = "b"> Australia</td></tr>
</table>
</body>
</html>