HTML بالعربي: مشروع: جدول بيانات متاح للوصول

هذا المشروع الثالث من سلسلة مشاريع مسار HTML. يبني على الجداول (Tables) وإمكانية الوصول — إن لم تكمل الدرسين بعد، راجعهما أولًا.

المتطلبات

ابنِ صفحة تعرض جدول أسعار باقات دورة "أساسيات تطوير الويب" بثلاث باقات: أساسية، احترافية، فريق. لكل باقة: السعر الشهري، عدد المسارات المتاحة، هل تشمل شهادة، وهل يشمل الدعم الفني المباشر.

الشرط الجوهري: الجدول يجب أن يمثّل بيانات جدولية حقيقية (صفوف وأعمدة ذات علاقة منطقية بينها) — لا حاوية لتخطيط بصري. راجع فقرة "متى لا تستخدمها" في درس الجداول قبل البدء؛ لو وجدت نفسك تستخدم الجدول لترتيب عناصر لا علاقة بينها كبيانات، فأنت تبني الصفحة الخطأ.

يجب أن يحتوي الجدول:

<caption> يصف محتوى الجدول بوضوح (ليس مجرد "جدول الأسعار" — بل شيء يفيد من يسمعه فقط بلا رؤية الجدول).
<thead> لصف رؤوس الأعمدة، و<tbody> لصفوف الباقات الثلاث، و<tfoot> لصف إجمالي أو ملاحظة ختامية (مثلًا "الأسعار شاملة الضريبة").
scope="col" على كل رأس عمود، وscope="row" على اسم كل باقة (أول خلية بكل صف بيانات).
استخدام واحد مبرَّر فعليًا لـ colspan أو rowspan — مثلًا صف عنوان فرعي يمتد فوق عمودين ("الدعم والشهادة")، لا استخدامًا عشوائيًا لإثبات أنك تعرف الخاصية.

نقطة البداية

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>أسعار باقات دورة أساسيات تطوير الويب</title>
</head>
<body>
  <main>
    <h1>باقات دورة أساسيات تطوير الويب</h1>

    <!-- ابنِ جدولك هنا: caption + thead + tbody + tfoot -->

  </main>
</body>
</html>

البنية المتوقعة

هيكل الجدول النهائي يجب أن يشبه هذا المنطق (القيم والتفاصيل الدقيقة لك):

<table>
  <caption>مقارنة أسعار وميزات باقات دورة أساسيات تطوير الويب الثلاث</caption>
  <thead>
    <tr>
      <th scope="col">الباقة</th>
      <th scope="col">السعر الشهري</th>
      <th scope="col">عدد المسارات</th>
      <th scope="col" colspan="2">الدعم والشهادة</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">أساسية</th>
      <td>15 دينارًا</td>
      <td>3 مسارات</td>
      <td>بلا شهادة</td>
      <td>بلا دعم مباشر</td>
    </tr>
    <tr>
      <th scope="row">احترافية</th>
      <td>35 دينارًا</td>
      <td>10 مسارات</td>
      <td>شهادة معتمدة</td>
      <td>دعم عبر البريد</td>
    </tr>
    <tr>
      <th scope="row">فريق</th>
      <td>90 دينارًا</td>
      <td>كل المسارات</td>
      <td>شهادة معتمدة</td>
      <td>دعم مباشر + جلسات</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5">الأسعار شاملة الضريبة، وقابلة للتغيير دون إشعار مسبق.</td>
    </tr>
  </tfoot>
</table>

🔑 لاحظ colspan="2" على رأس "الدعم والشهادة" في thead — يمتد فوق عمودين لأن العنوان فعلًا يجمع مفهومين متجاورين، ثم colspan="5" في tfoot لأن الملاحظة الختامية جملة واحدة تمتد على كامل عرض الجدول، لا بيانات عمود بعمود. كلاهما استخدام له سبب واضح، لا لمجرد "لأن الخاصية موجودة".

متطلبات الوصول

كل <th> (سواء رأس عمود أو رأس صف) يحمل scope صحيحًا — بلا استثناء.
<caption> موجود وواصف، لا فارغ ولا مجرد تكرار لعنوان الصفحة <h1>.
لا خلية مدموجة (colspan/rowspan) تترك غموضًا لقارئ الشاشة عن أي عمود/صف تتبعه بياناته — إن لم يكن الدمج واضح المعنى بصوت مسموع فقط، أعد التفكير فيه.
تباين لون كافٍ إن أضفت أي تلوين (خصوصًا لصف tfoot إن ميّزته بخلفية أفتح/أغمق).
الصفحة تحتوي <h1> واحدًا وصفيًا خارج الجدول نفسه.

قائمة التحقق

معايير الإتمام

المشروع مكتمل حين: الجدول يمرّ بكل بنود قائمة التحقق أعلاه، ويستطيع شخص يسمع الصفحة فقط (بدون رؤيتها) أن يجيب بثقة عن سؤال مثل "كم سعر الباقة الاحترافية؟" و"هل الباقة الأساسية تشمل شهادة؟" اعتمادًا فقط على ما يقرؤه قارئ الشاشة من caption وscope — لا على أي تخمين من الترتيب البصري.

إرشادات للحل المقترح

ابدأ بكتابة بيانات الباقات كجدول ورقي عادي (أعمدة/صفوف) قبل أي HTML — إن لم يكن منطقيًا على الورق، لن يصلحه الكود.
اكتب scope="row" على أول خلية بكل صف بيانات فقط حين تكون تلك الخلية فعلًا "عنوان" للصف (اسم الباقة هنا) — لا على كل خلية.
اختبر قرارك بشأن colspan/rowspan بسؤال: "لو حذفت الدمج وكررت العنوان في كل عمود بدلًا منه، هل يتغيّر المعنى؟" إن كانت الإجابة لا، فالدمج مبرَّر.
شغّل الصفحة فعليًا على مدقّق W3C — لا تكتفِ بالقراءة البصرية للكود؛ أخطاء scope/تداخل الجدول تمر بصمت في المتصفح ويلتقطها المدقّق فقط.

الأخطاء الشائعة

❌ وضع scope="col" على كل الخلايا بدل تمييزها بين col (لرؤوس الأعمدة) وrow (لرؤوس الصفوف) — يربك قارئ الشاشة بدل أن يساعده.
❌ استخدام colspan/rowspan لمجرد "تجميل" الشكل بلا علاقة بنيوية حقيقية بين الخلايا المدموجة.
❌ نسيان <caption> والاكتفاء بعنوان <h2> قبل الجدول — العنوان الخارجي لا يصل بالضرورة لسياق قارئ الشاشة داخل الجدول نفسه.
❌ اعتبار المشروع منتهيًا لأن الشكل صحيح بصريًا دون تجربة قراءته بترتيب المصدر وحده.

خلاصة

جدول بيانات متاح فعليًا = caption واصف + فصل thead/tbody/tfoot + scope دقيق على كل رأس + دمج خلايا له معنى حقيقي لا زخرفي. راجع مرجع وسم table لتفاصيل كل خاصية، ثم انتقل للمشروع التالي في السلسلة.