الجداول في HTML: th وtd وcaption وتنظيم البيانات

إنشاء جدول HTML مفهوم على الهاتف وتقنيات المساعدة

الجداول مناسبة للبيانات التي تربط صفوفًا وأعمدة بعلاقات واضحة، مثل المقارنة بين خصائص أو عرض نتائج. لا تستخدمها لمجرد ترتيب عناصر الصفحة بصريًا؛ فالتخطيط الحديث ينجز ذلك عبر CSS، بينما قد يربك الجدول المستخدم عندما لا تكون هناك علاقة حقيقية بين الخلايا.

اربط البيانات برؤوسها

في جدول بسيط، يساعد استخدام th في الصف الأول أو العمود الأول على توضيح معنى الخلايا التالية. أما الجداول المعقدة ذات مجموعات الرؤوس المتعددة فقد تحتاج إلى علاقات headers وid مناسبة، أو إلى إعادة تصميمها كي تصبح أبسط. لا تترك رأس العمود فارغًا إذا كان المستخدم يحتاجه لفهم القيم.

التعامل مع الشاشات الصغيرة

الجداول العريضة قد تسبب تمريرًا أفقيًا. لا تصغّر الخط إلى درجة يصعب قراءتها؛ بدلاً من ذلك، اسمح بتمرير الجدول داخل حاوية واضحة، أو اعرض كل سجل كبطاقة إذا بقيت العلاقات مفهومة. احتفظ برؤوس الأعمدة متاحة أثناء قراءة البيانات، ولا تخفِ أعمدة مهمة دون وسيلة للوصول إليها.

مراجعة جودة الجدول

1. أضف caption عندما يساعد على فهم موضوع الجدول.
2. استخدم th للرؤوس وtd للبيانات، ولا تعتمد على الخط العريض وحده.
3. تأكد من اتساق عدد الخلايا وعلاقاتها بين الصفوف.
4. اختبر التكبير والتنقل بلوحة المفاتيح وقارئ شاشة عند الإمكان.
5. تحقق من أن الجدول يقدم معلومة فعلية ولا يكرر الفقرات نفسها دون إضافة.

راجع دليل WAI للجداول ومرجع table في MDN عند التعامل مع بيانات أكثر تعقيدًا.

اختيار عرض بديل للجداول على الشاشات الضيقة

ليس كل جدول عريض بحاجة إلى تصغير الخط. إذا كانت العلاقات بين الأعمدة مهمة، يمكن وضع الجدول في حاوية تسمح بالتمرير الأفقي مع إشارة واضحة، مع الحفاظ على الرؤوس. أما إذا كان كل صف يمثل سجلًا مستقلًا، فقد يكون تحويل السجلات إلى بطاقات أكثر وضوحًا، بشرط عدم فقدان العلاقة بين اسم الحقل وقيمته.

تجنب الجداول كوسيلة تخطيط

استخدام جدول لتوزيع أجزاء الصفحة يخلط بين العرض ومعنى البيانات وقد يربك تقنيات المساعدة. استخدم CSS Grid أو Flexbox للتخطيط، واحتفظ بعناصر table للبيانات التي تحتاج إلى صفوف وأعمدة مترابطة. هذا الفصل يجعل التصميم المتجاوب أسهل في الصيانة.

اختبر الرؤوس والقراءة

عند التنقل بين الخلايا، ينبغي أن يعرف المستخدم معنى القيمة وعلاقتها برأس الصف أو العمود. إذا كان الجدول يحتوي على أكثر من مستوى من الرؤوس، ففكر في تبسيط البيانات أو تحديد العلاقات صراحةً. لا تستخدم لون الخلفية وحده لتمييز نوع الخلية، ولا تحذف معلومات مهمة في العرض المحمول دون بديل.

مراجعة نهائية

• الجدول يعرض بيانات فعلية لا مجرد تخطيط.
• الرؤوس مسماة وتشرح محتوى الخلايا.
• التمرير على الهاتف واضح ولا يخفي أعمدة مهمة.
• يمكن قراءة البيانات مع تكبير النص.

راجع دليل WAI للجداول ومرجع caption في MDN.

جودة البيانات أهم من تنسيق الجدول

قبل كتابة جدول، حدد السؤال الذي سيساعد القارئ على الإجابة عنه. إذا كانت الأعمدة لا تقارن خصائص متقابلة أو كانت الصفوف لا تمثل سجلات متجانسة، فقد تكون القائمة أو الفقرات أوضح. اختر رؤوسًا قصيرة ومحددة، ووضّح الوحدات، ولا تترك القيم الرقمية بلا سياق.

