2010-04-01 22 views
11

Tôi biết có nhiều đối số tốt khác nhau thích vị trí CSS trên bố cục dựa trên bảng. Những gì tôi tự hỏi là liệu các mô hình CSS là hoàn thành (giả sử một trình duyệt tương đối hiện đại) đối với tất cả các khả năng của bảng. Có bố cục nào mà các bảng có thể đạt được là không thể hoặc không thực tế với CSS?Những bảng nào có thể làm việc định vị CSS đó không thể?

Trả lời

5

Tôi sẽ chuyển sang bố cục dựa trên css nếu có thể. Các đối số chuyên đề là chính xác, nhưng có những cân nhắc thực tế.Bàn sẽ:

  • hoàn toàn ngăn chặn 'bọc phao', nơi một div sẽ giảm xuống dòng tiếp theo vì không có đủ không gian cho nó
  • cung cấp cho bạn các cột cùng chiều cao
  • cho phép bố trí năng động, nơi rộng và chiều cao không biết cho đến khi thời gian chạy
  • cung cấp colspans và rowspans
  • giảm số lượng SO đặt câu hỏi làm thế nào để làm công cụ mà không có bàn :)

Có các thuộc tính hiển thị css (ô bảng, vv) bắt chước một số điều này, nhưng tôi không tin rằng sự hỗ trợ này đã đủ rộng để sử dụng chúng (trừ khi bạn có thể kiểm soát lựa chọn trình duyệt của người dùng).

Trang web tôi thực hiện yêu cầu độ rộng cột động cạnh tranh trong bố cục. Nhiều khách hàng sử dụng cùng một mẫu trang web và tôi không biết họ sẽ đưa gì vào trình đơn hoặc tiêu đề trang hoặc các ô nội dung. (Và không có ý tưởng gì họ sẽ thấy hấp dẫn, đó là một vấn đề khác ...) Sử dụng một bảng bên ngoài duy nhất để đặt ra các phần chính của trang web cho phép sự linh hoạt tôi cần mà không lo lắng rằng một menu hơi quá rộng sẽ đẩy hộp nội dung chính xuống hàng tiếp theo hoặc màu nền đó sẽ không lấp đầy chiều cao yêu cầu.

Trong thế giới hoàn hảo (với tôi), chúng tôi sẽ có <table> s cho dữ liệu dạng bảng và một tập hợp thẻ gần giống hệt cho bố cục - gọi nó là <layout> (cùng với thẻ ô và hàng tương ứng). Hoặc, thêm thuộc tính 'chế độ' vào thẻ <table> - các giá trị sẽ là 'dữ liệu' và 'bố cục' để trình đọc màn hình và công cụ tìm kiếm biết phải làm gì. Có lẽ trong html 6 ...

Chỉnh sửa: Tôi muốn thêm vào, liên quan đến điều 'bọc nổi' - có câu hỏi hiện tại về SO với câu trả lời hoạt động khá tốt here. Nó không phải là hoàn hảo, và quá tôi nó quá phức tạp, nhưng nó sẽ giải quyết vấn đề trong nhiều trường hợp.

+0

+0 cho đầu tiên, -1 cho thứ 2 và thứ 3, +1 cho thứ 4 và thứ năm. : D – ANeves

+1

@sr pt: Tôi vui vì bạn đã cho tôi +0 cho lần đầu tiên, thay vì -0 ... Nghiêm túc, tôi đã thấy cách giải quyết một phần cho hầu hết các công cụ này, nhưng không bao giờ cho chiều rộng thực sự động (thứ 3 của tôi). Bạn có gì cho tôi không? – Ray

4

Bảng có nghĩa là và nên được sử dụng cho dữ liệu dạng bảng chứ không phải cho cấu trúc. Cá nhân tôi thấy các bảng được sử dụng như một cách dễ dàng, và tôi chưa bao giờ gặp phải một tình huống không thể được giải quyết bằng CSS.

