Skip to main content

لماذا يجب عليك تجنب الجداول لتخطيطات صفحة ويب

Linux Tutorial for Beginners: Introduction to Linux Operating System (أبريل 2025)

Linux Tutorial for Beginners: Introduction to Linux Operating System (أبريل 2025)
Anonim

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

الجداول غير قابلة للوصول

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

هذا هو السبب في أن مواصفات HTML5 توصي باستخدام جداول التخطيط ولماذا يمنع HTML 4.01 من ذلك. صفحات الويب التي يمكن الوصول إليها تسمح لمزيد من الناس لاستخدامها وهي علامة لمصمم محترف.

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

الجداول صعبة

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

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

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

الجداول غير مرنة

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

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

الجداول المتداخلة تحميل More Slowly Than CSS لنفس التصميم

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

في معظم الحالات ، يستخدم تخطيط الجدول المزيد من الأحرف لإنشاء أكثر من تصميم CSS. وهناك عدد أقل من الأحرف يعني أقل للتنزيل.

الجداول يمكن أن يضر محرك البحث الأمثل

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

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

الجداول لا دائما طباعة حسنا

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

باستخدام CSS ، يمكنك إنشاء ورقة أنماط منفصلة فقط لطباعة الصفحة.

جداول التخطيط غير صالحة في HTML 4.01

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

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

ومع ذلك ، فقد غيرت HTML5 القواعد وأصبحت الآن جداول التصميم ، بينما لا يوصى بها ، تُعتبر الآن HTML صالحًا. تنص مواصفات HTML5 على: "يجب عدم استخدام الجداول كمساعدات تخطيط." هذا لأن جداول التخطيط صعبة على قارئات الشاشة للتمييز ، كما ذكر سابقاً.

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

الجداول للتخطيط يمكن أن تؤثر على فرص العمل الخاصة بك

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

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

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

الأخلاقية: تعلم كيفية استخدام CSS

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