هل يعد استخدام علامات الجدول عند عرض النماذج بتنسيق html أمرًا سيئًا؟

Question

أظل أسمع ذلك div يجب استخدام العلامات لأغراض التخطيط وليس table العلامات.فهل ينطبق ذلك أيضًا على تخطيط النموذج؟أعلم أن تخطيط النموذج لا يزال تخطيطًا، ولكن يبدو أنه يتم إنشاء تخطيطات النماذج باستخدام divيتطلب المزيد html و css.لذلك مع أخذ ذلك في الاعتبار، يجب استخدام تخطيطات النماذج div العلامات بدلا من ذلك؟

Answer 1

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

<fieldset>
    <div>
         <label for="nameTextBox">Name:</label>
         <input id="nameTextBox" type="text" />
    </div>
    ...
</fieldset>

Answer 2

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

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

.field label {
  float: left;
  width: 20%;
}

.field.text input {
  width: 75%;
  margin-left: 2%;
  padding: 3px;
}

<div class="field text">
  <label for="fieldName">Field Title</label>
  <input value="input value" type="text" name="fieldName" id="fieldName" />
</div>

الجداول ليست شريرة.إنها الخيار الأفضل إلى حد بعيد عندما يلزم عرض البيانات الجدولية.النماذج IMHO ليست بيانات جدولية - إنها نماذج، ويوفر CSS أكثر من أدوات كافية لتخطيط النماذج كيفما تشاء.

Answer 3

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

Answer 4

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

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

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

Answer 5

لتسهيل الوصول إلى النماذج قدر الإمكان وصحيحة لغويًا، أستخدم التنسيق التالي:

  <fieldset>
  <ol>
    <li>
      <label for='text_field'>Text Field</label>
      <input type='text' name='text_field' id='text_field' />
    </li>
  </ol>
  </fieldset>

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

هناك شيء واحد لا أراه كثيرًا ما تتم مناقشته في أسئلة تخطيط النموذج هذه، إذا اخترت جدولاً لتخطيط النموذج الخاص بك (مع تسميات على اليسار وحقول على اليمين كما هو مذكور في إحدى الإجابات) فإن هذا التخطيط هو مُثَبَّت.في العمل، كان علينا مؤخرًا إجراء "إثبات مفهوم" سريع لتطبيقات الويب الخاصة بنا باللغة العربية.كانت التطبيقات التي استخدمت الجداول لتخطيط النماذج متوقفة بشكل أساسي، في حين تمكنت من عكس ترتيب جميع حقول النماذج والتسميات في جميع صفحاتي عن طريق تغيير حوالي عشرة أسطر في ملف CSS الخاص بي.

Answer 10

إذا كانت النماذج الخاصة بك موضوعة بتنسيق جدولي (على سبيل المثال، التسميات على اليسار والحقول على اليمين)، فنعم، استخدم علامات الجدول.

Answer 11

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

Answer 12

تبدو معظم الإجابات التي رأيتها هنا مناسبة.الشيء الوحيد الذي أود إضافته، على وجه التحديد إلى اللامبالاة أو السيد.مات هو للاستخدام <dl>/<dt>/<dd>.أعتقد أن هذه تمثل القائمة لغويا.

<dl>
  <dt><label for="nameTextBox">Name:</label></dt>
  <dd><input value="input value" type="text" name="fieldName" id="fieldName" /></dd>
</dl>

قد ترغب في إعادة صياغة هذه، ولكن هذا يوضح لغويًا ما يحدث، أي أن لديك قائمة من "المصطلحات" (<dt>) و "تعريفات" (<dd>)، حيث يكون المصطلح هو التسمية والتعريف هو القيم التي أدخلها المستخدم.