📌 الجداول في HTML

🔹 ما هي الجداول؟

• الجدول Table عبارة عن صفوف (Rows) و أعمدة (Columns).

• بيتكون من مجموعة وسوم أساسية:

  • <table> → لبدء الجدول.

  • <tr> → Table Row = صف.

  • <td> → Table Data = خلية بيانات.

  • <th> → Table Header = خلية عنوان (رأس العمود).

🔹 الوسوم الأساسية للجداول

1. <table>

• الوسم الرئيسي اللي بيحتوي الجدول بالكامل.

• كل الصفوف (<tr>) والأعمدة (<td> و <th>) لازم تكون جواه.

2. <tr> (Table Row)

• بيحدد صف واحد داخل الجدول.

• كل صف يحتوي على خلايا بيانات <td> أو خلايا عناوين <th>.

✅ مثال:

3. <td> (Table Data)

• خلية بيانات عادية.

• تستخدم لعرض النصوص أو الصور أو حتى عناصر HTML أخرى.

✅ مثال:

4. <th> (Table Header)

• خلية عنوان (عادةً في الصف الأول).

• يتم عرضها بشكل عريض Bold ومركزة Centrered تلقائيًا.

✅ مثال:

🔹 مثال بسيط لجدول

🔎 النتيجة:

🔹 خصائص مهمة للجداول (قديمة ولكن لسه بتستخدم أحيانًا)

• border → لتحديد سمك الحدود.

• cellpadding → مسافة داخل الخلية (المسافة بين النص وحدود الخلية).

• cellspacing → مسافة بين الخلايا.

• width / height → حجم الجدول أو الأعمدة.

✅ مثال:

⚠️ ملاحظة: دلوقتي الأفضل استخدام CSS بدل الخصائص دي.

🔹 تقسيم الجدول (عناصر اختيارية)

• <thead> → رأس الجدول (عادةً يحتوي على <th>).

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

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

✅ مثال:

🔹 دمج الخلايا

• colspan → دمج أعمدة في خلية واحدة.

• rowspan → دمج صفوف في خلية واحدة.

✅ مثال:

🔎 النتيجة: العمودين (العمر + المدينة) اندمجوا تحت عنوان واحد “التفاصيل”.

🔹 ملخص

• <table> → بداية الجدول.

• <tr> → صف.

• <td> → خلية بيانات.

• <th> → خلية عنوان.

• تقدر تضيف تقسيمات (<thead>, <tbody>, <tfoot>) + دمج (colspan, rowspan).

• ممكن تنسق الجداول بشكل أجمل باستخدام CSS بدل الخصائص القديمة.