Bảng chắc chắn dễ dàng hơn cho các cột định vị dọc và chiều cao đầy đủ, nhưng một lần nữa điều này có thể được khắc phục bằng CSS.

+0

Tôi không phải là người ủng hộ các góc cắt trong lập trình nhưng có những trường hợp "hack" tốt hơn là làm điều gì đó "lý tưởng". Bảng Html hoạt động. Trong mọi trình duyệt. Luôn luôn. Họ rất đơn giản để hiểu và duy trì. CSS là đối diện của điều này khi nói đến đặt ra divs. – Nemi

+0

@Nemi - Boo! Vậy thì tiêu chuẩn cho là gì? –

+0

+ -0 Tôi hoàn toàn không đồng ý. Có * là * các tình huống không thể xử lý được nếu không có bảng hoặc JavaScript. Các nhà thiết kế tiêu chuẩn CSS đã làm một công việc kém trong việc cung cấp các lựa chọn thay thế cho 'bảng' để sử dụng trong các bố trí - tại sao, tôi không biết.Đối với "cách dễ dàng", tôi đưa nó cho bạn rằng khi lựa chọn giữa một dòng năm '

'xây dựng, hoặc 80 dòng CSS cộng với ba hack trình duyệt cụ thể cho IE6 và 7 và có thể 8, cộng với một khối JavaScript vì (Safari | Opera | xyz) không hỗ trợ điều này và lớp giả, "cách dễ dàng" thực sự là đúng cách. –

0

Cái nhìn khủng khiếp?

Nghiêm túc. Một ví dụ điển hình của những người sử dụng bảng là chúng làm cho việc hiển thị các trường biểu mẫu trở nên dễ dàng hơn rất nhiều, nhưng nó hoàn toàn lộn xộn với khả năng truy cập và ý nghĩa ngữ nghĩa của các trang. Bạn có thể đạt được cùng một và tốt hơn với một chút nỗ lực hơn trong CSS.

0

Bạn có thể làm điều tương tự với CSS, nhưng nó không thường là thanh lịch.

Bảng quan trọng để hiển thị dữ liệu dạng bảng (ví dụ: KHÔNG PHẢI). Chúng là các cấu trúc logic, ngữ nghĩa và nên được sử dụng như vậy. Chúng chứa các khái niệm như cột và hàng, chỉ riêng CSS đó thôi.

+0

Tôi không chắc chắn tôi mua đối số "chúng dành cho dữ liệu TABULAR". Bạn nhận ra rằng http/html có nghĩa là cho nội dung STATIC, phải không? Và rằng các ứng dụng web và trạng thái tiết kiệm trong phiên là một sự đảo lộn về điều đó, phải không? Sử dụng một công cụ cho một cái gì đó bởi vì nó hoạt động tốt, ngay cả khi nó không được ban đầu được thực hiện cho việc sử dụng đó là không sai. Nó chỉ là thông minh. – Nemi

+0

Với logic của bạn Nemi, chúng ta vẫn nên sử dụng các câu lệnh FONT trực tuyến và các GIF spacer. Không chỉ có công nghệ phát triển, mà còn có NGH TH R onNG về cách sử dụng công nghệ này. Chắc chắn bạn CÓ THỂ sử dụng bảng để bố trí, và bạn cũng có thể đập trong móng tay với một ROCK. –

-1

save you time

+0

với những gì hy sinh? –

+0

vui mừng khi thấy rằng bạn đồng ý với câu trả lời của tôi – Anurag

1

Tôi đã có một! Có cái gì đó dường như tôi không thể với css, nhưng có thể với các bảng. Tôi vừa hỏi một câu hỏi vào ngày hôm qua và nhận được câu trả lời.

Nếu bạn có hai phần tử riêng biệt mà bạn muốn trên một dòng, bất kể chiều rộng, bạn phải sử dụng bảng. Nghĩa là, nếu hai phần tử là nội dòng hoặc được thả nổi, nếu chúng có kích thước động và trở nên rộng hơn vùng chứa, chúng sẽ phá vỡ dòng tiếp theo thay vì tràn. Nếu bạn hoàn toàn yêu cầu họ ở trên cùng một dòng ngay cả khi thứ hai sẽ tràn chiều rộng của container, thì chúng cần phải là các ô trong một hàng của bảng.

