ما هي علامات HTML لاستخدامها لعرض بيانات التسمية / القيمة؟

Question

أريد تقديم حاوية مستخدم ملف تعريف يحتوي على قائمة بالملصقات والقيم المرتبطة بها.

فيما يلي مقتطف من المعلومات والتخطيط الذي أود عرضه:

الاسم الأول.......اسمي

سن...................عمري

البريد الإلكتروني................بريدي الالكتروني

أعلم أن هناك أطنان من الأمثلة المتاحة ولكن المشكلة هي أنه يبدو أنه لا يوجد حل مقبول عادة.

حتى الآن لقد رأيت الاستخدام التالي:

1. جدول مع العلامات (و <tr>، <td> ...)
2. قائمة غير مدربة مع <ul> علامة (و <li>، <div> ...)
3. علامات منتظمة مع <H1>، <h2> ... <p>
4. قائمة تعريف مع <DL>، <DT> و <dd>
5. <label> ...؟

ما هو الصحيح الأكثر دلالة؟ ما هو أسهل عرض (في تخطيط 2 أعمدة)؟ ما الذي تنصحني باستخدامه وأي أسباب؟

(HTML / CSS Slippets أكثر من موضع ترحيب)

Answer 1

رائع. لدينا حقا خائفة الجميع قبالة مع "تخطيطات الطاولة هي الشر! استخدام CSS! " أشياء، أليس كذلك؟

طاولة <th> للملصقات و <td> بالنسبة للقيم - ينطبق تماما على هذا النوع من المحتوى، يمنحك التقديم الذي تريده، وهو على الأقل صحيح بشكل غير صحيح كقائمة تعريف، يمكن القول ذلك. إما أن تكون الأفضلية على divs الخالية من الدلالات.

Answer 2

أعتقد أن أكثر صحة أكثر دلالة سيكون <dl>, <dt> و <dd>, ، لأن ما تعرضه بشكل فعال تعريفات الاسم الأول والعمر والبريد الإلكتروني.

<dl>
  <dt>First Name</dt>
  <dd>Dominic</dd>
  <dt>Age</dt>
  <dd>24</dd>
  <dt>E-mail</dt>
  <dd>foo@bar.com</dd>
</dl>

ومع ذلك، من الواضح أن أسهل طريقة لعرضه في جدول يستخدم <table>, <th> و <td>. وبعد يمكنك الاختراق معا تخطيط طاولة باستخدام قوائم التعريف باستخدام شيء مثل هذا:

dt { float: left; clear: left; width: 6em; font-weight: bold; }
dd { float: left; }

مزيد من المعلومات حول <dl> العلامة المتاحة هنا.

Answer 3

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

قوائم التعريف:

<dl>
  <dt>Label</dt>
  <dd>Value</dd>

  <dt>Label 2</dt>
  <dd>Value 2</dd>
</dl>

مع CSS:

dl dt {
  float: left;
  width: 200px;
  text-align: right;
}

dt dd {
  margin-left: 215px;
}

Answer 4

هذا سؤال جيد وهو أيضا واحد مفتوح إلى الكثير من النقاش لأنه لا توجد طريقة ثابتة للقيام بذلك.

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

<div class="profile">
    <p>
        <span class="label">First Name</span>
        <span class="value">MyName</span>
    </p>
    <p>
        <span class="label">Age </span>
        <span class="value">MyAge</span>
    </p>
    <p>
        <span class="label">Email</span>
        <span class="value">MyEmail</span>
    </p>
</div>

أو

<ul class="profile">
    <li>
        <span class="label">First Name</span>
        <span class="value">MyName</span>
    </li>
    <li>
        <span class="label">Age </span>
        <span class="value">MyAge</span>
    </li>
    <li>
        <span class="label">Email</span>
        <span class="value">MyEmail</span>
    </li>
</ul>

سوف CSS تبدو مثل هذا؛

.profile p {
    overflow: hidden;
}

.profile .label {
    vertical-align: top;
    float: left;
    width: 40%;
}

.profile .value{
    vertical-align: top;
    float: left;
    width: 60%;
}

السبب لعدم الرجوع إلى أي اسم عقدة HTML معين في CSS هو أنه إذا كانت في المستقبل هناك طريقة معترف بها في القيام بذلك، فعليك فقط تغيير أسماء العقدة في HTML.