مصدر الخبر: كومشارب
باعتبارك مصمم ويب في أواخر عام 2008، هل تشعر بالحرج من الاعتراف بأنك تستخدم الجدول في التعليمات البرمجية الخاصة بك؟ إذا كان الأمر كذلك، فأنت شخص شجاع صحيفة، أو فتح الإعلانات في الممر، ولكن لا تدع أي شخص يعرف أنك تستخدم Table. Finding Table في كود المصدر الخاص بك يشبه مندوب المبيعات الذي قام بسحب بنطاله واكتشف أنه كان يرتدي جوارب بيضاء.
الجدول قبيح ومتضخم للغاية، حتى لو كنت تعرض جزءًا بسيطًا من المحتوى، فأنت لا تزال بحاجة إلى العلامات الأساسية الثلاث <table><tr><td>، وتتم إضافة مجموعة من السمات الفوضوية إلى كل علامة > إنها بسيطة وأنيقة وعصرية، وهي تتوافق بشكل مثالي مع CSS، فهي تشكل نموذجًا مثاليًا للصناديق في الواقع تخطيط واحد، لا يهم، ما عليك سوى تغيير تعريف CSS، وسيتم إنشاء تخطيط جديد تمامًا؛ على عكس Table، فإن Table يشبه الخزانة الجانبية في المقصف، والصفوف والأعمدة ريفية ودهنية، مثلنا الآباء، بشكل قذر، يأخذون كل شيء إلى المنزل ويكدسونه عشوائيًا في الزاوية. إذا كان Div هو البرجوازية الصغيرة، فإن Table هو الجيل الثالث، فهم لا ينتمون إلى هذا العصر.
وهذا يعني أنه في السنوات الأخيرة، لمدة ثلاث إلى خمس سنوات فقط على الأكثر، أصبحت W3C منظمة يعتقد الجميع أنها مهمة ولكن موقعها الرسمي لا يحبه الجميع، وأجرؤ على القول إنني لم أر مثل هذا الموقع القبيح في حياتي لكن موقع الويب الخاص بهم هو أحد المواقع القليلة التي يمكنها اجتياز جميع عمليات التحقق من معايير W3C، مما يعني أن موقع الويب الخاص بهم مثالي من حيث القواعد والبنية وسهولة الوصول، على الرغم من أنه لا يزال قبيحًا للغاية. لكن هذه مزحة، W3C مهم جدًا، وإلا فإن Microsoft ستجلب جميع مهندسي تطوير الويب إلى نقطة اللاعودة، لحسن الحظ، بعد وفاة Netscape، أصدرت Nirvana Firefox، وعلى الرغم من أن Opera لم تحصل على أي فوائد بعد ولادة فايرفوكس، على الأقل لقد تلقيت الدعم المعنوي هل رأيت أن الأخ الأكبر خرج أخيرًا ليعتني بك؟ بعد عودة جوبز، عادت شركة أبل إلى مجدها السابق، عندها فقط عرف الناس أن هناك متصفحًا يسمى Safari في العالم، كل هذا مجتمعًا جعل W3C ضروريًا للوجود.
تقول W3C أنه يمكن استخدام الجدول لاستيعاب النص والنص المنسق والصور والروابط والنماذج والجداول الأخرى... ومع ذلك، لا ينبغي استخدام الجداول فقط كوسيلة لتخطيط محتوى المستند)، والسبب هو أن الجدول سيؤدي إلى مشاكل عندما يتم عرض الويب بواسطة أجهزة غير مرئية، وهي برامج قراءة الشاشة ومتصفحات برايل المخصصة، بالإضافة إلى ذلك، سيجبر Table المستخدمين على التمرير إلى اليسار واليمين على أجهزة العرض الكبيرة، لذلك يجب استخدام CSS لمصممي الويب بدلاً من Table. راجع W3C HTML 4.01 للتعرف على الجدول. عندما قالت W3C ذلك، كان ذلك في 24 ديسمبر 1999. على الرغم من أن CSS قد وُلدت منذ فترة طويلة، لم يستخدمها الكثير من الأشخاص. كانت الويب الأصلية بمثابة نسخة عبر الإنترنت من المستند ولم تصبح المنصة التي هي عليها الآن تم إيلاء الكثير من الاهتمام لقضايا التخطيط مع تشكيل فقاعة الإنترنت الأولى، ظهر عدد كبير من مواقع المداخل الإلكترونية وهي منشئي تخطيط الجدول لأن صفحاتهم الرئيسية كانت أكبر من جميع صفحات الصحيفة بأكملها مجتمعة. معقد، الجدول مفيد جدًا في هذا الصدد، من خلال الجمع بين colspan وrolspan، يمكنك تحقيق أي تخطيط معقد تقريبًا.
كان أسلوب التخطيط هذا لا يزال شائعًا للغاية في أوائل العقد الأول من القرن الحادي والعشرين وحتى منتصف العقد الأول من القرن الحادي والعشرين، خاصة في الصين، وفي ظل العقل الباطن لـ Da Weimei، كان الناس يحشرون كل ما يمكن حشره في صفحة واحدة في الصفحة الرئيسية في العصر القديم، على الرغم من أنه لا يمكن ترتيب كل شيء بطريقة منظمة، إلا أنه على الأقل يتم ترتيبه بنفس الترتيب. ومع ذلك، فقد وصل هذا النوع من الويب أخيرًا إلى النقطة التي يشعر فيها الناس بالاشمئزاز. ومع ظهور البحث، واشتراكات RSS، والويب المخصص الذي تمثله المدونات، أصبح لدى الأشخاص المزيد من القنوات للحصول على المعلومات دون الحاجة إلى زيارة تلك المواقع القليلة التي تكاد تكون ضرورية. في الصفحة الرئيسية للبوابة الخافتة، ظهر نمط ويب جديد وخفيف الوزن، باستخدام تخطيط أبسط وألوان أكثر سطوعًا وأيقونات كبيرة ولافتات كبيرة وخطوط كبيرة أسهل في القراءة في نفس الوقت ، كان CSS بالفعل ناضجًا جدًا، وكانت المتصفحات مثل Firefox وOpera وSafari أفضل بكثير من IE في الامتثال لمعايير W3C، وأدرك الناس أخيرًا قوة CSS. نظرًا لأن جوهر CSS هو نموذج Box من حيث التخطيط، يجب على الأشخاص العثور على كائن حاوية لـ CSS لإرفاقه به.
Div هو النموذج المحظوظ لأنه بطبيعة الحال أفضل نموذج أولي لـ Box. من الناحية الدلالية، يمثل Div مساحة من الصفحة، والأهم من ذلك أنه ليس مثل <P> أو <a> نظرًا لدلالات خاصة مسبقًا (على الرغم من أنه يمكن استخدامها أيضًا في نموذج الصندوق، من ناحية أخرى، بسبب كراهية الناس لحكم الطاولة في حقبة متضخمة، في نهاية العصر، سيعمل الخلفاء جاهدين لمحو العصور القديمة)؛ آثار العصر، ومصير تلك الرموز أو ممثلي العصر القديم هو في الغالب مثل هذا، ولا ينساه الناس فحسب، بل يرسمون خطًا واضحًا بينهم.
هذا هو المكان الذي تبدأ فيه المعاملة غير العادلة لـ Table. لماذا هذا غير عادل؟ عندما لا يوصي W3C بتخطيط الجدول، فهو يقول فقط أنه يجب استخدام CSS بدلاً من ذلك. ماذا يعني هذا؟ إنه مدعوم بالطبع، ولأن Table هو كائن HTML قديم وكانت حالته مهمة جدًا، فإن أي متصفح يوفر الدعم الأمثل للجدول، بما في ذلك دعم CSS. عندما يحتضن الأشخاص Div، يبدو أنهم ينسون أن Table هو أيضًا صندوق، وهو عبارة عن صندوق به خلايا داخلية متعددة، ولا يختلف الجدول ككل عن Div من حيث نموذج Box وخلاياه الداخلية، باستثناء Margin . فهو لا يزال صندوقًا، والصندوق الداخلي لا يحتوي على مفهوم الهامش الذي يجب فهمه. وغني عن القول أن Div ممتاز، ومع ذلك، عندما يقول الناس Div + CSS، يبدو أن ذلك يعني أن Table لا يمكنه استخدام CSS، وهذا سوء فهم كبير.
جميع خصائص CSS التي يدعمها Div مدعومة بواسطة Table. في الواقع، قبل أن يصبح Div مشهورًا، قال المتبنون الأوائل لـ Div ذات مرة بثقة قليلة أنه إذا كان Table قادرًا على القيام بذلك، فإن Div يمكنه القيام بذلك، وقد دفعوا أيضًا ثمن كلماتهم السعر، الأشخاص الذين يحاولون تحقيق التمركز العمودي في Divs سيفهمون ما أعنيه، والأشخاص الذين يحاولون تحقيق تخطيط Div بنسبة 100% في IE6 بدون CSS Hack سوف يفهمون ما أعنيه أكثر. مشكلة الارتفاع بنسبة 100%، ومشكلة تكيف العرض بين عدة Div، وأعتقد أن أي شخص يشارك في تصميم Div + CSS سيواجهها. ميزة Table في هذا الصدد ليست بسبب مدى تفوقها، ولكن لأنها قديمة ولا يجرؤ أي متصفح على تجاهلها، بل أيضًا بسبب خصائصها الأصلية. لقد اخترع الناس الجداول لأنهم يريدون عرض البيانات بدقة الأمر بهذه البساطة. ومع ذلك، لماذا اكتسب Table لاحقًا الكثير من الشهرة؟ يتهم المدافعون عن Div Table بما يلي فقط.
الكود متضخم: تحتاج إلى كتابة ثلاث علامات على الأقل <table><tr><td> قبل أن تتمكن من بدء المحتوى الحقيقي. بالإضافة إلى ذلك، تحتوي العلامات المتنوعة للجدول أيضًا على تعريفات سمات معقدة، بينما يحتاج Div فقط إلى <div > تسمية.
مشكلات أداء عرض الصفحة: يحتاج المتصفح إلى قراءة الجدول بالكامل بالكامل قبل أن يبدأ العرض.
سيئ بالنسبة لكبار المسئولين الاقتصاديين: محركات البحث ترغب في فصل المحتوى عن المحتوى البولندية.
ضعف إمكانية الوصول: لا تستطيع برامج قراءة الشاشة ومتصفحات برايل فهم المحتوى الموجود في الجدول جيدًا.
ليست دلالية بما فيه الكفاية: نحن بحاجة إلى شبكة دلالية.
المادة 1: الكود متضخم.
أولاً، السمات الوحيدة في الجدول التي لا يمكن تعريفها باستخدام CSS هي تباعد الخلايا وحشو الخلايا. يمكن لجميع السمات الأخرى استخدام CSS بهذه الطريقة، والباقي هو <table><tr> <td> و <div>، أعتقد أنه بالنسبة لصفحة الويب التي يبلغ حجمها عشرات K بسهولة، حتى لو تم استخدام العشرات من الجداول، يمكن تجاهل الكود الإضافي. يجب على أولئك الذين يشكون من رمز الجدول المتضخم التحقق بالفعل عاداتهم البرمجية قد لا يكون الشخص الذي يمكنه كتابة جدول متضخم جدًا موجزًا مثل كتابة Div.
المقالة 2: مشكلات أداء عرض الصفحة.
أستخدم جهاز كمبيوتر محمولًا موديل 2004 مزودًا بوحدة المعالجة المركزية (CPU) بسعة 1.6 جيجا بايت وذاكرة بسعة 1 جيجا بايت. في ظل هذا التكوين، لا يمكنني رؤية أي اختلاف في السرعة بين تخطيط الجدول وتخطيط Div في عرض الصفحة هناك اختلاف بسيط، ويمكن تجاهل التأخير المتعلق بالشبكة نفسها.
المادة 3: لا تساعد على تحسين محرك البحث.
إذا كنت تستخدم CSS بدلاً من سمات الجدول قدر الإمكان، كما ذكرنا سابقًا، فلن يكون الفرق بين الكود الذي تم إنشاؤه وDiv كبيرًا جدًا، فهل ستميز محركات البحث ضد <table> العلامة؟ لم أجد الأساس لهذا البيان حتى الآن.
المادة 4: ضعف إمكانية الوصول
يعد هذا عيبًا متأصلًا في Table، لكن يبدو أن معظم محبي Div + CSS لا يرفضون Table لهذا السبب.
المادة 5: دلالات غير كافية.
معنى الويب الدلالي أكثر عمقًا، فهو لا يتشابك فقط في الجدول والقسم. حتى W3C لا ينص على أنه لا يمكن استخدام الجدول إلا لعرض البيانات الجدولية من Table.People، يمكنك أيضًا انتظار HTML 5، فهذه هي الدلالات الحقيقية.
الغرض من هذه المقالة ليس جعلك تتخلى عن Div وتنضم إلى Table. على العكس من ذلك، إذا كان Div قادرًا على تلبية احتياجات التصميم الخاصة بك، فإن Div لا يزال هو الخيار الأول، ولكن ليست هناك حاجة لتجنب Table، وإلا فسوف ينتقل إلى. المتطرفة الأخرى. لا يزال من الممكن تحقيق العديد من التصميمات التي لا يمكن تحقيقها بسهولة باستخدام Div باستخدام Table. بالطبع، بغض النظر عما يتم استخدامه، يجب استخدام CSS لفصل المحتوى والديكور. Div + CSS و Table + CSS كلاهما تصميمات قانونية، استخدم أيهما أبسط. وفقًا لخبرتي، عندما يمكنك التنبؤ بتنسيق المحتوى الخاص بك والتحكم الكامل في تنسيق عرض المحتوى الذي توشك على إضافته، يجب عليك استخدام Div + CSS عندما لا يكون المحتوى الذي أنت على وشك إضافته ثابتًا لا يمكنك التنبؤ بها بالنسبة لتنسيقها، إذا كنت لا تريد طي الصفحة، فإن استخدام Table + CSS هو أسلوب آمن.
مصدر هذا المقال: COMSHARP CMS المؤلف: 35 كيلومترًا