Khác biệt border-collapse: collapse vs separate

Hình ảnh minh họa sự khác biệt. Giá trị separate tách viền các cell:

Ví dụ so sánh

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

collapse: viền gộp chung. separate: viền tách biệt, có khoảng trống (border-spacing).