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

البنية الأساسية: <table>, <tr>, <td>

لبناء أبسط جدول ممكن، نحتاج إلى ثلاثة وسوم أساسية تعمل معاً:

• <table>...</table> (الجدول): الوسم الحاوي (Container) الرئيسي الذي يغلف الجدول بأكمله. وهو عنصر "كُتَلي" (Block-level).
• <tr>...</tr> (صف الجدول - Table Row): الوسم المستخدم لإنشاء "صف" أفقي داخل الجدول. لا يمكن وضع أي محتوى مباشر داخل <table> إلا وسوم الصفوف (أو وسوم الهيكلة التي سنراها لاحقاً).
• <td>...</td> (بيانات الجدول - Table Data): الوسم المستخدم لإنشاء "خلية" (Cell) داخل الصف. هذا هو المكان الذي نضع فيه المحتوى الفعلي (نص، صورة، رابط، إلخ). عدد وسوم <td> داخل الصف يحدد عدد "الأعمدة" (Columns) في ذلك الصف.

الهيكل المنطقي هو دائماً: <table> يحتوي على <tr>، و <tr> يحتوي على <td>.

مثال (1): جدول بسيط (البنية الأدنى)

هذا المثال يوضح أبسط جدول ممكن (جدول 2x2) باستخدام الوسوم الأساسية الثلاثة فقط. (ملاحظة: افتراضيًا، لا تظهر "الحدود" (Borders) في المتصفح إلا إذا تمت إضافتها بـ CSS).

خلايا الرأس مقابل خلايا البيانات (<th> vs <td>)

في المثال السابق، استخدمنا <td> لكل شيء، وهذا ليس دقيقاً من الناحية الدلالية (Semantic). الجداول عادة تحتوي على "صف رأس" (Header Row) أو "عمود رأس" (Header Column) يصف البيانات الموجودة تحته أو بجانبه.

• <th>...</th> (رأس الجدول - Table Header): يُستخدم هذا الوسم "بدلاً" من <td> لتعريف خلايا الرأس.

ما الفرق؟

1. دلالياً (الأهم): يُخبر المتصفح وقارئات الشاشة (Screen Readers) أن هذه الخلية هي "عنوان" لبقية العمود (أو الصف)، وليست مجرد "بيانات".
2. بصرياً (افتراضياً): تقوم المتصفحات تلقائياً بعرض النص داخل <th> بخط "عريض" (Bold) و "توسيط" (Center) لتمييزه.

إمكانية الوصول (Accessibility): عند استخدام <th>، يُنصح بشدة بإضافة الخاصية scope لتحديد ما يصفه هذا الرأس:

• <th scope="col">: هذا الرأس يصف "العمود" (Column) الذي يقع فيه (الأكثر شيوعاً).
• <th scope="row">: هذا الرأس يصف "الصف" (Row) الذي يقع فيه.

مثال (2): جدول يستخدم خلايا الرأس <th>

لاحظ كيف نستخدم <th> في الصف الأول لوصف الأعمدة، و <td> في الصفوف التالية للبيانات.

الهيكلة الدلالية: <thead>, <tbody>, <tfoot>

لزيادة تنظيم الجدول وفصل أجزائه منطقياً، توفر HTML ثلاثة وسوم هيكلية إضافية. هذه الوسوم "تغلف" وسوم الصفوف <tr>.

• <thead>...</thead> (رأس الجدول): يُستخدم لتجميع "صف أو صفوف الرأس" (التي تحتوي على <th>).
• <tbody>...</tbody> (جسم الجدول): يُستخدم لتجميع "صفوف البيانات" الرئيسية للجدول. (يمكن أن يحتوي الجدول على عدة وسوم <tbody> لفصل مجموعات البيانات).
• <tfoot>...</tfoot> (تذييل الجدول): يُستخدم لتجميع "صف أو صفوف التذييل" (مثل صفوف الإجمالي أو الملخصات).

لماذا نستخدمها؟

1. تنظيم دلالي: يجعل الكود مقروءاً وواضحاً، حيث يفصل الرأس عن الجسم عن التذييل.
2. تنسيق بـ CSS: يسهل تطبيق تنسيقات مختلفة (مثل خلفية رمادية لـ <thead>) على أقسام الجدول.
3. الطباعة: عند طباعة جدول طويل يمتد لعدة صفحات، يمكن للمتصفح تكرار <thead> و <tfoot> تلقائياً على رأس/أسفل كل صفحة مطبوعة.

القاعدة: يجب أن يأتوا بهذا الترتيب (أو <tfoot> قبل <tbody> في المعايير القديمة): <thead> أولاً، ثم <tbody>، ثم <tfoot>.

