45

ラベルとそれに関連する値のリストを含むプロファイルユーザーコンテナをレンダリングしたいと思います。

これが私が表示したい情報とレイアウトの抜粋です：

名.......MyName

年齢...................MyAge

メール................MyEmail

利用できる例がたくさんあることは知っていますが、問題は、一般的に受け入れられている解決策がないように見えることです。

これまでのところ、私は次の使用法を見てきました：

  1. マークアップのあるテーブル（および<tr>、<td> ...）
  2. <ul>マークアップ（および<li>、<div> ...）の順序付けされていないリスト
  3. <h1>、<h2>...<p>の通常のマークアップ
  4. <DL>、<DT>、<DD>の定義リスト
  5. <ラベル>...？

最も意味的に正しいものは何ですか？（2列のレイアウトで）表示するのが最も簡単なものは何ですか？何を使用するように、そしてどのような理由で私にアドバイスしますか？

（html / cssコードスニペットは大歓迎です）

4

4 に答える 4

37

表示しているのは事実上、名、年齢、および電子メールの定義であるため、最も意味的に正しいのは、、およびだと思い<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>
  <dt>First Name</dt>
  <dd>Dominic</dd>
  <dt>Age</dt>
  <dd>24</dd>
  <dt>E-mail</dt>
  <dd>foo@bar.com</dd>
</dl>

<dl>タグの詳細については、こちらをご覧ください。

于 2009-11-06T13:58:15.093 に答える
22

わお。「テーブルのレイアウトは悪です！CSSを使用してください！」もの、私たちはそうではありませんか？

<th>ラベルと値を含むテーブル<td>は、この種のコンテンツに完全に適用可能であり、必要なレンダリングを提供し、少なくとも定義リストと同じくらい意味的に正しいです。セマンティクスのないdivよりもどちらかが望ましいです。

于 2009-11-06T15:04:38.973 に答える
4

私はこれが答えられたことを知っていますが、定義リストは完全に適切であると思います。
私は、テーブルが常に表形式のデータに適しているという意見に同意します...しかし
、私はテーブルを避けたいと思った多くの場所でこれを使用しました-そしてそれは間違った方法ではないと思います。

定義リスト：

<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;
}
于 2012-07-29T07:31:02.090 に答える
-1

これは良い質問であり、これを行うための固定された方法がないため、多くの議論に開かれている質問でもあります。

それらの多くには議論がありますが、私個人的には、それを単純に保ちます。

<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%;
}

CSSで特定のhtmlノード名を参照しない理由は、将来これを行う方法が認められている場合は、HTMLのノード名を変更するだけでよいためです。

于 2009-11-06T14:08:56.103 に答える