ความแตกต่างระหว่าง Cellpadding และ Cellspacing ในตาราง HTML

cellpadding และ cellspacing เป็นแอตทริบิวต์ของแท็ก <table> ที่ควบคุมช่องว่างแตกต่างกัน

ตารางเปรียบเทียบ

ตัวอย่างโค้ด

<table border="1" cellpadding="10" cellspacing="5">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

การแสดงผลแบบภาพ

┌─────────────┬─────────────┐   ← cellspacing (5px) ระหว่างเซลล์
│             │             │
│  Cell 1     │  Cell 2     │   ← cellpadding (10px) ระหว่างขอบ-เนื้อหา
│             │             │
├─────────────┼─────────────┤
│             │             │
│  Cell 3     │  Cell 4     │
│             │             │
└─────────────┴─────────────┘

ใน HTML5 / CSS แนะนำใช้ CSS แทน

แอตทริบิวต์ทั้งคู่ Deprecated (ล้าสมัย) ใน HTML5 ควรใช้ CSS:

/* แทน cellpadding */
td, th {
  padding: 10px;
}

/* แทน cellspacing */
table {
  border-collapse: separate;
  border-spacing: 5px;
}

/* หรือรวมขอบ (ไม่มี cellspacing) */
table {
  border-collapse: collapse;
}
td, th {
  padding: 10px;
}

สรุป

• Cellpadding = "Padding ภายในเซลล์" = ระหว่างขอบกับข้อความ
• Cellspacing = "Margin ระหว่างเซลล์" = ช่องว่างระหว่างเซลล์แต่ละช่อง
• ใช้ CSS padding และ border-spacing แทนในโปรเจกต์ใหม่