このレイアウト（CSSまたはテーブル）を作成する最も良い方法は何ですか？

Question

私は利用可能なサブスクリプションがあるアプリケーションを開発しています。私は、以下のスキーマ（テーブルやCSSを使用）のようなデータを構造化する最良の方法が何であるかを知りたかったのです。 （申し訳ありませんが、私は仕事と私は無料の画像ホスティングサービス上で何をしたいの画像を投稿しないで風邪にしています。）

 
|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯| 
| Location: xxxxxxxxx-xxxx-xxx     Maximum subscription date: 12-11-2009 | 
| Begin date: 12-15-2009            Cost: $ 150  | 
| Duration: 2 Days                 | 
| Status:  Confirmed with remaining places       [Subscription] | 
|                      | 
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ 
|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯| 
| Location: xxxxxxxxx-xxxx-xxx     Maximum subscription date: 12-12-2009 | 
| Begin date: 12-15-2009            Cost: $ 150  | 
| Duration: 2 Days                 | 
| Status:  Confirmed with remaining places       [Subscription] | 
|                      | 
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ 

私はテーブルを考えていたが、私はこれがために最も適切な方法であることを確認していませんこの。

Answer 1

あなたはCSSでそれを行うことができますが、提示しようとしているデータの種類について考えることができます。実際にはテーブルのデータです。だから私はこのためのテーブルを使用することをお勧めします。

実際にテーブルには多くの不具合がありますが、テーブルを避ける必要があるのは、レイアウト目的で（具体的には）を使用している場合のみです（テーブルを提示する必要はありません）。このような状況でテーブルを使用すると、テーブルが正しく使用されます。など

Answer 2

レイアウト用のテーブルがどれほど嫌いでも、テーブルを言う必要があります。

Answer 3

コンテンツのテーブルには、本質的に表形式のデータであるため、そのような状況、期間などの見出しのためのTHを十分に活用することを確認し、

Answer 4

あなたは

欲しいものに依存しますあなたの質問の例は、今ではいくつかの行のテキスト、次に別のボックスなどのように見えます。

もしこれが必要なのであれば、CSSでスタイルを付けたdivを提案します。より明確に「列と行」のレイアウトの場合は、表を参照してください。

Answer 5

私は今開発しているフォームでほぼ同じことをしています。私は定義リストを使用しています。例：

<dl> 
    <dt>Location:</dt> 
    <dd>xxxxxxx-xxxxx</dd> 
    .... 
</dl> 

このようにするのは少し難しくなりますが、コードはより洗練されたIMHOに見えます。 （私にとって、それはあまりにもテーブルでそれを行うには大丈夫だ）テーブル

Answer 6

表示表形式のデータは、私は人々が彼らの（X）HTMLのテーブルタグを使用する膝ジャークネガティブな反応を介して取得する必要があると思います。それは有効なタグのセットであり、「正方形」データをレンダリングして整理します。彼らに熱心に反対するつもりなら、スマートに指定し、残りはには不適切で、意味的に不適切な使用はです。ロゴとヘッダーをレイアウトするためにテーブルを使用しないでください。これは表形式のデータではありません。情報の行と列の間の関係を示す正方形の方法でデータを表示していますか？その後、テーブルを使用してください！

具体的には、セマンティックマークアップ（Dan C.さんに感謝します）を理解した上で、テーブルや定義リストのいずれかをお勧めします。これはあなたが書きたいものを正確に表しています。

Answer 7

で

Answer 8

私が個人的にテーブルを避けるのは、データが非常に多くのテーブル駆動型（Excelのような結果）でない限りです。この場合、divのコレクション、またはliベースのものがおそらく最も良いでしょう。（下の擬似マークアップ）

UL 
    LI 
    DIV.left 
     DL 
     DT LABEL {label} /LABEL /DT 
     DD {detail} 
     /DL 
     ... 
    /DIV.left 

    DIV.right 
     ... 
    /DIV.right 

    DIV.subscribe ... /DIV.subscribe 
    /LI 
    ... 
/UL

注：私は入力フォームに同様の手法を使用しているためです。一貫性を維持することで、不要なCSSを減らすことができます。

浮動小数点の場合、浮動小数点のためのLIの配置は相対的なものになり、CSSと箇条書きの特定のスタイリングが排除されます（IEではこの部分をPITAにします。リスト> DIV.list-itemは実際の使用の点では良いかもしれません。