مثال (3): جدول دلالي كامل (المثال المقدم)

هذا المثال (المقدم من طرفكم) يوضح الاستخدام المثالي للوسوم الدلالية <thead> و <tbody> مع <th> و <td>.

عنوان الجدول: الوسم <caption>

لإضافة "عنوان" رسمي للجدول، لا يجب استخدام وسم <h1> أو <p> فوقه. بدلاً من ذلك، توفر HTML وسماً دلالياً مخصصاً: <caption>.

الوسم <caption>...</caption> يوضع "مباشرة" بعد وسم الفتح <table> (وقبل <thead>).

هذا يربط العنوان بالجدول دلالياً، وهو أمر ممتاز لقارئات الشاشة ولمحركات البحث لفهم سياق الجدول. افتراضيًا، يظهر النص في <caption> في المنتصف فوق الجدول.

مثال (4): جدول يتضمن <caption>

دمج الخلايا (1): الخاصية colspan (امتداد الأعمدة)

أحياناً نحتاج إلى جعل خلية واحدة (سواء <th> أو <td>) تمتد لتشغل مساحة "أكثر من عمود واحد".

نستخدم لهذا الغرض الخاصية colspan (اختصار Column Span).

الصيغة: <td colspan="2">...</td>

هذا يخبر المتصفح: "اجعل هذه الخلية تمتد لتشغل مساحة عمودين".

نقطة هامة: عند استخدام colspan="2" في صف يحتوي على 3 أعمدة، يجب أن يحتوي هذا الصف على "خليتين" فقط (<td>) بدلاً من 3. الخلية الأولى (المدمجة) + الخلية الثانية = 3 أعمدة.

مثال (5): استخدام colspan لدمج الأعمدة

في هذا المثال، لدينا رأس رئيسي "بيانات الاتصال" يمتد فوق عمودين فرعيين "الهاتف" و "البريد الإلكتروني".

(لاحظ أننا في هذا المثال استخدمنا rowspan أيضاً، والذي سيتم شرحه في القسم التالي).

دمج الخلايا (2): الخاصية rowspan (امتداد الصفوف)

بشكل مشابه، تُستخدم الخاصية rowspan (اختصار Row Span) لجعل الخلية تمتد "عمودياً" لتشغل مساحة "أكثر من صف واحد".

الصيغة: <td rowspan="2">...</td>

هذا يخبر المتصفح: "اجعل هذه الخلية تمتد لتشغل مساحة صفين".

نقطة هامة: عند استخدام rowspan="2" في خلية، فإن "الصف التالي" (<tr>) يجب أن يحتوي على "خلية واحدة أقل"، لأن الخلية الممتدة من الصف الأول قد شغلت مكانها بالفعل.

مثال (6): استخدام rowspan لدمج الصفوف

هنا، نريد عرض جدول مواعيد، حيث "الاجتماع" يستمر لمدة ساعتين (يشغل صفين).

(ملاحظة: لقد قمت بإزالة الخلية الأولى من الصف الثالث تماماً، لأن الخلية rowspan="2" من الصف الثاني شغلت هذا المكان).

الخصائص المُهملة (Deprecated) والتنسيق بـ CSS

كما ذكرنا في التحذير الأولي، كانت الجداول في HTML القديمة تحتوي على العديد من الخصائص لتنسيق "الشكل" (Styling). هذه الخصائص "جميعها" أصبحت مُهملة (Deprecated) في HTML5.

يجب تجنب استخدام ما يلي تماماً:

• border="1": (لإضافة حدود).
• cellpadding="10": (لإضافة حشو داخلي للخلية).
• cellspacing="0": (لإدارة المسافات بين الخلايا).
• width="500": (لتحديد عرض الجدول).
• align="center": (لمحاذاة الجدول).
• bgcolor="red": (لتغيير لون الخلفية).

لماذا؟
لأن كل هذه وظائف "تصميم" بحتة، ومكانها الصحيح هو ملف CSS، تطبيقاً لمبدأ "فصل الاهتمامات".

<!-- (طريقة خاطئة ومُهملة - لا تستخدمها) -->
<table border="1" cellpadding="10" cellspacing="0" width="100%">
    <tr bgcolor="#f0f0f0">
        <th>...</th>
    </tr>
</table>

<!-- (الطريقة الصحيحة: HTML للهيكل فقط) -->
<table style="border: 1px solid black; padding: 10px; border-collapse: collapse; width: 100%;">
    <tr style="background-color: #f0f0f0;">
        <th>...</th>
    </tr>
</table>
<!-- (ملاحظة: سيتم شرح CSS وخاصية "style" لاحقاً) -->