العنصر بدلاً من <الطاولة>؟

https://stackoverflow.com/questions/819237

03-07-2019
|

سؤال

مكررة من:

كان هناك الكثير من الكلام مؤخرًا حول استخدام Div أكثر من علامات الجدول لجعل صفحاتك أكثر مستعرضًا. لماذا ديف أفضل؟

المحلول

بعض الأسباب:

1) DIV أكثر صحة بشكل دلالي في معظم الحالات. الأشخاص الذين يقومون بترميز مواقعهم في بنية الجدول لا يستخدمون الجداول لما يصنعونه ، وهو بيانات جدولة. تمثل DIVs "تقسيم" أو قسم من الصفحة ، لذا فإن وضع العناصر في DIVs أكثر صحة.

2) divs أكثر مرونة وأسهل في الأناقة والصيانة. ليس عليك الكتابة <table><tr><td>Text here</td></tr></table> في كل مرة تريد أن تقول شيئًا عندما يمكنك الكتابة فقط <div>Text here</div> في حين أن. يمكنك إضافة خطافات CSS (أي الفصول أو العناصر) إلى كل من الجداول و divs ، ولكن مع divs يكون أكثر مرونة بلا حدود.

3) المواقع المهيكلة الجدول هي مجرد قبيحة :)

نصائح أخرى

النقطة الأساسية هنا هي استخدامها للتخطيط. لا حرج في الجداول للجدولة بيانات, ، مانع لك. هذا ما يفعلونه.

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

ولكن في الأساس يتعلق الأمر بهذا:

الجداول

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

تخطيط CSS

من الصعب الحصول على صواب (على الأقل للعرض التقديمي)
يسمح (في بعض الأحيان) الفصل نظيف للمحتوى والعرض التقديمي. لاحظ أنه في بعض الأحيان يجب عليك استخدام عناصر حاويات متعددة في HTML للسماح ببعض التخطيطات والأساليب للعمل بشكل صحيح لأن CSS لديها بعض القيود
يسمح بصياوى دلالية أفضل للعلامة الأساسية IFF أنت لا تستخدم عمياء <div> و <span>. هناك العديد من العلامات التي لها معنى ويجب استخدامها على هذا النحو. على سبيل المثال ، لا تستخدم <div class="heading1"> عندما يمكنك استخدام <h1>.

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

يمكن أن يؤدي ذلك على سبيل المثال إلى مشكلات إمكانية الوصول للأشخاص الذين يستخدمون قارئ الشاشة.

ها هي إيجابيات وسلبيات التصميم القائم على الطاولة.

يعد استخدام DIV أفضل من استخدام الجدول بسبب سهولة التحكم في التصميم ويمكن أن يكون حاوية لعناصر تحكم من الجدول والجدول يستخدم mainlt لتجميع البيانات بهيكل Simillar بحيث يكون التصميم لهذه المهمة ولكن div يعتبر حاوية أساسا من الجدول. لقد وجدت الفرق بين عند جمع العديد من عناصر التحكم وفي IN في الجهة التي يمكنني التحكم في الحاوية ولكن في الجدول ، شعرت بالارتباك لأنني يجب أن أدخل داخلها وحلقتها داخل بعضها البعض.

يستمر معظم الأشخاص حول كيفية استخدام الجدول للبيانات فقط ويقدم مشكلة في الأداء عند استخدامه لأغراض التخطيط. أيضا ، من المفترض أن تكون أكثر مرونة لأنه يمكنك صنعu003Cdiv style=";text-align:right;direction:rtl"> التدفق اليسار ، التدفق يمينًا ويتدفق في أي مكان آخر.

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

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

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

أقول لك الأسباب الرئيسية الخاصة بي لاستخدام divs:

تحتوي الجداول على شبكة ثابتة فقط في حين أن DIVs ديناميكية: يحدد الصف الأول للجدول جميع القولون (مثل في MS Excel). في الصفوف التالية ، يمكنك فقط الجمع بين هذه العلف ، لكن لا يمكنك تغيير التصميم الأساسي الذي حددته في الصف الأول. divs ديناميكية: يمكنك إنشاء خليط ، أو ترك divs تتداخل أو وضع بعض المساحة بين. أياً كان ما تريد. أنت لست مجبرًا على التفكير في الصفوف. انت حر. المزيد من المرونة.
تسبب الجداول مشكلات عدم التوافق في التقديم وعدم التوافق: لا تبدو الجداول متطابقة دائمًا. يمنحك كل متصفح تفسيره الخاص للجدول ومحتواه. وبالتالي ، الكثير من المفاجآت غير المريحة. يوضح لك أحد المتصفح نصك العادي كخط غامق. يمنح متصفح آخر طاولتك هامشًا أكثر أو أقل لعناصر HTML الأخرى ، وبالتالي ، فإن الجداول ليست في وضع جيد. إنها ساعات العمل لإصلاح هذه المشكلات مع الحلول المعقدة. divs دائما تبدو كما هي في جميع المتصفحات. حتى IE (المعروف بأنه مثيري الشغب لبرامج الويب) يسبب مشاكل أقل إذا كنت تستخدم divs.
يقدم Divs أسرع: divs تحميل أسرع من الجداول. تصفح أسرع بين الصفحات. أفضل نظرة وشعور.

أتمنى أن يساعد ذلك. هتافات.

أنا أستخدم CSS والجداول وأحيانًا divs ، لكن الجداول شاملة جدًا! وتبدو لطيفة للغاية في Dreamweaver ، Prontpage ... من الصعب جدًا التخلي عن الجداول ، لكن يبدو أنني سأفعل ، لأنه من الضروري جعل صفحاتي يتم تحميلها بشكل أسرع!

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow