在CSS中處理這個簡單例子的好方法是什麼？

Question

比方說，我有以下佈局上的一些網頁：

   Title: Some Title 
       Author: Some Author 
Author Date of Birth: Date of birth 

注：

• 左側文字是右對齊和大膽。
• 用於多個不同的頁面。
• 右側可以包含某些點的輸入控件。

在這種情況下最合適的方法是什麼？我能想到的幾個選項（承擔外部樣式表應用CSS）：

表

簡單，容易，但我不知道這會被認爲是一個很好的使用表。

<table> 
<tr> 
    <td>Title</td> 
    <td>Some Title</td> 
</tr> 
</table> 

DIV +類

我覺得這是divitis的情況和classitis集於一身。

<div class="information"> 
<div class="title">Title</div><div class="value">Some Title</div> 
</div> 

div容器

這感覺更像是在正確的道路，但我不知道。

<div class="information"> 
<strong>Title</strong> <span>Some Title</span> 
</div> 

建議？

Answer 1

我認爲你是對的在你說你想使用一個表，但不想使用。在這種情況下，我不認爲一張桌子是正確的。我個人只使用表格，如果我需要很好地組織數據。因爲你有這麼多東西，所以到處都是一堆浮動div更麻煩，然後只是使用一張表。

因爲這隻有兩列，我會說使用使用兩個div與浮動或使用兩個跨度，而不是強大的使用跨度，然後用css樣式。

Answer 2

使用一個表格，這是少數幾個使用表格實際上並不是所有錯誤的例子之一。你並沒有將它用於佈局，而是使用文本標記。

然後對每個第一列應用一個類，並在CSS中使該類具有適用於該列的text-align: right;。

Answer 3

這顯然是何時使用表的一個很好的例子。

它是表格數據。

使用th s可以對第一列單元格進行樣式設置。

我甚至認爲th s默認爲粗體。不知道所有的瀏覽器，但不會傷害他們的風格大膽肯定:)。

Answer 4

表格是以行和列排列數據的一種方式。

這就是你在做什麼。

Answer 5

我認爲這裏的一個很好的語義選擇是dl（描述列表）元素。

http://developers.whatwg.org/grouping-content.html#the-dl-element

<dl> 
    <dt>Title</dt> 
    <dd>Some Title</dd> 

    <dt>Author</dt> 
    <dd>Some Author</dd> 

    <dt>Author Date of Birth</dt> 
    <dd>Date of birth</dd> 
</dl> 

Answer 6

定義清單將是語義正確的。

<dl> 
    <dt>Title:</dt> 
    <dd>Some Title<dd> 

    <dt>Author:</dt> 
    <dd>Some Author</dd> 

    <dt>Author Date of Birth:</dt> 
    <dd>Date of birth</dd> 
    </dl> 

見W3C更多細節 - http://www.w3schools.com/tags/tag_dl.asp