الغريب أن أحد أكثر تقنيات الويب صعوبة في إتقانها هو واحد من أقدم التقنيات المتاحة للمتصفح بعد النصوص والصور العادية. المشكلة أكبر اليوم مع وجود العديد من أنواع الأجهزة المختلفة التي يجب التفكير فيها.
يكاد يكون من المستحيل إنشاء جداول مثالية إلا إذا كانت تحتوي على عدد قليل جدًا من العناصر التي من غير المحتمل أن تحدث أي مشاكل. تشمل أنواع الأخطاء التي قد تنشأ:
- التفاف النص بشكل غير صحيح
- أخطاء التبرير
- عرض الجدول خارج الشاشة
- مشاكل التمرير
- أخطاء ارتفاع الصف
- أخطاء عرض العمود
- القبح العام أو عدم الرضا
في هذه المقالة سنلقي نظرة على كيفية تجنب مثل هذه المشاكل ، وبالتالي فإن الجداول الخاصة بك لديها أفضل فرصة لخلق انطباع جيد.
استراتيجيات تجنب لتجنب
نظرًا لصعوبة الحصول على الجداول ، يحاول بعض الأشخاص تجنب استخدامها. تستخدم بعض الإستراتيجيات الشائعة CSS لإنشاء جدول مزيف ، واستخدام صورة لجدول البيانات دون تنفيذها في الكود.
كل من استراتيجيات تجنب هذه لديها عيوب ويجب تجنبها. استخدام CSS لتقليد جدول يفتقر إلى البنية الدلالية الكامنة في الجدول ، والتي يمكن أن تخلق مشاكل قابلية الاستخدام والوصول.
لن تعاني صورة الجدول من المشكلات المدرجة في المقدمة ، ولكنها تتسبب في تدهور إمكانات تحسين محركات البحث ولا يمكن تعديلها بسهولة إذا كانت بياناتك تحتاج إلى التحديث. كما يقدم مشاكل الاستخدام وسهولة الوصول.
الأطر هي أصدقائك
تحتوي الأطر الشائعة مثل Bootstrap و Foundation على العديد من أدوات توفير الوقت ، والجداول ليست استثناءً. بناء جدول أنيق في Bootstrap ليس صعبًا ، ولكنه يأتي مع بعض القيود إذا كنت تقوم ببناء الرف بدون إضافة بعض التصميم المخصص لجهودك.
تبدو ليست كل شيء
نظرًا لأن المحتوى والنمط يجب أن يكونا دائمًا مستقلين ، قد يكون من المنطقي إنشاء جدولك بتنسيق HTML عادي أولاً للتأكد من أنه سيبدو جيدًا قبل تطبيق أي تصميم خاص على الطاولة.
يمكن أن يكون هذا مفيدًا أيضًا في تذكيرك بأن البناء الجيد للطاولة يتطلب أكثر من مجرد جعل الطاولة تبدو جيدة. يجب أن يكون مفيدًا أيضًا فيformatنظام توصيل الأيونات. إذا كان الهدف من الجدول ليس نقلformatأيون ، إذن لا يجب أن تستخدم طاولة في كل ما تفعله.
تهدف للوصول
يواجه بعض الأشخاص صعوبة في قراءة النصوص المطبوعة وقراءتها ، لذا من المستحسن إنشاء جداول لهم. يمكنك معرفة كل ما تحتاج إلى معرفته حول جعل الجداول الخاصة بك متاحة بشكل أكبر WebAIM.
جرب اعطاء قيم معرف لمكونات الجدول
للحصول على أقصى قدر من التحكم في كل جزء من الجدول (الصفوف والخلايا) ، يمكنك التفكير في منحهاdiviقيم الهوية المزدوجة. ستمنحك إضافة قيم الفصل أيضًا مزيدًا من المرونة.
إن القيام بهذه الأشياء يخلق لك الكثير من العمل ، لذا فهو عملي فقط عندما تحتاج إلى أن تكون قادرًا على ضبط أي عنصر من خلال الإشارة إليه. إذا قررت القيام بذلك ، فستتمكن من التعامل مباشرة مع أي عنصر جدول باستخدام JavaScript و CSS.
أحد تعقيدات صناعة المائدة هو أننا نعلن عن الصفوف وليس الأعمدة. يتم إنشاء الأعمدة بشكل ديناميكي ، ويتم حسابها وفقًا لعدد عناصر البيانات التي تضعها في كل صف. هذا هو السبب في أن الجداول تضيف وقت تحميل صفحتك.
يعني هذا بشكل فعال أن الأعمدة موجودة فقط بمعنى مجرد قبل عرض الصفحة ، لذلك لا يمكنك منحهم أي نوع من المراجع. من خلال إعطاء عنصر TD الأول في صف فئة ، على سبيل المثال ، "FirstCol" ، فإنك توفر طريقة للإشارة مباشرة إلى عمود.
الجداول المدمجة هي الأفضل
أصبح من المألوف بناء كل شيء بمكونات كبيرة ورؤية عالية. من وجهة نظر الوصول ، هذا رائع. من ناحية سهولة الاستخدام ، لا تكون دائمًا الطريقة المثلى لأنها قد تؤدي إلى مشاكل.
جرب مطورو Bootstrap responsive الجداول ، ولكن الجداول و responsiveنيس لا تسير على ما يرام معا. يعد تصميم طاولاتك من البداية بحيث تلائم شاشة الهاتف المحمول في الوضع الرأسي خطوة ذكية.
يجب دائمًا أن تكون الجداول قابلة للتمرير
من الممارسات الجيدة دائمًا تعيين قيمة تجاوز الجدول لجدول تلقائي ، ولكن ليس على الجدول نفسه. بدلاً من ذلك ، قم بتغليف الجدول داخل div ، شيء من هذا القبيل:
ثم هناك الكثير من كود PHP الذي يقوم ببناء جدول الجدول ، مع إغلاق هذا:
الجزء الذي يعمل على جعل الجدول قابل للتمرير موجود في السطر الأول ، حيث يتم إعطاء div-wraps ارتفاعًا ثابتًا ويتم تعيين قيمة تجاوزه إلى auto. إذا قمت بذلك إلى الجدول نفسه ، بدلاً من الالتفاف حول الجدول ، يمكن أن يكون له تأثيرات غير مقصودة.
استدعاء في hitterers الثقيلة إذا كنت بحاجة إلى
بالنسبة للجداول البسيطة ، هذا مبالغة ، ولكن عندما يكون لديك جدول يحتاج بالفعل إلى مزايا مثل عرض العمود القابل للتعديل وفرز الأعمدة ، هناك بعض تطبيقات jQuery القوية التي تم تصميمها للمساعدة في مهمة إنشاء الجداول المعقدة.
الخيار الأكثر إثارة للإعجاب الذي تريده لموقع WordPress هو wpDataTables، جدول WordPress plugin تجعل عملك مع الجداول والمخططات وإدارة البيانات أمرًا سهلاً. مع ذلك ، يمكنك أن تخلق responsive جداول و جداول ووردبريس.
• plugin يعمل بشكل سريع حقًا مع الجداول الكبيرة ، التي تصل إلى ملايين الصفوف ، ولكن يمكنك أيضًا إجراء الكثير من التخصيصات والتصفية على الجداول تقريبًا كما لو كنت في Excel أو Google Spreadsheets.
أكبر وأفضل على الأرجح هو Flexigrid. هذا له نظرة مماثلة لجدول Swing Java ، ويعمل بطريقة مماثلة.
قد تكون ميزات Flexigrid أكثر مما تحتاجه ، لذلك يمكنك التفكير في هذه الحالة TableSorterوهو أبسط قليلاً.
على الرغم من أن ميزات هذه الأنواع من الأدوات قد تكون مثيرة ، إلا أنه من المهم أن يضيفوا المزيد إلى وقت تحميل صفحتك. من الأفضل حفظ هذا النوع من الأشياء عندما يجب عليك فعلًا ذلك.
لا تقدم أدوات التحويل التلقائية عادةً أفضل النتائج
تتوفر مكونات إضافية لـ CMS تتيح لك إمكانية تحويل جداول المستندات إلى جداول HTML. هذه ليست في أي مكان بالقرب من بناء الجدول بنفسك يدويا ، لذلك إذا كنت تريد نتائج متفوقة ، فإن التشغيل الآلي من هذا النوع ليس هو الطريق.
بيد أن الأتمتة المنزلية الخاصة بك على ما يرام
استخدام PHP لإنشاء جداولك من قاعدة بيانات بتنسيقformatأيون فكرة جيدة دائمًا ، ويفضل بالتأكيد كتابة كل شيء يدويًا. الفرق هنا هو أن لديك سيطرة كاملة على كيفية عمل الأتمتة.
عند استخدام التشغيل التلقائي لجهة خارجية ، يجب على مؤلف الجهة الخارجية إجراء افتراضات حول جدولك. وهذا يعني أنك ستنتهي بجدول عام قد يفتقر إلى العديد من الميزات مقارنة بإنشاء الجدول بنفسك.
استخدم الجداول بشكل مناسب وستكافئك
تم تصميم الطاولات الجيدة ، وهي لا تحدث فقط. عندما تقوم بتصميم ملفformatنظام توصيل الأيونات ، فأنت تريده أن يكون فعالاً وفعالاً. تأكد من أن الجداول الخاصة بك مصممة بحيث تكون كذلك ، وسيحقق موقعك أقصى فائدة من تضمينها.
رأس الصورة مجاملة من
التعليقات الردود 0