วิธีสร้างขอบตารางแบบรวม (Collapsed Border) ใน HTML

ใช้ CSS property border-collapse ควบคุมการแสดงขอบตาราง มี 2 ค่า:

ค่า	คำอธิบาย
`separate`	ขอบแยกกัน (ค่าเริ่มต้น) - มีช่องว่างระหว่างเซลล์
`collapse`	รวมขอบเป็นเส้นเดียว - ไม่มีช่องว่าง

ตัวอย่าง: 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

<style>
  table { border-collapse: separate; }
  table, td, th { border: 1px solid blue; }
</style>

ข้อควรทราบ

collapse ทำให้ตารางดูทันสมัย สะอาดตา เหมาะสำหรับ data table
separate ใช้ร่วมกับ border-spacing ได้
แทน attribute border และ cellspacing ที่ deprecated แล้ว