📌 وسم <caption> في HTML

🔹 ما هو <caption>؟

• <caption> يُستخدم لإضافة عنوان وصفي للجدول.

• يساعد المستخدم يفهم الغرض من الجدول.

• له فائدة كبيرة في إمكانية الوصول (Accessibility) و SEO (لأن محركات البحث بتقرأه كتعريف للجدول).

🔹 مكان وسم <caption>

• لازم يكتب مباشرة بعد وسم <table> وقبل أي <tr>.

✅ التركيب:

🔹 مثال بسيط

🔎 النتيجة: يظهر عنوان “جدول معلومات الطلاب” فوق الجدول.

🔹 تنسيق <caption>

• بشكل افتراضي بيظهر فوق الجدول في المنتصف.

• ممكن تنسقه بالـ CSS:

• 

• الخاصية caption-side قيمها:

  • top (افتراضي) → العنوان فوق الجدول.

  • bottom → العنوان تحت الجدول.

🔹 استخدام عملي

🔹 ملخص

• <caption> = عنوان الجدول.

• يكتب مباشرة بعد <table> وقبل أي صفوف.

• افتراضيًا يظهر فوق الجدول، وتقدر تغير مكانه بالـ CSS (caption-side).

• مهم لإمكانية الوصول + تحسين SEO.

📌 تقسيم الجدول في HTML

🔹 الفكرة

الجداول الكبيرة محتاجة تقسيم واضح:

• <thead> → رأس الجدول (العناوين).

• <tbody> → جسم الجدول (البيانات الأساسية).

• <tfoot> → تذييل الجدول (المجاميع أو ملحوظات).

🔹 1. <thead>

• يحتوي على صفوف العناوين (عادةً <th>).

• يجي بعد <table> مباشرة (بعد <caption> لو موجود).

✅ مثال:

🔹 2. <tbody>

• يحتوي على الصفوف الرئيسية للبيانات.

• هو الجزء اللي غالبًا بيتكرر فيه الصفوف الكثيرة.

✅ مثال:

🔹 3. <tfoot>

• يحتوي على الخلاصة أو المجاميع.

• مثال: مجموع الأسعار أو ملاحظات.

✅ مثال:

🔹 مثال عملي كامل

🔎 النتيجة:

• العناوين في <thead> بخلفية فاتحة.

• البيانات في <tbody>.

• التذييل <tfoot> فيه “الإجمالي” بخلفية مختلفة.

🔹 ملخص

• <thead> = رأس الجدول (العناوين).

• <tbody> = جسم الجدول (البيانات).

• <tfoot> = تذييل الجدول (المجاميع أو الملاحظات).

• مفيدة في الجداول الكبيرة + التنظيم + سهولة التعامل مع CSS و JavaScript.