<table>

وسم الجدول <table>

وسم table يعرض بيانات ثنائية الأبعاد في صفوف tr وخلايا td برؤوس th — للبيانات الجدولية حصرًا.

الجدول لعرض بيانات يحمل تقاطع الصف والعمود فيها معنى: أسعار، مواصفات، نتائج. بنيته: table تحتوي thead (صف الرؤوس th) وtbody (صفوف البيانات tr وخلاياها td).

درس التاريخ المهم: قبل CSS كانت الجداول تُستخدم لتخطيط الصفحات كاملة — ممارسة انقرضت تمامًا؛ التخطيط اليوم لـ Flexbox وGrid، والجدول للبيانات فقط.

الصياغة

<table>
  <thead>
    <tr><th>العمود</th></tr>
  </thead>
  <tbody>
    <tr><td>البيانات</td></tr>
  </tbody>
</table>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<table border="1" style="border-collapse:collapse; width:100%">
  <thead>
    <tr style="background:#ede9fe">
      <th style="padding:8px">المسار</th>
      <th style="padding:8px">الدروس</th>
    </tr>
  </thead>
  <tbody>
    <tr><td style="padding:8px">HTML</td><td style="padding:8px">25</td></tr>
    <tr><td style="padding:8px">CSS</td><td style="padding:8px">26</td></tr>
  </tbody>
</table>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
colspan / rowspan (على الخلايا)	دمج خلية عبر عدة أعمدة أو صفوف
scope (على th)	scope="col" أو "row" يوضح لقارئات الشاشة ما يرأسه العمود/الصف

💡 نصائح عملية

لفّ الجدول بحاوية overflow-x:auto كي لا يكسر الصفحة على الجوال
border-collapse:collapse في CSS يجعل الحدود خطًّا واحدًا نظيفًا

⚠️ أخطاء شائعة

استخدام الجدول لتخطيط الصفحة — وظيفة Flexbox/Grid
إهمال th للرؤوس واستخدام td غامق — تخسر الدلالة والوصولية

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs