HTML - Table Borders حدود الجداول

حدود الجداول (Table Borders) في HTML

في HTML، يمكنك إضافة حدود للجداول باستخدام خاصية border داخل الوسم <table> أو عن طريق CSS لتنسيق أكثر احترافية.

---

✅ استخدام خاصية border داخل وسم الجدول:

<table border="1">
  <tr>
    <th>الاسم</th>
    <th>العمر</th>
  </tr>
  <tr>
    <td>محمود</td>
    <td>30</td>
  </tr>
</table>

⬅ هذا المثال يُظهر جدولًا بحدود بسيطة عبر خاصية border="1".

---

🎨 تنسيق الحدود باستخدام CSS:

table, th, td {
  border: 1px solid black;
}

⬅ هذا الكود يجعل كل حدود الجدول (والخلايا) بلون أسود وسمك 1 بكسل.

---

📌 إزالة الفراغ بين الحدود باستخدام border-collapse:

table {
  border-collapse: collapse;
}

⬅ الخاصية border-collapse: collapse تدمج الحدود المتجاورة لجعلها تبدو كحد واحد فقط.

---

🧪 مثال كامل:

<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  th, td {
    padding: 10px;
    text-align: left;
  }
</style>

<table>
  <tr>
    <th>المنتج</th>
    <th>السعر</th>
  </tr>
  <tr>
    <td>حاسوب محمول</td>
    <td>5000 جنيه</td>
  </tr>
</table>

---

💡 ملاحظات:

• استخدام CSS يُعطيك تحكمًا كاملًا في شكل الحدود والألوان والتنسيق.
• تستطيع تخصيص حدود فقط لبعض الأعمدة أو الصفوف باستخدام th أو td فقط.