لماذا لا يعمل margin: 0 في جدول HTML كما يعمل border-collapse؟

خاصية margin: 0 تستخدم لتحديد هوامش (margins) لعناصر HTML، وتعمل على تحديد المسافة بين العناصر والعناصر الأخرى في الصفحة.

ولكن في حالة جداول HTML، خاصية margin: 0 لا تعمل بنفس الطريقة التي تعمل بها في عناصر HTML الأخرى.

بل نستخدم خاصية border-collapse في جدول HTML، والتي تعمل على دمج حدود (borders) الخلايا المجاورة معًا، مما يؤدي إلى إزالة التباعد (spacing) الافتراضي بين الخلايا، ويعمل ذلك على تجنب ظهور التباعد الزائد ويمنح الجدول مظهرًا مرتب ومتجانس.

في حين، خاصية margin: 0 لا تعمل على تجاهل التباعد بين الخلايا في جدول HTML، وحين وضعها على حقول الجدول td فلن تجد لها تأثير، وعند وضعها على الجدول نفسه table ستجد أنه يبتعد عند العناصر الأخرى بمقدار الـ margin الذي قمت بوضعه وإليك مثال:

<style>
  table {
    border-collapse: collapse;
	margin: 10px
  }
  table td {
    border: 1px solid black;
	
  }
</style>

<table>
  <tr>
    <td>خلية 1</td>
    <td>خلية 2</td>
    <td>خلية 3</td>
  </tr>
  <tr>
    <td>خلية 4</td>
    <td>خلية 5</td>
    <td>خلية 6</td>
  </tr>
</table>

أولاً يجب فهم الفرق بين الخاصيتين حيث أن هناك اختلاف كبير بين خاصية margin و خاصية border-collapse عند تصميم جداول بلغة HTML.

• خاصية margin تضع هامش حول كامل الجدول. وهذا يعني أن الجدول ككل سينتقل إلى الداخل أو الخارج بمقدار القيمة المحددة لـmargin.
• في حين أن خاصية border-collapse تجعل الحدود الداخلية للخلايا تندمج في حد واحد. وهذا يزيل الفراغات الزائدة بين الخلايا.

فعند تحديد margin=0 للجدول، فهذا لن يؤثر على الفراغات بين الخلايا الفرعية td و th. فهذه الفراغات تتحكم بها خاصية الحدود border.

لكن عند تحديد border-collapse للجدول، سيتم دمج الحدود الداخلية للخلايا، مما يزيل الفراغات الزائدة بينها.

لذا فخاصية margin تؤثر على الجدول ككل، بينما خاصية border-collapse تؤثر على الفراغات بين الخلايا الفرعية.