0

最近、職場で少しのデータをどのように提示するのが最善かについていくつかの議論があり、特定のページがテーブルを使用して情報を表示するかどうかと、Bootstrap を使用して疑似テーブルを作成するかどうかについて、内部的な対立があるようです。

これは、先に進んでテーブルを使用して情報を表示することにした場合、ソースはどのように見えるかです。条件付きガフの一部が削除されました。

  <table class="table well">
  <thead>
      <th> Name </th>
      <th> Detail #1 </th>
      <th> Detail #2 </th>
      <th> Detail #3 </th>
  </thead>
  <tbody class="sortable">
  {% for m in model_list %}
      <tr id="{{ m.id }}">

          <td><span class='number-style'> {{ forloop.counter }}.</td>
          <td>{{ m.name}}</td>
          <td>{% autoescape off %}{{ m.detail1 }}{% endautoescape %} </td>
          <td>{% autoescape off %}{{ m.detail2}}{% endautoescape %} </td>
          <td>{% autoescape off %}{{ m.detail3}}{% endautoescape %} </td>
        </tr>
    {% endfor %}
  </tbody>

これはブートストラップ div を使用したものです

{% for m in model_list %}
<div class="row">
    <div class="span2">
    {{ m.name }}
    </div>

    <div class="span2" style="word-wrap: break-word">
        {% autoescape off %}{{ m.details1 }}{% endautoescape %}
    </div>

    <div class="span2" style="word-wrap: break-word">
        {% autoescape off %}{{ m.details2 }}{% endautoescape %}
    </div>

    <div class="span2" style="word-wrap: break-word">
        {% autoescape off %}{{ m.details3 }}{% endautoescape %}
    </div>

</div>
{% endfor %}

これらは両方ともブートストラップでレイアウトされたページ内に含まれており、ページ上のこれらの「テーブル」のそれぞれの複数のインスタンスである可能性があることに注意してください。どちらの方法がより一般的に好まれますか?

4

1 に答える 1

0

すべての行の詳細 1 のデータ型は同じですか? 詳細2と3についても同様ですか？行間の関係がすべて 3 つの詳細を持つが、これら 3 つの詳細がさまざまなタイプであり、特にタイプ 1、タイプ 2、タイプ 3 ではない場合、テーブルの使用は正しい方法ではありません。

たとえば、書籍をリストしていて、その詳細が固定されていて [著者、カテゴリ、価格] のタイプである場合、間違いなくテーブルを使用します。

しかし、[著者、カテゴリ、価格] をリストしている本もあれば、[著者、出版社、版] をリストしている本もあれば、まったく別のセットをリストしている本もある場合、表は適切な方法ではありません。表は、視覚的なスタイリングや配置に使用しないでください。

あなたのコードを見ると、詳細が同じデータ型であるため、表に表示する必要があると強く感じます。

于 2012-07-12T19:13:38.470 に答える