ความแตกต่างระหว่าง CSS border-collapse: collapse และ separate

บทนำ

คุณสมบัติ border-collapse ใน CSS ควบคุมการแสดงเส้นขอบ (Border) ของตาราง (<table>) ว่าจะรวมกันเป็นเส้นเดียว (collapse) หรือแยกกัน (separate)

ค่าที่เป็นไปได้

• collapse - รวมเส้นขอบของ Cell ที่ติดกันเป็นเส้นเดียว (Default ในบราวเซอร์สมัยใหม่หลายตัว)
• separate - แยกเส้นขอบของแต่ละ Cell มีช่องว่างระหว่างกัน (ค่าเริ่มต้นของ CSS Spec)

ตัวอย่างเปรียบเทียบ

<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: เส้นขอบจุด (dotted) และเส้นขอบทึบ (solid) รวมกันเป็นเส้นเดียวระหว่าง Cell
• Separate: เส้นขอบแต่ละ Cell แยกชัดเจน มีช่องว่างเล็กน้อย (ควบคุมด้วย border-spacing)

คุณสมบัติที่เกี่ยวข้อง (เมื่อใช้ separate)

• border-spacing - ระยะห่างระหว่าง Cell (เช่น border-spacing: 10px 5px)
• empty-cells - แสดง/ซ่อนขอบของ Cell ว่าง (show | hide)

แนวทางปฏิบัติ: ใช้ border-collapse: collapse สำหรับตารางข้อมูลทั่วไป เพื่อลักษณะสะอาดทันสมัย ใช้ separate เมื่อต้องการออกแบบขอบตกแต่งพิเศษ