جعل جداول HTML أفضل

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

يكاد يكون من المستحيل إنشاء جداول مثالية إلا إذا كانت تحتوي على عدد قليل جدًا من العناصر التي من غير المحتمل أن تحدث أي مشاكل. تشمل أنواع الأخطاء التي قد تنشأ:

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

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

استراتيجيات تجنب لتجنب

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

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

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

الأطر هي أصدقائك

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

تبدو ليست كل شيء

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

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

تهدف للوصول

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

جرب اعطاء قيم معرف لمكونات الجدول

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

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

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

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

الجداول المدمجة هي الأفضل

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

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

يجب دائمًا أن تكون الجداول قابلة للتمرير

من الممارسات الجيدة دائمًا تعيين قيمة تجاوز الجدول لجدول تلقائي ، ولكن ليس على الجدول نفسه. بدلاً من ذلك ، قم بتغليف الجدول داخل div ، شيء من هذا القبيل:

ثم هناك الكثير من كود PHP الذي يقوم ببناء جدول الجدول ، مع إغلاق هذا:

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

استدعاء في hitterers الثقيلة إذا كنت بحاجة إلى

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

أكبر وأفضل على الأرجح هو Flexigrid. هذا له نظرة مماثلة لجدول Swing Java ، ويعمل بطريقة مماثلة.

قد تكون ميزات Flexigrid أكثر مما تحتاجه ، لذلك يمكنك التفكير في هذه الحالة TableSorterوهو أبسط قليلاً.

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

لا تقدم أدوات التحويل التلقائية عادةً أفضل النتائج

تتوفر مكونات إضافية لـ CMS تتيح لك إمكانية تحويل جداول المستندات إلى جداول HTML. هذه ليست في أي مكان بالقرب من بناء الجدول بنفسك يدويا ، لذلك إذا كنت تريد نتائج متفوقة ، فإن التشغيل الآلي من هذا النوع ليس هو الطريق.

بيد أن الأتمتة المنزلية الخاصة بك على ما يرام

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

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

استخدم الجداول بشكل مناسب وستكافئك

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

رأس الصورة مجاملة من

بوجدان رانسيا

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