تأكد من الاتساق

استخدم تنسيقًا موحدًا للتواريخ والوحدات والأرقام، ووضح معنى القيم المفقودة. لا تستخدم خلية فارغة بمعانٍ مختلفة دون شرح، ولا تعتمد على اللون وحده لتوضيح الحالة. إذا كان الجدول يعرض مقارنة، فاشرح المعيار الذي يجعل الخيار مناسبًا لحالة معينة بدل ترك القارئ يستنتج ذلك وحده.

اختبر القراءة على الأجهزة المختلفة

تأكد من أن المستخدم يستطيع الوصول إلى كل الأعمدة المهمة على الهاتف، وأن النص لا يصبح صغيرًا جدًا. إذا احتجت إلى تمرير أفقي، اجعل ذلك واضحًا ولا تحجب بداية الصف أو رأس العمود. راجع دليل WAI للجداول قبل نشر جداول ذات رؤوس متعددة.

جعل الجداول مفهومة بصريًا وللتقنيات المساعدة

الجداول مناسبة للبيانات التي توجد بينها علاقة صفوف وأعمدة، مثل مقارنة مواصفات أو عرض نتائج. لا تستخدمها لتقسيم تخطيط الصفحة؛ فذلك يربك ترتيب القراءة ويصعب تكييف المحتوى مع الشاشات الصغيرة. ابدأ بتحديد ما الذي تمثله كل خانة، ثم أضف رؤوس أعمدة واضحة، واستخدم رؤوس صفوف عندما يحتاج القارئ إلى معرفة السياق الذي تنتمي إليه القيمة.

أضف caption ووصفًا عند الحاجة

يوفر عنصر caption عنوانًا أو وصفًا موجزًا للجدول، ويكون مفيدًا عندما لا يكفي النص المحيط لفهم غرضه. لا تكرر العنوان حرفيًا إذا لم يضف شيئًا، ولا تستخدم caption لدفن شرح طويل. إذا كان الجدول معقدًا أو يحتوي على مجموعات متعددة من الرؤوس، فقد يحتاج إلى بنية إضافية أو شرح قبل الجدول وبعده حتى يستطيع القارئ تفسير العلاقات.

حافظ على قابلية الاستخدام على الهاتف

الجداول العريضة قد تتجاوز عرض الشاشة. اختر الأعمدة التي يحتاجها القارئ فعلًا، واسمح بالتمرير الأفقي داخل حاوية محددة عندما يكون ذلك أنسب من ضغط النص إلى حجم غير مقروء. لا تخفِ أعمدة مهمة بصمت على الهاتف؛ إذا اختلف المحتوى المعروض، وضح ذلك واختبر ما إذا كانت المقارنة ما زالت ممكنة. حافظ على تباين الحدود والرؤوس دون الاعتماد على اللون وحده.

تحقق من الترميز الدلالي

استخدم thead وtbody عند ملاءمتهما، واربط الخلايا برؤوس مناسبة. في الجداول البسيطة، تكفي غالبًا رؤوس أعمدة واضحة مع scope مناسب. أما الجداول المعقدة، فراجع الحاجة إلى معرفات وعلاقات headers، لكن لا تضف سمات ARIA دون فهم أثرها. اختبر الجدول بترتيب قراءة خطي، وتأكد أن المعلومات المهمة لا تضيع عند نسخ النص أو استخدام قارئ شاشة.

راجع دليل WAI للجداول ومرجع MDN لعنصر table. الهدف هو جعل العلاقة بين البيانات واضحة، لا مجرد تحسين مظهر الحدود.

اختبارات عملية للجداول الطويلة والمعقدة

إذا كان الجدول يحتوي على عدة مجموعات من الأعمدة أو رؤوس متعددة المستويات، اختبر ما إذا كان القارئ يستطيع ربط كل قيمة بعنوانها الصحيح. قد يحتاج الجدول المعقد إلى وصف يشرح بنيته قبل عرضه، أو إلى تقسيمه إلى جداول أصغر يسهل مقارنتها. لا تضف سمات headers وid إلا عندما تحل مشكلة ارتباط فعلية، وتأكد من أن المعرفات فريدة.

اختبر النسخة الضيقة

على الهاتف، تحقق من إمكانية الوصول إلى كل عمود مهم ومن عدم تداخل النص أو اختفائه. إذا استخدمت حاوية قابلة للتمرير، فاجعل ذلك واضحًا واختبر التنقل داخلها بلوحة المفاتيح. لا تحول الجدول إلى بطاقات بطريقة تفقد العلاقة بين الصفوف والأعمدة من دون بديل يوضح نفس المعلومات.

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