Sử dụng CSS cách tốt nhất để hiển thị cặp giá trị tên?

Question

Tôi có nên vẫn đang sử dụng các bảng không?

đang Bảng Tôi muốn được thay thế là:

<table> 
    <tr> 
     <td>Name</td><td>Value</td> 
    </tr> 
    ... 
</table> 

Từ những gì tôi đã đọc tôi nên có cái gì đó như

<label class="name">Name</label><label class="value">Value</value><br /> 
... 

Ý tưởng và liên kết với mẫu trực tuyến đánh giá rất cao. Tôi là một nhà phát triển ra khỏi chiều sâu thiết kế của tôi.

EDIT: Nhu cầu của tôi là có thể vừa hiển thị dữ liệu cho người dùng vừa chỉnh sửa các giá trị theo dạng riêng biệt (nhưng gần giống hệt).

Answer 1

Tôi nghĩ rằng danh sách định nghĩa khá gần với ngữ nghĩa đối với các cặp tên/giá trị.

<dl> 
    <dt>Name</dt> 
    <dd>Value</dd> 
</dl> 

Definition lists - misused or misunderstood?

Answer 2

Tôi nghĩ rằng bảng được sử dụng tốt nhất cho dữ liệu dạng bảng, có vẻ như bạn có ở đó.

Nếu bạn không muốn sử dụng bảng, điều tốt nhất là sử dụng danh sách định nghĩa (<dl> and <dt>). Dưới đây là cách tạo kiểu cho chúng trông giống như bố cục cũ của bạn <td>. http://maxdesign.com.au/articles/definition/

Answer 3

sử dụng float: ví dụ như bất động sản: css:

.left { 
    float:left; 
    padding-right:20px 
} 

html:

<div class="left"> 
Name<br/> 
AnotherName 
</div> 
<div> 
Value<br /> 
AnotherValue 
</div> 

Answer 4

Nó hoàn toàn hợp lý để sử dụng bảng cho những gì có vẻ là bảng dữ liệu.

Answer 5

Nếu tôi đang viết một hình thức tôi thường sử dụng này:

<form ... class="editing"> 
    <div class="field"> 
     <label>Label</label> 
     <span class="edit"><input type="text" value="Value" ... /></span> 
     <span class="view">Value</span> 
    </div> 
    ... 
</form> 

Sau đó, trong css của tôi:

.editing .view, .viewing .edit { display: none } 
.editing .edit, .editing .view { display: inline } 

Sau đó, với một chút Javascript tôi có thể trao đổi các lớp có dạng từ chỉnh sửa để xem.

Tôi đề cập đến phương pháp này vì bạn muốn hiển thị và chỉnh sửa dữ liệu với bố cục gần giống nhau và đây là cách thực hiện.

Answer 6

Giống như macbirdie Tôi muốn có khuynh hướng đánh dấu dữ liệu như thế này dưới dạng danh sách định nghĩa trừ khi nội dung của bảng hiện có có thể được đánh giá thực tế là là nội dung dạng bảng.

Tôi tránh sử dụng thẻ nhãn theo cách bạn đề xuất. Hãy xem giải thích về thẻ nhãn @http://www.w3schools.com/tags/tag_label.asp - nó thực sự có ý định cho phép bạn tập trung vào kiểm soát được liên kết của nó. Cũng tránh sử dụng divs chung và kéo dài như từ một điểm ngữ nghĩa của xem họ đang yếu.

Nếu bạn hiển thị nhiều cặp tên-giá trị trên một màn hình, nhưng chỉ chỉnh sửa một cặp trên màn hình chỉnh sửa, tôi sẽ sử dụng bảng trên màn hình cũ và danh sách định nghĩa trên màn hình sau.

Answer 7

danh sách định nghĩa ngang làm việc khá tốt, ví dụ:

<dl class="dl-horizontal"> 
     <dt>ID</dt> 
     <dd>25</dd> 

     <dt>Username</dt> 
     <dd>Bob</dd> 
    </dl> 

Lớp dl-horizontal được cung cấp bởi khuôn khổ Bootstrap CSS.