chỉnh sửa: một chút thử nghiệm cho thấy điều này chỉ đúng với các phao. Nếu các phần tử của bạn hiển thị nội tuyến hoặc nội tuyến, bạn có thể đặt white-space:nowrap trên vùng chứa. Tuy nhiên trong trường hợp này có vẻ như (trong FF anyway) có một không gian bí ẩn giữa các yếu tố, cho mục đích của tôi ngày hôm qua, sẽ là một vấn đề.

+0

Tôi không chắc điều này là đúng. Có nhiều cách để kiểm soát hành vi gói trong CSS. – jlew

+0

thì ai đó đã nói dối tôi trong câu hỏi của tôi hôm qua. Sẽ xóa nếu tôi có thể tìm thấy nó. – Tesserex

+0

Có lẽ chúng đúng trong một số trường hợp hạn chế. Như một tuyên bố chung, tôi không nghĩ nó chính xác. – jlew

6

CSS không có cách xử lý dữ liệu thực sự tốt. Nếu dữ liệu của bạn là chính nó, được cấu trúc theo hàng và cột thì thẻ table vẫn là cách tốt nhất để trình bày nó. Trong khi bạn có thể "giả mạo nó" trong CSS, nó kết quả phức tạp, khó duy trì mã không có lý do thực sự.

Lưu ý rằng dữ liệu dạng bảng không nhất thiết phải luôn có nghĩa là chỉ các bảng số. Đôi khi các biểu mẫu và các loại nội dung tương tác khác cũng có thể có dạng bảng, nếu các trường của chúng được nhóm một cách hợp lý thành các cột và hàng. Điểm mấu chốt là tự hỏi mình, "liệu tôi có nghĩ dữ liệu của mình là hàng và cột nếu tôi viết nó trên một trang và máy tính không liên quan gì đến nó?"

+0

+1 mặc dù "không có lý do thực sự" – ANeves

+0

@sr pt - Tôi không đồng ý. Kết quả cuối cùng là những gì người dùng nhìn thấy. Nếu sử dụng tất cả các thiết kế CSS làm cho bạn cảm thấy tốt bên trong, nhưng phải mất ba lần để làm, bạn đang hoàn thành không có gì khác hơn là chi phí thời gian và tiền bạc của công ty bạn. – Nemi

+0

Dan là chính xác - một định nghĩa tốt về 'bảng' là 'thứ xếp hàng gọn gàng trong hàng và cột'. Giống như hầu hết các biểu mẫu nhập dữ liệu. Giống như các cột kiểu báo. Giống như cấu trúc chính của hầu hết các trang web. – Ray

0

Bảng có thể làm gì để định vị CSS đó?
Về lý thuyết, không có gì, vì bạn có thể sử dụng display: table;, display: table-cell; hoặc các giá trị khác như vậy cho display.

< ArgumentOnSemanticsUsabilityAndAcessibility/>

+0

Vâng, vâng. Nhưng điều đó làm cho nó thành một cái bàn vì vậy tôi nghĩ rằng bên ngoài tinh thần của câu hỏi. – jlew

+0

Nhưng khác hơn là 'đảm bảo [float'ed vv] yếu tố không tràn' và 'lỏng col/hàng spans' Tôi không thể nhìn thấy bất cứ điều gì họ có thể làm mà bạn không thể đạt được với CSS. Thẻ chơi duy nhất trong trò chơi này cho hầu hết các tình huống là 'tiết kiệm thời gian'. – ANeves

-2

Sử dụng chúng (Bảng) trong đánh dấu và bạn không cần phải phá vỡ đầu của bạn về vị tương đương khoảng chéo khả năng tương thích trình duyệt . Các bảng hoạt động gần như trên các trình duyệt cùng một cách trên các trình duyệt

Các vấn đề liên quan