أنماط تصميم الجدول على الويب

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

كان من المحتم أن تدعم الويب عرض البيانات بتنسيق جدولي. تقدم جداول HTML البيانات الجدولية بطريقة دلاليّة ومناسبة من الناحية الهيكلية. ومع ذلك ، فإن الأنماط الافتراضية في جداول HTML ليست بالضبط أكثر الأشياء الجمالية التي رأيتها على الإطلاق. اعتمادًا على التصميم المرئي المطلوب ، كان مطلوبًا بعض الجهد في واجهة CSS لتجميل تلك الجداول. قبل عقد من الزمان ، نُشر مقال بعنوان "أفضل 10 تصميمات لجدول CSS" في مجلة Smashing ، ولا يزال يتلقى عددًا كبيرًا من الزيارات حتى يومنا هذا.

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

خيارات CSS فقط

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

لسوء الحظ ، بدون مساعدة JavaScript لبعض التلاعب في DOM على واجهة إمكانية الوصول ، لدينا فقط عدد قليل من خيارات CSS فقط. لكن بالنسبة لمجموعات البيانات الصغيرة ، فإنها غالبًا ما تكون كافية.

الخيار الأول: لا تفعل شيئًا

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

ربما تكون المشكلة التي تواجهك هي وجود مساحة كبيرة جدًا على الشاشات العريضة ، لذلك قد يكون من المستحسن "تغطية" أقصى عرض للطاولة بأقصى max-width مع تركه يتقلص حسب الضرورة على شاشة ضيقة.

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

الخيار 2: نمط التمرير

كتب David Bushell أسلوبه في الجداول المتجاوبة في عام 2012 ، والذي تضمن استدعاء overflow والسماح للمستخدمين بالتمرير لرؤية المزيد من البيانات. يمكن للمرء أن يجادل بأن هذا ليس حلاً سريع الاستجابة تمامًا ، ولكن من الناحية الفنية ، فإن الحاوية تستجيب لعرض منفذ العرض.

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

تأتي هذه التقنية لعمل ظلال التمرير من Roma Komarov و Lea Verou وهما يتفوقان على أفكار بعضهما البعض لخلق السحر. إنه يتوقف على استخدام تدرجات متعددة (خطية وشعاعية) كصور خلفية على العنصر المحتوي ، واستخدام background-attachment: local لوضع الخلفية بالنسبة لمحتوياتها.

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

قد يكون خيار التمرير الآخر هو قلب رؤوس الجدول من تكوين الصف إلى تكوين العمود ، أثناء تطبيق التمرير الأفقي على محتويات عنصر <tbody> . تستفيد هذه التقنية من سلوك Flexbox لتحويل صفوف الجدول إلى أعمدة.

من خلال تطبيق display: flex على الجدول ، فإنه يجعل كلا من <الرأس <thead> و <tbody> كلاهما مرنين ، يتم وضعهما افتراضيًا بجانب بعضهما البعض على نفس الخط المرن.

نحن أيضًا نجعل عنصر <tbody> حاوية مرنة ، مما يجعل جميع عناصر <tr> الموجودة داخله مرنًا للأطفال في سطر واحد مرن أيضًا. أخيرًا ، يجب أن يتم تعيين عرض كل خلية في الجدول على block بدلاً من table-cell الافتراضية.

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

يرش على بعض جافا سكريبت

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

بالإضافة إلى ذلك ، هناك عدد من نصائح تجربة المستخدم عندما يتعلق الأمر بتصميم جداول البيانات من Andrew Coyle ، بما في ذلك ميزات مثل ترقيم الصفحات والفرز والتصفية وما إلى ذلك (الميزات التي تتطلب بعض JavaScript لتمكينها).

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

صفوف إلى كتل ، مع إصلاح إمكانية الوصول

على حد علمي ، جاءت تقنية جدول البيانات المتجاوبة هذه من مقالة CSS-Tricks "جداول البيانات المستجيبة" بقلم كريس كويير في عام 2011. ومنذ ذلك الحين تم تكييفها وتوسيعها من قبل العديد من الآخرين.

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

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

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

