HTML - Table Padding & Spacing المسافة داخل خلايا الجدول

المسافة داخل خلايا الجدول (Padding) والمسافة بين الخلايا (Spacing) في HTML

في HTML، يمكننا التحكم في شكل خلايا الجدول عن طريق:

• Padding: المسافة داخل الخلية بين المحتوى وحدودها.
• Spacing: المسافة بين الخلايا المجاورة.

---

✅ استخدام خاصية cellpadding:

تُستخدم cellpadding لتحديد المسافة الداخلية داخل كل خلية.

<table border="1" cellpadding="10">
  <tr>
    <th>الاسم</th>
    <th>العمر</th>
  </tr>
  <tr>
    <td>محمد</td>
    <td>25</td>
  </tr>
</table>

⬅ تُضيف 10 بكسل من المسافة داخل كل خلية حول المحتوى.

---

✅ استخدام خاصية cellspacing:

تُستخدم cellspacing لتحديد المسافة بين الخلايا.

<table border="1" cellspacing="10">
  <tr>
    <th>الاسم</th>
    <th>الوظيفة</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>مصمم</td>
  </tr>
</table>

⬅ تُضيف 10 بكسل بين حدود كل خلية.

---

✅ استخدام CSS بدلاً من cellpadding و cellspacing:

<style>
  table {
    border-collapse: separate;
    border-spacing: 15px;
  }
  td {
    padding: 10px;
  }
</style>

<table border="1">
  <tr>
    <td>منتج 1</td>
    <td>100 جنيه</td>
  </tr>
</table>

⬅ باستخدام CSS يمكنك التحكم الكامل في تنسيق الجداول بشكل احترافي.

---

💡 ملاحظات:

• cellpadding وcellspacing هي خصائص HTML قديمة لكنها لا تزال مدعومة.
• الأفضل استخدام CSS لتنسيق الجداول لأنه أكثر مرونة وتحكمًا.
• border-collapse: collapse; في CSS يجعل الجداول بدون مسافات بين الخلايا.