الجداول بدلاً من DIVs [نسخة مكررة]
https://stackoverflow.com/questions/30251
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
التكرار المحتمل:
لماذا لا تستخدم الجداول للتخطيط في HTML؟
تحت أي ظروف يجب عليك اختيار الجداول بدلاً من DIVs في ترميز HTML؟
المحلول
بالكاد يخطئ أمر "الجداول مقابل Divs" بأكمله.إنها ليست "جدول" أو "div".يتعلق الأمر باستخدام HTML الدلالي.
حتى علامة div تلعب دورًا صغيرًا فقط في الصفحة المصممة جيدًا.لا تفرط في استخدامه.لن تحتاج إلى هذا العدد الكبير إذا قمت بتجميع HTML الخاص بك معًا بشكل صحيح.أشياء مثل القوائم، ومجموعات الحقول، ووسائل الإيضاح، والتسميات، والفقرات، وما إلى ذلك يمكن أن تحل محل الكثير مما يستخدم div أوspan غالبًا لإنجازه.يجب استخدام Div بشكل أساسي عندما يكون من المنطقي الإشارة إلى قيمة منطقية شعبةولا يتم تخصيصها للتخطيط الإضافي إلا عند الضرورة القصوى.وينطبق الشيء نفسه على الجدول؛استخدمه عندما يكون لديك بيانات جدولية، ولكن ليس بخلاف ذلك.
ثم لديك صفحة أكثر دلالية ولا تحتاج إلى عدد كبير من الفئات المحددة في CSS الخاص بك؛يمكنك استهداف العلامات مباشرةً بدلاً من ذلك.ربما الأهم من ذلك هو أن لديك صفحة ستحصل على نتائج أفضل بكثير مع Google (حسب الروايات) مقارنة بالجدول المكافئ أو الصفحة ذات العناصر الثقيلة.والأهم من ذلك كله أنه سيساعدك على التواصل بشكل أفضل مع جزء من جمهورك.
لذلك، إذا عدنا ونظرنا إلى الأمر من حيث الجدول مقابل div، فمن رأيي أننا وصلنا بالفعل إلى النقطة التي يتم فيها الإفراط في استخدام div وعدم استخدام الجدول بشكل كافٍ.لماذا؟لأنه عندما تفكر في الأمر حقًا، ستجد أن هناك الكثير من الأشياء التي تندرج ضمن فئة "البيانات الجدولية" التي تميل إلى التغاضي عنها.الإجابات والتعليقات على صفحة الويب هذه، على سبيل المثال.وهي تتكون من سجلات متعددة، يحتوي كل منها على نفس مجموعة الحقول.يتم تخزينها حتى في جدول خادم SQL، للصراخ بصوت عال.هذا هو التعريف الدقيق للبيانات الجدولية.هذا يعني أن علامة جدول html ستكون بالتأكيد خيارًا دلاليًا جيدًا لتخطيط شيء مثل المنشورات هنا على Stack Overflow.وينطبق المبدأ نفسه على أشياء أخرى كثيرة أيضًا.قد لا تكون فكرة استخدام علامة جدول لإعداد تخطيط ثلاثي الأعمدة فكرة جيدة، ولكن من المؤكد أنه من الجيد استخدامها للشبكات والقوائم...باستثناء، بالطبع، عندما يمكنك بالفعل استخدام علامات ol أو ul (قائمة).
نصائح أخرى
عندما تكون البيانات التي أقدمها جدولية بالفعل.
أجد أنه من السخف أن يستخدم بعض مصممي الويب divs في البيانات الجدولية في بعض المواقع.
أحد الاستخدامات الأخرى التي سأستخدمها هو النماذج، وخاصة التسمية:أزواج مربعات النص.يمكن أن يتم ذلك من الناحية الفنية في مربعات div، ولكن من الأسهل بكثير القيام بذلك في الجداول، ويمكن للمرء أن يجادل بأن التسمية: أزواج مربعات النص هي في الواقع جدولية بطبيعتها.
اعتدت أن أفعل CSS خالصًا ولكني تخليت عن هذا السعي لصالح نهج الجدول المختلط/CSS باعتباره النهج الأكثر واقعية.ومن المفارقات أن ذلك أيضًا بسبب إمكانية الوصول.هل سبق لك أن حاولت القيام بـ CSS على Sidekick؟يا له من كابوس!هل سبق لك أن رأيت كيف يتم عرض مواقع الويب المستندة إلى CSS على المتصفحات الجديدة؟قد تتداخل العناصر أو لا يتم عرضها بشكل صحيح مما اضطرني إلى إيقاف تشغيل CSS.هل سبق لك أن حاولت تغيير حجم مواقع الويب المستندة إلى CSS؟إنها تبدو فظيعة وغالبًا ما تكون ضارة للمكفوفين إذا استخدموا ميزات التكبير/التصغير في المتصفح!إذا قمت بذلك باستخدام الجداول، فستكون أفضل بكثير.عندما يتحدث الناس عن إمكانية الوصول، أجد أن الكثيرين ليس لديهم أدنى فكرة وهذا يزعجني لأنني معاق وهم ليسوا كذلك.هل عملوا حقًا مع المكفوفين؟الأصم؟إذا كانت إمكانية الوصول هي الاهتمام الرئيسي، فلماذا لا تحتوي 99٪ من مقاطع الفيديو على تسميات توضيحية مغلقة؟يستخدم العديد من المتخصصين في CSS AJAX لكنهم يفشلون في إدراك أن AJAX غالبًا ما يجعل المحتوى غير قابل للوصول.
من الناحية العملية، لا بأس في استخدام جدول واحد كتخطيط رئيسي طويل حيث تقوم بتوفير المعلومات في تدفق منطقي إذا كانت الخلايا مكدسة (شيء تراه على الهواتف المحمولة).تبدو نظرية CSS رائعة ولكن جزئيا قابلة للتطبيق في الحياة الواقعية مع الكثير من الاختراقات، وهو أمر يتعارض مع مُثُل "النقاء".
منذ استخدام أسلوب CSS مع الجداول، قمت بتوفير الكثير من الوقت في تصميم موقع ويب وأصبحت صيانته أسهل بكثير.عدد أقل من الاختراقات، وأكثر سهولة.أحصل على عدد أقل من المكالمات من أشخاص يقولون "لقد أدخلت Div والآن يبدو كل شيء مشدود!" والأهم من ذلك ، على الإطلاق لا توجد مشاكل في الوصول.
عادةً عندما لا تستخدم الجدول لتوفير تخطيط.
الجداول -> البيانات
الأقسام -> التخطيط
(خاصة)
ملحوظة:في وقت طرح السؤال، كانت هناك أسباب عملية لاستخدام الجداول لبعض أغراض التخطيط.لم يعد هذا ضروريًا بعد الآن بسبب تحسينات المتصفح، لذلك قمت بتحديث الإجابة.
لغة البرمجة <table>-يجب استخدام العناصر عندما تحتوي البيانات بشكل منطقي على بنية ثنائية الأبعاد.إذا كان من الممكن تنظيم البيانات في صفوف وأعمدة ويمكنك تطبيق الرؤوس بشكل مفيد على كل من الصفوف والأعمدة، فمن المحتمل أن يكون لديك بيانات جدولية.
إذا كان لديك صف واحد فقط أو عمود واحد من البيانات، فهي ليست بيانات جدولية - إنها مجرد محتوى خطي.تحتاج إلى صفين وعمودين على الأقل قبل أن يتم اعتبارها بيانات جدولية.
بعض الأمثلة:
استخدام الجداول لوضع الأشرطة الجانبية ورؤوس/تذييلات الصفحات.هذه ليست بيانات جدولية ولكنها تخطيط الصفحة.يعد شيء مثل شبكة CSS أو flexbox أكثر ملاءمة.
استخدام الجداول لأعمدة على شكل صحيفة.هذه ليست بيانات جدولية - ستظل تقرأها بشكل خطي.شيء مثل أعمدة CSS أكثر ملاءمة.
أود أن أفرق بين HTML لمواقع الويب العامة (الجداول no-no-no، divs Yes-yes-yes) وHTML لتطبيقات الويب شبه العامة أو الخاصة، حيث أميل إلى تفضيل الجداول حتى لتخطيط الصفحة.
معظم الأسباب المحترمة التي تجعل "الجداول سيئة" عادةً ما تكون مشكلة تتعلق بمواقع الويب العامة فقط، ولكنها لا تمثل مشكلة كبيرة مع تطبيقات الويب.إذا كان بإمكاني الحصول على نفس التخطيط وإلقاء نظرة أكثر اتساقًا عبر المتصفحات باستخدام TABLE بدلاً من CSS+DIV المعقد، فعادةً ما أمضي قدمًا وأوافق على TABLE.
كما ذكر العديد من الملصقات بالفعل، يجب عليك استخدام الجداول لعرض البيانات الجدولية.
تم تقديم الجداول في أتش تي أم أل 3.2 فيما يلي الفقرة ذات الصلة من المواصفات الخاصة باستخدامها:
يمكن استخدام [الجداول] لترميز المواد الجدولية أو لأغراض التخطيط...
أتفق مع توماس - القاعدة العامة هي أنه إذا كان الأمر منطقيًا في جدول البيانات، فيمكنك استخدام جدول.وإلا لا.
لا تستخدم الجداول كتخطيط للصفحة، فهذه هي المشكلة الرئيسية التي يواجهها الأشخاص معهم.
أستطيع أن أرى الحجة الخاصة بجداول النماذج، ولكن هناك بديل أفضل ...عليك فقط أن تشمر عن سواعدك وتتعلم CSS.
على سبيل المثال:
<fieldset>
<legend>New Blog Post</legend>
<label for="title">Title:</label>
<input type="text" name="title" />
<label for="body">Body:</label>
<textarea name="body" rows="6" cols="40">
</textarea>
</fieldset>
يمكنك أخذ ملف HTML هذا وتخطيط النموذج إما تسميات جنبًا إلى جنب، أو تسميات أعلى مربعات النص (وهو أمر أسهل).إن التمتع بالمرونة يساعد حقًا.كما أنها أقل HTML من الجدول المكافئ لأي منهما.
للحصول على بعض الأمثلة الممتازة لنماذج CSS، راجع هذه الأمثلة الممتازة:
http://jeffhowden.com/code/css/forms/
http://www.sitepoint.com/article/fancy-form-design-css/
http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
سأختار عادةً الجداول لعرض معلومات نوع النموذج (الاسم الأول واسم العائلة والعنوان وما إلى ذلك) حيث يكون من المهم وضع التسميات والحقول عبر صفوف متعددة.DIVs التي أستخدمها للتخطيط.
بالطبع الجدول ملفوف في DIV :)
تم تصميم الجداول للمحتوى الجدولي، وليس للتخطيط.
لذا، لا تشعر بالسوء أبدًا إذا استخدمتها لعرض البيانات.
أستخدم الجداول في حالتين:
1) البيانات الجدولية
2) في أي وقت أريد أن يتناسب تخطيطي مع محتوياته ديناميكيًا
إذا كان من الممكن وضع بياناتك في شبكة ثنائية الأبعاد، فاستخدمها <table>.إذا لم تستطع، فلا تفعل.استخدام <table> لأي شيء آخر يعتبر اختراقًا (على الرغم من عدم وجود بدائل مناسبة في كثير من الأحيان، خاصة عندما يتعلق الأمر بالتوافق مع المتصفحات القديمة). لا استخدام <table> ل الشيء الذي من الواضح أنه ينبغي أن يكون سيئًا بنفس القدر. <div> و <span> ليست لكل شيء؛في الواقع، كونها لا معنى لها تمامًا على المستوى الدلالي، يجب تجنبها بأي ثمن لصالح بدائل أكثر دلالية.
حول هذا الموضوع، فكرت هذا كان الموقع مضحكا جدا.
1) لعرض البيانات الجدولية.يعد التقويم أحد الأمثلة على البيانات الجدولية التي لا تكون واضحة دائمًا في البداية.
2) أعمل في شركة فواتير طبية، ويتم تنفيذ كل تخطيطات عملنا الداخلي تقريبًا باستخدام CSS.ومع ذلك، من وقت لآخر نحصل على نماذج ورقية من شركات التأمين التي يتعين على محرري الفواتير لدينا استخدامها، وسيقوم البرنامج بتحويلها إلى تنسيق html يمكنهم تعبئته وطباعته عبر الشبكة الداخلية.للتأكد من قبول النماذج، يجب عليهم مطابقة النسخة الورقية الأصلية بشكل وثيق جدًا.بالنسبة لهذه الأمور، من السهل الرجوع إلى الجداول.
يتم استخدام الجداول للبيانات الجدولية.إذا كان من المنطقي وضعها في جدول بيانات، فاستخدم جدولًا.بخلاف ذلك، هناك علامة أفضل يمكنك استخدامها مثل div، وspan، وul، وما إلى ذلك.
وأعتقد أن المحتوى الجدولي فقط.على سبيل المثال، إذا قمت بطباعة جدول قاعدة بيانات أو بيانات تشبه جدول البيانات إلى HTML.
إذا كنت ترغب في الحصول على HTML صحيح لغويًا، فيجب عليك استخدام الجداول فقط للبيانات الجدولية.
بخلاف ذلك، يمكنك استخدام الجداول لكل ما تريد، ولكن من المحتمل أن تكون هناك طريقة للقيام بنفس الشيء باستخدام divق وCSS.
@ماريوس:
هل التخطيط عبارة عن بيانات جدولية؟لا، على الرغم من أنه كان قياسيًا قبل بضع سنوات، إلا أنه ليس الآن :-)
أحد الاستخدامات الأخرى التي سأستخدمها هو النماذج، وخاصة التسمية:أزواج مربعات النص.يمكن أن يتم ذلك من الناحية الفنية في مربعات div، ولكن من الأسهل بكثير القيام بذلك في الجداول، ويمكن للمرء أن يجادل بأن التسمية: أزواج مربعات النص هي في الواقع جدولية بطبيعتها.
أميل إلى إعطاء الملصق عرضًا ثابتًا، أو عرضه على السطر أعلاه.
@ جون ليمجاب
للتسمية :مربع النص، لا divs ولا الجداول مناسبة: <dl>هي
استخدام واحد آخر سأكون له من أجل أن يكون النماذج ، وخاصة العلامة:أزواج مربعات النص.يمكن أن يتم ذلك تقنيًا في صناديق Div ، ولكن من الأسهل بكثير القيام بذلك في الجداول ، ويمكن للمرء أن يجادل بأن أزواج مربع النص هي في الواقع مجدولة في الطبيعة.
أرى أن مبلغا لا بأس به، وخاصة بين مطوري MS.ولقد فعلت ذلك بقدر لا بأس به في الماضي.إنه ناجح، لكنه يتجاهل بعض عوامل إمكانية الوصول وأفضل الممارسات.يجب عليك استخدام التصنيفات والمدخلات ومجموعات الحقول والأساطير وCSS لتخطيط النماذج الخاصة بك.لماذا؟لأن هذا هو هدفهم، فهو أكثر كفاءة، وأعتقد أن إمكانية الوصول مهمة.ولكن هذا مجرد تفضيلي الشخصي.أعتقد أنه يجب على الجميع تجربتها بهذه الطريقة أولاً قبل إدانتها.إنها سريعة وسهلة ونظيفة.
عندما يتم تحميل صفحة تحتوي على جداول بواسطة أي متصفح، يستغرق المتصفح وقتًا أطول لعرض العلامة بشكل صحيح.حيث كما لو تم استخدام div، يستغرق المتصفح وقتًا أقل لأنه أخف وزنًا.وأكثر من ذلك يمكننا تطبيق CSS لجعل divs تظهر كجدول،
عادة ما تكون الجداول ثقيلة الوزن و div خفيفة الوزن.
من الواضح أن DIV يتم استخدامه للتخطيط ولكن حدث لي أن "أجبرت" على استخدام جداول البيانات للقيام بتخطيط شبكة داخل بنية div لهذه الأسباب:
لم تسمح إضافة قيم النسبة المئوية بمحاذاة مناسبة مع div، بينما أعطت نفس القيم المعبر عنها في خلايا الجداول النتيجة المتوقعة.
لذلك أعتقد أن الجداول لا تزال مفيدة ليس فقط للبيانات، ولكن أيضًا للموقف أعلاه، علاوة على ذلك، لا تزال الجداول متوافقة مع متصفح W3C والمتصفحات البديلة (للمعاقين على سبيل المثال) تفسر جداولها بشكل صحيح.
Divs بسيطة divisions, ، لا يُقصد استخدامها لتجميع أقسام الصفحة المرتبطة بالمعنى الدلالي.ولا تحمل أي معنى ضمني غير ذلك.
كان الهدف من الجداول في الأصل هو عرض البيانات العلمية، مثل نتائج المختبر على الشاشة.من المؤكد أن ديف راجيت لم يكن ينوي استخدامها لتنفيذ التخطيط.
أجد أنها تبقي الأمر واضحًا إلى حد ما في ذهنك إذا كنت تتذكر ما ورد أعلاه، إذا كان شيئًا تتوقع عادةً قراءته في جدول، فهذه هي العلامة المناسبة، وإذا كان تخطيطها خالصًا، فاستخدم شيئًا آخر لتحقيق احتياجاتك.
