HTML - Tables الجداول

الجداول (Tables) في HTML

تُستخدم الجداول في HTML لعرض البيانات في صفوف (rows) وأعمدة (columns). يتم إنشاء الجداول باستخدام الوسم <table>.

---

✅ العناصر الأساسية في الجدول:

الوسم	الوصف
<table>	يُستخدم لتعريف بداية ونهاية الجدول
<tr>	يمثل صفًا في الجدول
<th>	يمثل رأس العمود (خلية عنوان)
<td>	يمثل خلية بيانات

---

🧪 مثال على جدول HTML:

<table>
  <tr>
    <th>الاسم</th>
    <th>السن</th>
    <th>المدينة</th>
  </tr>
  <tr>
    <td>محمود</td>
    <td>25</td>
    <td>القاهرة</td>
  </tr>
  <tr>
    <td>منى</td>
    <td>30</td>
    <td>الإسكندرية</td>
  </tr>
</table>

⬅ الجدول يحتوي على صف عنوان (باستخدام <th>) وصفّين من البيانات.

---

🎨 تخصيص الجدول باستخدام CSS:

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #999;
  text-align: center;
  padding: 8px;
}

⬅ هذه التنسيقات تجعل الجدول مرتبًا وحدود الخلايا واضحة.

---

💡 ملاحظات:

• استخدم <th> للعنوانين لأنها تُعرض بخط عريض وتوسيط تلقائي.
• خاصية border-collapse تجعل الحدود تندمج بدون فراغات.
• يمكنك دمج خلايا باستخدام colspan و rowspan.