يمكننا تحقيق هذا التأثير عبر الهوامش التلقائية في سياق تنسيق مرن. إذا قمنا بتعيين خاصية العرض لكل عنصر <td> على مرن ، لأن العناصر الزائفة تنشئ مربعات كما لو كانت عناصر فرعية مباشرة لعنصرها الأصلي ، فإنها تصبح عناصر فرعية مرنة لـ <td> .

بعد ذلك ، يتعلق الأمر بتعيين margin-right: auto على العنصر الزائف لدفع محتوى الخلية إلى الحافة البعيدة للخلية.

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

لكن ربما تقرأ هذا بعد حل هذه الأخطاء ، في هذه الحالة ، إليك خيار تخطيط بديل.

يتم تعيين كل عنصر <tr> display: grid ، ويتم تعيين كل عنصر <td> display: contents . فقط العناصر الفرعية المباشرة لحاوية الشبكة تشارك في سياق تنسيق الشبكة ؛ في هذه الحالة ، يكون العنصر <td> .

عند تطبيق display: contents على <td> ، يتم "استبدالها" بمحتوياتها ، وفي هذه الحالة ، يصبح العنصر الزائف و <span> داخل <td> عناصر فرعية للشبكة بدلاً من ذلك.

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

في المستقبل ، عندما يتم دعم قيم الحجم min-content max-content fit-content (التي يغطيها مستوى وحدة التحجيم الداخلي والخارجي CSS المستوى 3) كقيم عامة width height ، سيكون لدينا المزيد من الخيارات لوضع الأشياء بها.

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

ترقيم صفحات بسيط

يوضح هذا المثال تطبيق ترقيم الصفحات الأساسي الذي تم تعديله من CodePen بواسطة Gjore Milevski للترقيم في صفوف الجدول بدلاً من divs. إنه امتداد لمثال "أسلوب التمرير" الذي تمت مناقشته في القسم السابق.

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

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

يمكننا القيام بذلك عن طريق رفع خاصية order . يجب دائمًا إجراء إعادة الترتيب المرئي للمحتوى مع مراعاة لأن هذه الخاصية لا تغير ترتيب المصدر - فقط كيفية ظهوره على الشاشات.

الفرز البسيط

يوضح هذا المثال تنفيذ الفرز الأساسي الذي تم تعديله من مقتطف الشفرة هذا بواسطة Peter Noble لتلبية كل من النص والأرقام:

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

بحث بسيط

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

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

دع مكتبة تتعامل معها

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

نمط تبديل العمود هو أحد الأنماط التي يتم من خلالها إخفاء الأعمدة غير الأساسية على شاشات أصغر. في العادة ، لست معجبًا بإخفاء المحتوى لمجرد أن منفذ العرض ضيق ، ولكن هذا النهج من قبل Maggie Costello Wachs من مجموعة Filament Group يحل هذه المشكلة من خلال توفير قائمة منسدلة تسمح للمستخدمين بتبديل الأعمدة المخفية مرة أخرى رأي.

تم نشر المقالة أعلاه في عام 2011 ، ولكن شركة Filament Group طورت منذ ذلك الحين مجموعة كاملة من المكونات الإضافية للجدول سريعة الاستجابة والمعروفة باسم Tablesaw ، والتي تتضمن ميزات مثل الفرز واختيار الصف والتدويل وما إلى ذلك.

لم تعد ميزة تبديل العمود في TableSaw تعتمد أيضًا على jQuery ، على عكس الأمثلة من المقالة الأصلية. Tablesaw هي واحدة من المكتبات الوحيدة التي وجدتها لا تعتمد على jQuery في الوقت الحالي.

تغليف

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

قراءة متعمقة

• "الجداول المستجيبة فقط في CSS" ، ديفيد بوشيل
• "جداول يسهل الوصول إليها وبسيطة وسريعة الاستجابة" ، Davide Rizzo ، CSS-Tricks
• "تخطيط الجدول المستجيب" مات سميث
• "أنماط الاستجابة: الجداول" براد فروست
• "مرحبًا ، لا يزال من الجيد استخدام الجداول ،" أدريان روسيلي
• "الجداول وخصائص عرض CSS و ARIA" ، أدريان روسيلي
• "جداول البيانات" ، هايدون بيكرينغ