วิธีเพิ่มระยะห่างรอบขอบตาราง (Border Spacing) ใน HTML

ใช้ CSS property border-spacing เพื่อกำหนดระยะห่างระหว่างเซลล์ในตาราง ทำงานเมื่อ border-collapse: separate (ค่าเริ่มต้น)

ค่าที่ใช้ได้

• border-spacing: 20px - ระยะห่างทุกด้าน 20px
• border-spacing: 10px 20px - แนวนอน 10px, แนวตั้ง 20px
• ค่าเริ่มต้นคือ 0 (ไม่มีช่องว่าง)

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    table, td, th {
      border: 1px solid black;
      border-spacing: 20px;
      width: 300px;
    }
  </style>
</head>
<body>
  <h1>Our Technologies</h1>
  <table>
    <tr>
      <th>IDE</th>
      <th>Database</th>
    </tr>
    <tr>
      <td style="text-align:center">NetBeans</td>
      <td style="text-align:center">MySQL</td>
    </tr>
  </table>
</body>
</html>

ผลลัพธ์

จะเห็นช่องว่างระหว่างเซลล์ 20px ทุกด้าน

ข้อควรทราบ

• ไม่ทำงานหาก border-collapse: collapse
• แทน attribute cellspacing ที่ deprecated แล้ว
• ส่งผลต่อทุกเซลล์ในตาราง ไม่สามารถกำหนดต่อเซลล์ได้