thay vì bảng html sử dụng div .. ok nhưng bảng dễ dàng như vậy

Question

Guys Tôi là một lập trình viên và khi tôi cần phải thêm một cái gì đó trông giống như một bảng trong mắt và sử dụng bảng html, tôi luôn luôn nhận được smaked bởi trang web của tôi nhà thiết kế. Làm thế nào tôi có thể xây dựng một cấu trúc div html phổ biến cho divs vì vậy tôi chỉ có thể có nó và luôn luôn sao chép dán html khi bao giờ tôi cần một cái gì đó trông giống như một bảng?

Vì vậy, trong trường hợp của bảng này cấu trúc html

<table> 
<tr><td></td><td></td></tr> 
<tr><td></td><td></td></tr> 
<tr><td></td><td></td></tr> 
</table> 

cấu trúc div tương tự là gì?

Answer 1

Bạn sẽ muốn sử dụng màn hình hiển thị table, table-row, và table-cell:

CSS:

.table 
{ 
    display:table; 
} 

.table-row 
{ 
    display:table-row; 
} 

.table-cell 
{ 
    display:table-cell; 
} 

HTML:

<div class="table"> 
    <div class="table-row"> 
     <div class="table-cell">1</div> 
     <div class="table-cell">2</div> 
    </div> 
    <div class="table-row"> 
     <div class="table-cell">3</div> 
     <div class="table-cell">4</div> 
    </div> 
</div> 

Demo

Lưu ý rằng table, table-row và table-cell giá trị hiển thị không được hỗ trợ trong IE7 trở xuống và IE8 cần một DOCTYPE!

Ngoài ra, các bảng nên được sử dụng để biểu diễn dữ liệu dạng bảng vì nó cho phép đánh dấu ý nghĩa ngữ nghĩa hơn một loạt các div với các lớp. Bạn không nên sử dụng bảng cho mục đích bố trí.

Answer 2

tôi sẽ sử dụng phong cách nội tuyến cho đơn giản nhưng không muốn giới thiệu chúng trong một dự án thực:

<div style="overflow: hidden"> 
    <div style="width: 50%; float: left"></div> 
    <div style="width: 50%; float: right"></div> 
    <div style="width: 50%; clear: both; float: left"></div> 
    <div style="width: 50%; float: right"></div> 
</div> 

Đây là một trong nhiều giải pháp.

Các bit overflow: hidden được sử dụng để "tự rõ" div container (không có nó div sẽ không quấn quanh trẻ em nổi của nó). Lý do thứ ba div xóa cả hai là để nó ám trên hàng riêng của mình.

Chỉnh sửa: Vì divs có chiều rộng 50% nên không cần phải thả từng div khác sang bên phải (bạn có thể thả chúng sang bên trái và trông sẽ giống nhau) nhưng nếu bạn muốn một số lề giữa các div bạn có thể chỉ cần thay đổi chiều rộng và mọi div khác sẽ vẫn được căn chỉnh về bên phải (điều này sẽ không xảy ra nếu chúng được chuyển sang bên trái).

Chỉnh sửa: Nếu bạn đang thực tế đánh dấu dữ liệu dạng bảng (như một số nhận xét được đề xuất) thì tất cả có nghĩa là gắn bó với phần tử bảng. Đó là những gì nó có cho. Bạn nên hoàn toàn không phải chỉ cần chuyển từ table, tr và td thành div s với các lớp có cùng tên.

Answer 3

Nếu bạn đang sử dụng phần tử HTML table cho dữ liệu dạng bảng, thì tôi khuyên bạn nên đập các nhà thiết kế web đồng nghiệp của mình trở lại!

Bảng HTML không phải là điều xấu, có thể chấp nhận được &, để sử dụng HTML table khi hiển thị dữ liệu dạng bảng.

http://webdesign.about.com/od/tables/a/aa122605.htm

Answer 4

tôi sẽ đề nghị sử dụng một số cách bố trí như powerbuoy gợi ý nhưng vì bạn sẽ muốn để phù hợp với cấu trúc với quy mô khác nhau trong các tình huống khác nhau mà bạn có thể muốn sử dụng một hệ thống lưới điện trong css của bạn để tập trung bố trí thiết kế .

.left { float:left; } 
.right { float: right } 
.onetenth { width: 10%; } 
.onetwentieth { width: 5%; } 

và vân vân ...

Tôi hứa với các bạn phương pháp này sẽ làm giảm phong cách của bạn bởi rất nhiều dẫn đến hiệu suất cao hơn.

see: https://github.com/stubbornella/oocss/wiki/ (hướng đối tượng CSS)