Thực hành tốt nhất: Bảng, Div, Danh sách hoặc một số kết hợp ...?

Question

Tôi có một dữ liệu đơn giản với ít hơn 100 hàng. Tôi hiện đang hiển thị dữ liệu trong một loạt các DIV lồng nhau. Mỗi hàng có một div chứa, với các div lồng nhau đại diện cho các cột dữ liệu bên trong nó. (Đây là phản ứng từ những ngày mã hóa sớm nhất của tôi khi không có gì giống như một div).

Cột dữ liệu đầu tiên được định dạng dưới dạng liên kết hình ảnh, trong khi hai cột còn lại là văn bản.

Bạn có ý định quay lại sử dụng bảng không?

Ngoài ra, như một thử nghiệm, tôi đã nghĩ về việc sử dụng tổ UL. Một UL chứa tất cả các hàng và một UL ngang riêng biệt cho mỗi hàng.

Là lưu ý/câu hỏi khác, tôi có một khối dữ liệu khác có thể dẫn đến hàng nghìn hàng. Số lượng dữ liệu đó có dẫn đến một câu trả lời khác cho 'thực hành tốt nhất' trong trường hợp này không?

Answer 1

Thực tế, bạn có thể sử dụng bất kỳ vùng chứa nào bạn muốn. Thực hành tốt nhất là sử dụng các yếu tố cho những gì họ đã có nghĩa là để được sử dụng cho. Nếu bạn đang hiển thị dữ liệu dạng bảng, bằng mọi cách, hãy sử dụng một bảng! Có các plugin tuyệt vời để làm cho trải nghiệm của người dùng tốt hơn và thật dễ dàng để đọc và sao chép/dán.

Câu hỏi mà tôi luôn tự hỏi là liệu dữ liệu đó có được hiển thị tốt nhất trong tệp Word hay Excel không. Nếu Excel, thì đó là một bảng. Nếu Word, đó là của div.

Nếu bạn đang sử dụng hàng nghìn hàng, bạn có thể muốn kiểm soát người dùng về sắp xếp, lọc và kéo thêm thông tin để hỗ trợ khả năng sử dụng. Tôi muốn sử dụng một bảng với một số plugin jQuery như tablesorter, hovertable và tableFilter để giúp thực hiện điều này dễ dàng.

Answer 2

Trong trường hợp này, bảng là tốt. Bảng để hiển thị dữ liệu dạng bảng, giống như một hàng trong db. Bạn nên tránh sử dụng các bảng cho bố cục trang mặc dù ....

Đối với việc có hàng nghìn hàng, bạn có thể muốn xem xét phân trang. Tôi không nghĩ có một "thực hành tốt nhất" tốt hơn là

Answer 3

Nếu tôi cần hiển thị dữ liệu trong bảng theo cách thích, tôi chủ yếu sử dụng phần tử <table>. Bạn nên suy nghĩ về sự thân thiện với người dùng khi hiển thị 1000 hàng trở lên. Plugin jqGrid là giải pháp tốt cho điều đó và có các tính năng như phân trang, sắp xếp, tìm kiếm, v.v.

Answer 4

Danh sách dành cho danh sách, bảng dành cho dữ liệu dạng bảng và div là dành cho bố cục. Vì vậy, nếu bạn muốn đi con đường thực hành tốt nhất; Tôi nghĩ bạn nên sử dụng một bảng ở đây.

Điều đó đang được nói; sử dụng divs như trái ngược với bảng không phải là tất cả những gì xấu. Tôi sẽ không lo lắng về việc viết lại nếu bạn đã sử dụng div thay vì một bảng. Một trong những caveat được bạn đang xóa divs cột nổi của bạn. ví dụ:

<div class="row"> 
    <div class="column" style="float:left;"><!-- Some stuff --></div> 
    <div class="column" style="float:left;"><!-- Some stuff --></div> 
    <div class="column" style="float:left;"><!-- Some stuff --></div> 
    <div style="clear:both;"><!-- Leave empty --></div> 
</div> 

Điều bạn nên tránh là ngược lại (sử dụng bảng nơi sử dụng div).

Ngoài ra, mặc dù bạn có thể nhận được một số loại cấu trúc bảng sử dụng các phần tử danh sách, đây KHÔNG phải là tuyến đường bạn muốn đi. Tôi đã không bao giờ thực hiện nó trước ... thành thật trong số hàng trăm ví dụ tôi đã nhìn tôi không nghĩ rằng tôi đã từng nhìn thấy bất cứ ai sử dụng chúng cho một mục đích như vậy. Tôi đoán lý do tốt nhất ở đây là tại sao bạn? Vì tôi chưa bao giờ thấy nó trước khi tôi không có bất kỳ ví dụ nào có ích để minh họa tại sao bạn không nên làm điều đó. Nhưng đối với tôi, điều này cũng giống như nói với một người nào đó không sử dụng một đường ống để nới lỏng một cái chốt khi họ có một cái cờ lê tiện dụng. Ý tôi là ....có lẽ các đường ống có thể hoàn thành công việc nhưng chìa khoá là đúng đó ...