لطالما كانت جداول HTML هي الأداة الأساسية لعرض البيانات المجدولة، بينما أصبحت CSS Grid هي بطل التخطيطات المرنة على الويب. لكن ماذا لو تمكنا من دمج خصائصهما لخلق حل فريد؟ هذا ما يستكشفه مفهوم «فرانكنشتاين الجدول»، وهو تقنية تعتمد على استخدام جداول HTML كبنية دلالية مع الاستفادة من قوة CSS Grid في التخطيط.
لماذا «فرانكنشتاين الجدول»؟
بدأ هذا المفهوم من فكرة تطبيق خصائص التموضع لـ Flexbox وCSS Grid على جميع عناصر HTML، ليس فقط على عناصر الكتلة (block) أو العناصر السطرية (inline). على الرغم من أن هذا لم يحدث بشكل مباشر، فإن تطبيق CSS Grid على عنصر <table> يسمح باستخدام خصائص الشبكة لتخطيط الجداول، وهي طريقة استُخدمت في الماضي لجعل الجداول متجاوبة.
لا شك أن للجداول التقليدية العديد من المزايا، فهي توفر بنية دلالية واضحة يفهمها المتصفح تمامًا وينقلها بشكل مثالي للتقنيات المساعدة. كما أن العنصر <caption> يضيف سياقًا مهمًا لعنوان الجدول.
في المقابل، لا غنى عن CSS Grid بفضل استجابته المتأصلة واستقلاليته عن ترتيب المصدر ومرونة تحديد المواقع، مما يجعله أداة لا غنى عنها في تصميم التخطيطات المعقدة. ولذلك، من الأفضل ترك جداول HTML لعرض البيانات المجدولة فعليًا.
دمج الدلالية والمرونة
تكمن الفائدة هنا في الدلالية الزائفة (pseudo-semanticism) التي تقدمها جداول HTML. على سبيل المثال، يوحى العنصر <th> بأن محتواه هو عنوان يتبعه بيانات، وهو ما لا توفره عناصر عامة مثل <div>. هذا يجعل قراءة وتفسير المحتوى أسهل للمطورين.
بدلاً من استخدام سلسلة من عناصر <div> لتخطيط بطاقة، يمكن استخدام جدول HTML لتمثيل البنية الدلالية. على سبيل المثال، تحويل شيفرة HTML التي تعتمد على <div> إلى شيفرة تستخدم <table> مع <th> و <td>.
بعد ذلك، يتم تطبيق CSS التالي لتحويل الجدول إلى شبكة مع الحفاظ على دلاليته:
- .card { display: grid; grid-template-columns: auto auto 1fr; gap: 2lh; }
- tbody { display: contents; /* تجاوز tbody في التخطيط */ }
- tr, tr > * { display: block; /* تجنب أنماط table-row و table-cell */ }
هذا الدمج يسمح باستخدام خصائص Grid المرنة، بينما لا تزال برامج قراءة الشاشة (مثل VoiceOver) والتنقل بلوحة المفاتيح تتعامل معها كجداول حقيقية. نرى أن هذا يجعل الشيفرة أسهل في الفحص والقراءة مقارنةً بسلسلة من عناصر <div> العامة.
ما الذي يعنيه هذا للمطورين؟
بالنسبة للمطورين ومصممي الواجهات، توفر هذه التقنية المرونة في التصميم التي يمنحها CSS Grid مع الحفاظ على البنية الدلالية التي تقدمها جداول HTML. إنها تسمح بإنشاء تخطيطات معقدة ومستجيبة دون التضحية بإمكانية الوصول أو وضوح الشيفرة. ومع ذلك، من المهم فهم متى تكون هذه التقنية مناسبة ومتى يجب الالتزام بالجداول التقليدية، ففصل الاهتمامات بين المحتوى والعرض لا يزال مبدأً أساسيًا في تطوير الويب.
المصدر: css-tricks.com