الجداول

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

الغرض من الاستخدام

  • عرض البيانات المنظمة أو المقارنة.
  • عرض القوائم التي تتضمن عدة خصائص أو حقول.
  • دعم الصفحات الغنية بالبيانات، مثل التقارير ولوحات التحكم.
  • تمكين المستخدمين من استعراض القيم ومقارنتها بسهولة.

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

مكونات الجدول

  • صف العناوين – يحدد أسماء الأعمدة.
  • صفوف البيانات – تعرض سجلات البيانات.
  • الخلايا – تعرض القيم الفردية.
  • التذييل (اختياري) – يُستخدم لعرض الملخص، أو ترقيم الصفحات، أو الإجماليات.

السلوك التفاعلي

  • يمكن أن تدعم الصفوف حالات التحويم (Hover) لتحسين التركيز البصري.
  • يجب توضيح خيارات الفرز والإجراءات، إن وجدت، بشكل واضح.
  • ينبغي أن تكون العناصر التفاعلية داخل الخلايا سهلة الوصول والاستخدام.

إرشادات إمكانية الوصول

  • استخدم عناصر HTML الدلالية الخاصة بالجداول مثل <table> و<thead> و<tbody>.
  • احرص على ربط خلايا العناوين بخلايا البيانات بشكل صحيح.
  • وفّر تباينًا لونيًا كافيًا بين النصوص والخلفيات.
  • ادعم التنقل باستخدام لوحة المفاتيح في الجداول التي تتضمن عناصر تفاعلية.

السلوك الموصى به في التصميم المتجاوب

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