it-swarm-vi.tech

Tại sao không sử dụng bảng để bố trí trong HTML?

Có vẻ như ý kiến ​​chung rằng các bảng không nên được sử dụng để bố trí trong HTML.

Tại sao?

Tôi chưa bao giờ (hoặc hiếm khi thành thật) thấy những lý lẽ tốt cho việc này. Các câu trả lời thông thường là:

  • Thật tốt khi tách nội dung khỏi bố cục
    [.__.] Nhưng đây là một lập luận ngụy biện; Suy nghĩ sáo rỗng . Tôi đoán đúng là việc sử dụng phần tử bảng để bố trí ít liên quan đến dữ liệu dạng bảng. Vậy thì sao? Sếp tôi có quan tâm không? Người dùng của tôi có quan tâm không?

    [.___ Tôi nghĩ rằng sử dụng bảng là dễ dàng hơn so với sử dụng div và CSS.

    [.___] Nhân tiện ... tại sao lại sử dụng div hay một khoảng cách tốt để tách nội dung khỏi bố cục và bảng không? Để có một bố cục tốt chỉ với các div thường đòi hỏi rất nhiều div lồng nhau.

  • Khả năng đọc của mã
    [.__.] Tôi nghĩ đó là cách khác. Hầu hết mọi người hiểu HTML, ít người hiểu CSS.

  • SEO tốt hơn là không sử dụng bảng
    Tại sao? Bất cứ ai có thể cho thấy một số bằng chứng rằng nó là? Hoặc một tuyên bố từ Google rằng các bảng không được khuyến khích từ góc độ SEO?

  • Bàn chậm hơn.
    [.___.] Một phần tử tbody phụ phải được chèn vào. Đây là đậu phộng cho các trình duyệt web hiện đại. Chỉ cho tôi một số điểm chuẩn trong đó việc sử dụng bảng làm chậm đáng kể một trang.

  • Việc đại tu bố cục sẽ dễ dàng hơn khi không có bảng, xem css Zen Garden .
    [.__.] Hầu hết các trang web cần nâng cấp cũng cần nội dung mới (HTML). Các tình huống trong đó một phiên bản mới của một trang web chỉ cần một tệp CSS mới không có khả năng. Zen Garden là một trang web Nice, nhưng một chút lý thuyết. Không đề cập đến sử dụng sai của CSS.

Tôi thực sự quan tâm đến các đối số tốt để sử dụng div + CSS thay vì các bảng.

665
Benno Richters

Tôi sẽ lần lượt đi qua tranh luận của bạn và cố gắng hiển thị các lỗi trong đó.

Thật tốt khi tách nội dung khỏi bố cục Nhưng đây là một lập luận sai lầm; Suy nghĩ sáo rỗng.

Nó hoàn toàn không sai lầm vì HTML được thiết kế có chủ ý. Việc sử dụng sai một yếu tố có thể không hoàn toàn nằm ngoài dự đoán (xét cho cùng, các thành ngữ mới cũng đã được phát triển trong các ngôn ngữ khác) nhưng các hàm ý tiêu cực có thể phải được đối trọng. Ngoài ra, ngay cả khi không có đối số chống lại việc lạm dụng phần tử <table> ngày hôm nay, có thể có ngày mai vì cách các nhà cung cấp trình duyệt áp dụng cách xử lý đặc biệt cho phần tử. Rốt cuộc, họ biết rằng các phần tử của <table> chỉ dành cho dữ liệu dạng bảng và có thể sử dụng thực tế này để cải thiện công cụ kết xuất, trong quá trình thay đổi một cách tinh tế cách thức hoạt động của <table>s và do đó phá vỡ các trường hợp trước đây bị lạm dụng.

Vậy thì sao? Sếp tôi có quan tâm không? Người dùng của tôi có quan tâm không?

Phụ thuộc. Là ông chủ của bạn nhọn hoắt? Sau đó, anh ta có thể không quan tâm. Nếu cô ấy có năng lực, thì cô ấy sẽ quan tâm, bởi vì người dùng sẽ .

Có lẽ tôi hoặc các nhà phát triển đồng nghiệp của tôi, những người phải duy trì dịch vụ chăm sóc trang web ... Bảng có thể duy trì ít hơn không? Tôi nghĩ rằng sử dụng bảng dễ dàng hơn sử dụng div và css.

Phần lớn các nhà phát triển web chuyên nghiệp dường như phản đối bạn[ cần trích dẫn ]. Các bảng đó trong thực tế ít bảo trì hơn nên rõ ràng. Sử dụng bảng để bố trí có nghĩa là thay đổi bố cục công ty trên thực tế sẽ có nghĩa là thay đổi từng trang. Điều này có thể rất đắt tiền. Mặt khác, việc sử dụng HTML có ý nghĩa về mặt ngữ nghĩa kết hợp với CSS có thể hạn chế các thay đổi đó đối với CSS và các hình ảnh được sử dụng.

Nhân tiện ... tại sao sử dụng div hoặc một khoảng cách tốt nội dung từ bố cục và bảng không? Để có một bố cục tốt chỉ với các div thường đòi hỏi rất nhiều div lồng nhau.

<div>s lồng nhau sâu sắc là một mô hình chống giống như bố trí bảng. Các nhà thiết kế web giỏi không cần nhiều người trong số họ. Mặt khác, ngay cả các div lồng nhau sâu như vậy cũng không có nhiều vấn đề về bố trí bảng. Trên thực tế, họ thậm chí có thể đóng góp vào cấu trúc ngữ nghĩa bằng cách phân chia logic nội dung theo từng phần.

Tính dễ đọc của mã Tôi nghĩ đó là cách khác. Hầu hết mọi người hiểu html, ít hiểu css. Nó đơn giản hơn.

Hầu hết mọi người đều không quan trọng. Vấn đề chuyên môn. Đối với các chuyên gia, bố cục bảng tạo ra nhiều vấn đề hơn HTML + CSS. Điều này giống như nói rằng tôi không nên sử dụng GVim hoặc Emacs vì Notepad đơn giản hơn đối với hầu hết mọi người. Hoặc là tôi không nên sử dụng LaTeX vì MS Word đơn giản hơn đối với hầu hết mọi người.

SEO tốt hơn là không sử dụng bảng

Tôi không biết điều này có đúng không và sẽ không sử dụng điều này như một cuộc tranh luận nhưng nó sẽ hợp lý. Công cụ tìm kiếm tìm kiếm dữ liệu có liên quan . Mặc dù dữ liệu dạng bảng tất nhiên có thể có liên quan, nhưng hiếm khi người dùng tìm kiếm. Người dùng tìm kiếm các thuật ngữ được sử dụng trong tiêu đề trang hoặc các vị trí nổi bật tương tự. Do đó, sẽ rất hợp lý khi loại trừ nội dung dạng bảng khỏi quá trình lọc và do đó cắt giảm thời gian xử lý (và chi phí!) Bằng một yếu tố lớn.

Bàn chậm hơn. Một yếu tố tbody thêm phải được chèn. Đây là đậu phộng cho các trình duyệt web hiện đại.

Phần tử phụ không có gì để làm với các bảng chậm hơn. Mặt khác, thuật toán bố trí cho các bảng khó hơn nhiều, trình duyệt thường phải chờ cho toàn bộ bảng tải trước khi có thể bắt đầu bố trí nội dung. Ngoài ra, bộ nhớ đệm của bố cục sẽ không hoạt động (CSS có thể dễ dàng được lưu vào bộ đệm). Tất cả điều này đã được đề cập trước đó.

Chỉ cho tôi một số điểm chuẩn trong đó việc sử dụng bảng làm chậm đáng kể một trang.

Thật không may, tôi không có bất kỳ dữ liệu điểm chuẩn nào. Tôi sẽ quan tâm đến nó bởi vì nó đúng rằng lập luận này thiếu một sự chặt chẽ khoa học nhất định.

Hầu hết các trang web cần nâng cấp cũng cần nội dung mới (html). Các tình huống trong đó một phiên bản mới của một trang web chỉ cần một tệp css mới không có khả năng.

Không có gì. Tôi đã làm việc trong một số trường hợp thay đổi thiết kế được đơn giản hóa bằng cách tách biệt nội dung và thiết kế. Thường vẫn cần thay đổi một số mã HTML nhưng các thay đổi sẽ luôn bị giới hạn hơn nhiều. Ngoài ra, thay đổi thiết kế đôi khi phải được thực hiện linh hoạt. Hãy xem xét các công cụ mẫu như một công cụ được sử dụng bởi hệ thống blog WordPress. Bảng bố trí theo nghĩa đen sẽ giết chết hệ thống này. Tôi đã làm việc trên một trường hợp tương tự cho một phần mềm thương mại. Có thể thay đổi thiết kế mà không thay đổi mã HTML là một trong những yêu cầu kinh doanh.

Cái khác. Bố cục bảng làm cho việc phân tích tự động các trang web (quét màn hình) khó khăn hơn nhiều. Điều này nghe có vẻ tầm thường bởi vì, sau tất cả, ai làm điều đó? Tôi đã rất ngạc nhiên. Quét màn hình có thể giúp ích rất nhiều nếu dịch vụ được đề cập không cung cấp giải pháp thay thế WebService để truy cập dữ liệu của nó. Tôi đang làm việc trong tin sinh học nơi đây là một thực tế đáng buồn. Các kỹ thuật web và Dịch vụ web hiện đại chưa đến được với hầu hết các nhà phát triển và thông thường, quét màn hình là cách duy nhất để tự động hóa quá trình lấy dữ liệu. Không có gì ngạc nhiên khi nhiều nhà sinh học vẫn thực hiện các nhiệm vụ như vậy bằng tay. Đối với hàng ngàn bộ dữ liệu.

497
Konrad Rudolph

Đây là câu trả lời của lập trình viên của tôi từ một chủ đề simliar

Ngữ nghĩa 101

Trước tiên hãy xem mã này và suy nghĩ về những gì sai ở đây ...

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;

Vấn đề, tất nhiên, là một chiếc xe đạp không phải là một chiếc xe hơi. Lớp xe hơi là một lớp không phù hợp cho trường hợp xe đạp. Mã không có lỗi, nhưng về mặt ngữ nghĩa không chính xác. Nó phản ánh kém về lập trình viên.

Ngữ nghĩa 102

Bây giờ áp dụng điều này để đánh dấu tài liệu. Nếu tài liệu của bạn cần trình bày dữ liệu dạng bảng, thì thẻ thích hợp sẽ là <table>. Tuy nhiên, nếu bạn đặt điều hướng vào một bảng, thì bạn đang sử dụng sai mục đích dự định của phần tử <table>. Trong trường hợp thứ hai, bạn không trình bày dữ liệu dạng bảng - bạn (mis) sử dụng phần tử <table> để đạt được mục tiêu trình bày.

Kết luận

Du khách sẽ chú ý chứ? Không. Sếp của bạn có quan tâm không? Có lẽ. Đôi khi chúng ta cắt góc như lập trình viên? Chắc chắn rồi. Nhưng chúng ta có nên không? Không. Ai được lợi nếu bạn sử dụng đánh dấu ngữ nghĩa? Bạn - và danh tiếng chuyên nghiệp của bạn. Bây giờ đi và làm điều đúng đắn.

290
Carl Camera

Câu trả lời rõ ràng: Xem CSS Zen Garden . Nếu bạn nói với tôi rằng bạn có thể dễ dàng làm tương tự với bố cục dựa trên bảng (hãy nhớ - HTML không thay đổi) thì bằng mọi cách, hãy sử dụng các bảng để bố trí.

Hai điều quan trọng khác là khả năng tiếp cận và SEO.

Cả hai quan tâm về những gì thông tin thứ tự được trình bày. Bạn không thể dễ dàng trình bày điều hướng của mình ở đầu trang nếu bố cục dựa trên bảng của bạn đặt nó vào ô thứ 3 của hàng thứ 2 của bảng lồng nhau thứ 2 trên trang.

Vì vậy, câu trả lời của bạn là khả năng duy trì, khả năng tiếp cận và SEO.

Đừng lười biếng. Làm mọi thứ đúng cách và đúng đắn ngay cả khi chúng khó học hơn một chút.

104
erlando

Xem câu hỏi trùng lặp này.

Một mục bạn đang quên có khả năng tiếp cận. Các bố cục dựa trên bảng cũng không dịch nếu bạn cần sử dụng trình đọc màn hình. Và nếu bạn làm việc cho chính phủ, việc hỗ trợ các trình duyệt có thể truy cập như trình đọc màn hình có thể là bắt buộc .

Tôi cũng nghĩ bạn đánh giá thấp tác động của một số điều bạn đề cập trong câu hỏi. Ví dụ: nếu bạn vừa là nhà thiết kế vừa là lập trình viên, bạn có thể không có sự đánh giá đầy đủ về việc nó phân tách trình bày khỏi nội dung tốt như thế nào. Nhưng một khi bạn vào một cửa hàng nơi họ là hai vai trò riêng biệt, lợi thế bắt đầu trở nên rõ ràng hơn.

Nếu bạn biết những gì bạn đang làm và có các công cụ tốt, CSS thực sự có lợi thế đáng kể so với các bảng để bố trí. Và mặc dù mỗi mục tự nó có thể không biện minh cho việc từ bỏ các bảng, nhưng chúng thường được kết hợp với nhau.

91
Joel Coehoorn

Thật không may, CSS Zen Garden không còn có thể được sử dụng như một ví dụ về thiết kế HTML/CSS tốt. Hầu như tất cả các thiết kế gần đây của họ đều sử dụng đồ họa cho phần tiêu đề. Các tệp đồ họa này được chỉ định trong CSS.

Do đó, một trang web có mục đích thể hiện lợi thế của việc giữ thiết kế ngoài nội dung, giờ đây thường xuyên cam kết SIN KHÔNG THỂ KIẾM được việc đưa nội dung vào thiết kế. (Nếu tiêu đề phần trong tệp HTML đã thay đổi, tiêu đề phần được hiển thị sẽ không).

Điều đó chỉ chứng minh rằng ngay cả những người ủng hộ tôn giáo DIV & CSS nghiêm ngặt, cũng không thể tuân theo các quy tắc riêng của họ. Bạn có thể sử dụng nó như một hướng dẫn trong cách bạn theo dõi họ chặt chẽ.

54
James Curran

Dù sao, đây không phải là đối số dứt khoát, nhưng với CSS, bạn có thể thực hiện đánh dấu tương tự và thay đổi bố cục tùy thuộc vào phương tiện, đó là một lợi thế tốt. Ví dụ, đối với một trang in, bạn có thể lặng lẽ chặn điều hướng mà không phải tạo một trang thân thiện với máy in.

48
expedient

Một bảng để bố trí sẽ không tệ đến thế. Nhưng bạn không thể có được bố cục bạn cần chỉ với một bảng trong hầu hết thời gian. Khá sớm bạn có 2 hoặc ba bảng lồng nhau. Điều này trở nên rất cồng kềnh.

  • Nó IS rất nhiều khó đọc. Điều đó không phụ thuộc vào ý kiến. Chỉ có nhiều thẻ lồng nhau hơn mà không có dấu hiệu nhận dạng nào trên chúng.

  • Tách nội dung khỏi bản trình bày là một điều tốt vì nó cho phép bạn tập trung vào những gì bạn đang làm. Trộn hai dẫn đến các trang cồng kềnh khó đọc.

  • CSS cho các kiểu cho phép trình duyệt của bạn lưu trữ các tệp và các yêu cầu tiếp theo nhanh hơn nhiều. Đây là LỚN.

  • Bàn khóa bạn vào một thiết kế. Chắc chắn, không phải ai cũng cần sự linh hoạt của CSS Zen Garden, nhưng tôi chưa bao giờ làm việc trên một trang web mà tôi không cần phải thay đổi thiết kế một chút ở đây và đó. Nó dễ dàng hơn nhiều với CSS.

  • Bàn khó tạo kiểu. Bạn không có nhiều sự linh hoạt với chúng (tức là bạn vẫn cần thêm các thuộc tính HTML để kiểm soát hoàn toàn các kiểu của bảng)

Tôi đã không sử dụng bảng cho dữ liệu không phải bảng trong 4 năm. Tôi không nhìn lại.

Tôi thực sự muốn đề xuất đọc CSS Mastery của Andy Budd. Thật tuyệt vơi.

Hình ảnh tại ecx. 64_OU01_AA240_SH20_.jpg

45
Ben Scheirman

Thật tốt khi tách nội dung khỏi bố cục
[.__.] Nhưng đây là một lập luận ngụy biện; Suy nghĩ sáo rỗng

Đó là một đối số ngụy biện vì các bảng HTML được bố trí! Nội dung là dữ liệ trong bảng, bản trình bày là chính bảng. Đây là lý do tại sao việc tách CSS khỏi HTML đôi khi có thể rất khó khăn. Bạn không tách nội dung khỏi bản trình bày, bạn đang tách bản trình bày khỏi bản trình bày! Một đống div lồng nhau không khác gì một bảng - nó chỉ là một bộ thẻ khác nhau.

Vấn đề khác với việc tách HTML khỏi CSS là họ cần có kiến ​​thức sâu sắc về nhau - bạn thực sự không thể tách chúng hoàn toàn. Bố cục thẻ trong HTML được kết hợp chặt chẽ với tệp CSS bất kể bạn làm gì.

Tôi nghĩ rằng bảng vs div xuất phát từ nhu cầu của ứng dụng của bạn.

Trong ứng dụng chúng tôi phát triển tại nơi làm việc, chúng tôi cần một bố cục trang trong đó các phần sẽ tự động kích thước theo nội dung của chúng. Tôi đã dành nhiều ngày cố gắng để làm cho nó hoạt động trên nhiều trình duyệt với CSS và DIV và đó là một cơn ác mộng hoàn toàn. Chúng tôi chuyển sang các bảng và tất cả chỉ là đã hoạt động.

Tuy nhiên, chúng tôi có một đối tượng rất kín cho sản phẩm của mình (chúng tôi bán một phần cứng có giao diện web) và các vấn đề về khả năng truy cập không phải là vấn đề đáng lo ngại đối với chúng tôi. Tôi không biết tại sao trình đọc màn hình không thể xử lý tốt các bảng, nhưng tôi đoán nếu đó là cách thì các nhà phát triển phải xử lý nó.

36
17 of 26

CSS/DIV - đó chỉ là công việc cho các chàng trai thiết kế, phải không. Hàng trăm giờ tôi đã dành để gỡ lỗi các vấn đề DIV/CSS, tìm kiếm trên Internet để có được một phần đánh dấu hoạt động với một trình duyệt tối nghĩa - nó làm tôi phát điên. Bạn thực hiện một thay đổi nhỏ và toàn bộ bố cục trở nên sai lầm khủng khiếp - trong đó trên đó là logic trong đó. Dành hàng giờ để di chuyển một cái gì đó 3 pixel theo cách này sau đó một cái gì đó 2 pixel khác để có được tất cả để xếp hàng. Điều này chỉ có vẻ sai đối với tôi bằng cách nào đó. Chỉ vì bạn là người theo chủ nghĩa thuần túy và một cái gì đó "không phải là điều nên làm" không có nghĩa là bạn nên sử dụng nó ở mức độ thứ n và trong mọi trường hợp, đặc biệt là nếu nó giúp cuộc sống của bạn dễ dàng hơn 1000 lần.

Vì vậy, cuối cùng tôi đã quyết định, hoàn toàn dựa trên cơ sở thương mại, mặc dù tôi tiếp tục sử dụng ở mức tối thiểu, nếu tôi dự đoán 20 giờ làm việc để đặt DIV chính xác, tôi sẽ dán vào bàn. Điều đó là sai, nó làm đảo lộn những người theo chủ nghĩa thuần túy, nhưng trong hầu hết các trường hợp, nó tốn ít thời gian hơn và rẻ hơn để quản lý. Sau đó tôi có thể tập trung vào việc làm cho ứng dụng hoạt động như khách hàng muốn, thay vì làm hài lòng những người theo chủ nghĩa thuần túy. Rốt cuộc họ trả các hóa đơn và lập luận của tôi cho người quản lý thực thi việc sử dụng CSS/DIV - tôi chỉ đơn thuần chỉ ra rằng khách hàng cũng trả lương cho anh ta!

Lý do duy nhất khiến tất cả các đối số CSS/DIV này xảy ra là do sự thiếu hụt CSS ở nơi đầu tiên và vì các trình duyệt không tương thích với nhau và nếu có, một nửa các nhà thiết kế web trên thế giới sẽ mất việc .

Khi bạn thiết kế một hình thức cửa sổ, bạn không thử điều khiển di chuyển xung quanh sau khi bạn đặt chúng ra vì vậy tôi nghĩ nó lạ đối với tôi tại sao bạn muốn làm điều này với một hình thức web. Tôi chỉ đơn giản là không thể hiểu logic này. Nhận bố trí ngay để bắt đầu và vấn đề là gì. Tôi nghĩ rằng đó là bởi vì các nhà thiết kế thích tán tỉnh sự sáng tạo, trong khi các nhà phát triển ứng dụng quan tâm nhiều hơn đến việc ứng dụng thực sự hoạt động, tạo đối tượng kinh doanh, thực hiện các quy tắc kinh doanh, tìm ra cách các bit dữ liệu của khách hàng liên quan đến nhau yêu cầu - bạn biết - như những thứ trong thế giới thực.

Đừng hiểu sai ý tôi, cả hai đối số đều hợp lệ, nhưng vui lòng không phê phán các nhà phát triển vì đã chọn cách tiếp cận hợp lý, dễ dàng hơn để thiết kế biểu mẫu. Chúng ta thường có nhiều điều quan trọng cần lo lắng hơn là ngữ nghĩa chính xác của việc sử dụng bảng trên div.

Trường hợp cụ thể - dựa trên cuộc thảo luận này, tôi đã chuyển đổi một vài tds và trs hiện có thành div. 45 phút lộn xộn với nó cố gắng để mọi thứ xếp hàng cạnh nhau và tôi đã bỏ cuộc. TD trở lại sau 10 giây - hoạt động - ngay lập tức - trên tất cả các trình duyệt, không còn gì để làm. Hãy cố gắng làm cho tôi hiểu - những gì bạn có thể biện minh cho việc muốn tôi làm điều đó theo bất kỳ cách nào khác!

23
Tim Black

Bố cục nên dễ dàng. Thực tế là có những bài viết về cách đạt được bố cục ba cột động với đầu trang và chân trang trong CSS cho thấy đó là một hệ thống bố cục kém. Tất nhiên bạn có thể làm cho nó hoạt động, nhưng có hàng trăm bài báo trực tuyến về cách làm điều đó. Có khá nhiều bài viết như vậy cho một bố cục tương tự với các bảng vì nó rõ ràng rõ ràng. Bất kể bạn nói gì với các bảng và ủng hộ CSS, thì thực tế này hoàn toàn không có: bố cục ba cột cơ bản trong CSS thường được gọi là "Chén thánh".

Nếu điều đó không khiến bạn phải nói "WTF" thì bạn thực sự cần phải đặt viện trợ kool ngay bây giờ.

Tôi yêu CSS. Nó cung cấp các tùy chọn kiểu dáng tuyệt vời và một số công cụ định vị thú vị, nhưng là một công cụ bố trí, nó bị thiếu. Cần phải có một số loại hệ thống định vị lưới động. Một cách đơn giản để căn chỉnh các hộp trên nhiều trục mà không cần biết kích thước của chúng trước. Tôi sẽ không từ chối nếu bạn gọi nó là <bảng> hoặc <lưới điện tử> hoặc bất cứ điều gì, nhưng đây là một tính năng bố cục cơ bản bị thiếu trong CSS.

Vấn đề lớn hơn là bằng cách không thừa nhận có những tính năng bị thiếu, những người quá khích CSS đã giữ lại CSS từ tất cả những gì có thể. Tôi hoàn toàn vui mừng khi ngừng sử dụng các bảng nếu CSS cung cấp định vị lưới đa trục tốt như về cơ bản mọi công cụ bố trí khác trên thế giới. (Bạn có nhận ra vấn đề này đã được giải quyết nhiều lần bằng nhiều ngôn ngữ bởi mọi người ngoại trừ W3C, phải không? Và không ai khác phủ nhận rằng tính năng như vậy là hữu ích.)

Thở dài. Đủ thông gió. Đi trước và dính đầu trở lại trong cát.

21
needlestack

Theo tuân thủ 508 (đối với trình đọc màn hình đối với trực quan), các bảng chỉ nên được sử dụng để giữ dữ liệu và không được bố trí vì nó làm cho trình đọc màn hình bị rối. Hoặc vì vậy tôi đã được nói.

Nếu bạn gán tên cho từng div, bạn cũng có thể ghép tất cả chúng lại với nhau bằng CSS. Họ chỉ hơi đau một chút để ngồi theo cách bạn cần.

19
Rob

Đây là một phần của html từ một dự án gần đây:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>{DYNAMIC(TITLE)}</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./styles/base.css" />
</head>
<body>
    <div id="header">
        <h1><!-- Page title --></h1>
        <ol id="navigation">
            <!-- Navigation items -->
        </ol>
        <div class="clearfix"></div>
    </div>
    <div id="sidebar">
        <!-- Sidebar content -->
    </div>
    <!-- Page content -->
    <p id="footer"><!-- Footer content --></p>
</body>
</html>

Và đây là mã giống như cách bố trí dựa trên bảng.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>{DYNAMIC(TITLE)}</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./styles/base.css" />
</head>
<body>
    <table cellspacing="0">
        <tr>
            <td><!-- Page Title --></td>
            <td>
                <table>
                    <tr>
                        <td>Navitem</td>
                        <td>Navitem</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <table>
        <tr>
            <td><!-- Page content --></td>
            <td><!-- Sidebar content --></td>
        </tr>
        <tr>
            <td colspan="2">Footer</td>
        </tr>
    </table>
</body>
</html>

Sự sạch sẽ duy nhất tôi thấy trong cách bố trí dựa trên bảng đó là thực tế là tôi quá hăng hái với vết lõm của mình. Tôi chắc chắn rằng phần nội dung sẽ có thêm hai bảng nhúng.

Một điều khác cần suy nghĩ về: filesizes. Tôi đã thấy rằng bố cục dựa trên bảng có kích thước gấp đôi so với các đối tác CSS của chúng thường. Trên băng thông rộng tốc độ hig của chúng tôi đó không phải là một vấn đề lớn nhưng nó là trên những người có modem quay số.

18
Ross

Tôi muốn thêm rằng các bố cục dựa trên div dễ dàng hơn để xác định, phát triển và tái cấu trúc. Chỉ cần một số thay đổi trong CSS để sắp xếp lại các yếu tố và nó đã được thực hiện. Từ kinh nghiệm của tôi, thiết kế lại một bố cục sử dụng các bảng là một cơn ác mộng (nhiều hơn nếu có các bảng lồng nhau).

Mã của bạn cũng có ý nghĩa từ quan điểm semantic .

14
Guido

Bố cục CSS thường tốt hơn nhiều cho khả năng truy cập, miễn là nội dung được sắp xếp theo thứ tự tự nhiên và có ý nghĩa mà không cần biểu định kiểu. Và nó không chỉ là trình đọc màn hình đấu tranh với bố cục dựa trên bảng: chúng còn khiến trình duyệt di động khó hiển thị trang hơn.

Ngoài ra, với bố cục dựa trên div, bạn có thể dễ dàng thực hiện những điều thú vị bằng biểu định kiểu in như loại trừ tiêu đề, chân trang và điều hướng khỏi các trang in - Tôi nghĩ rằng sẽ không thể, hoặc ít nhất là khó khăn hơn nhiều để làm điều đó với bố trí dựa trên bảng.

Nếu bạn nghi ngờ rằng việc tách nội dung khỏi bố cục dễ dàng hơn với div so với bảng, hãy xem HTML dựa trên div tại CSS Zen Garden , hãy xem cách thay đổi biểu định kiểu có thể thay đổi bố cục mạnh mẽ và suy nghĩ xem liệu bạn có thể đạt được nhiều bố cục giống nhau hay không nếu HTML dựa trên bảng ... Nếu bạn đang thực hiện bố cục dựa trên bảng, bạn không thể sử dụng CSS để kiểm soát tất cả các khoảng cách và phần đệm trong các ô (nếu là bạn, gần như chắc chắn bạn sẽ thấy việc sử dụng div nổi v.v ... dễ dàng hơn ngay từ đầu). Không sử dụng CSS để kiểm soát tất cả những điều đó và vì thực tế là các bảng chỉ định thứ tự từ trái sang phải và từ trên xuống dưới của các thứ trong HTML, các bảng có xu hướng có nghĩa là bố cục của bạn trở nên cố định rất nhiều trong HTML.

Thực tế tôi nghĩ rằng rất khó để thay đổi hoàn toàn bố cục của thiết kế dựa trên div và CSS mà không thay đổi div một chút. Tuy nhiên, với bố cục dựa trên div và CSS, việc Tweak những thứ như khoảng cách giữa các khối khác nhau và kích thước tương đối của chúng sẽ dễ dàng hơn nhiều.

13
MB.

Việc đây là một câu hỏi được tranh luận sôi nổi là một minh chứng cho sự thất bại của W3C trong việc dự đoán sự đa dạng của các thiết kế bố trí sẽ được thử. Sử dụng divs + css cho bố cục thân thiện về ngữ nghĩa là một khái niệm tuyệt vời, nhưng các chi tiết thực hiện rất thiếu sót đến nỗi chúng thực sự hạn chế sự tự do sáng tạo.

Tôi đã cố gắng chuyển một trong các trang web của công ty chúng tôi từ các bảng thành div và thật đau đầu đến nỗi tôi đã loại bỏ hoàn toàn số giờ làm việc mà tôi đã đổ vào đó và quay trở lại các bảng. Cố gắng vật lộn với các div của tôi để giành quyền kiểm soát sự liên kết dọc đã nguyền rủa tôi với những vấn đề tâm lý lớn mà tôi sẽ không bao giờ rung động chừng nào cuộc tranh luận này nổ ra.

Việc mọi người phải thường xuyên đưa ra các cách giải quyết phức tạp và xấu xí để hoàn thành các mục tiêu thiết kế đơn giản (như căn chỉnh dọc) cho thấy mạnh mẽ rằng các quy tắc không đủ linh hoạt. Nếu thông số kỹ thuật là đủ, thì tại sao các trang web cấu hình cao (như SO) thấy cần phải bẻ cong các quy tắc bằng cách sử dụng bảng và cách giải quyết khác?

13
DLH

Không có tranh luận trong DIV ủng hộ tôi.

Tôi muốn nói: Nếu giày vừa vặn, hãy mang nó.

Điều đáng chú ý là rất khó nếu không tìm được phương pháp hiển thị nội dung DIV + CSS tốt trong hai hoặc ba cột, phù hợp với tất cả các trình duyệt và vẫn trông giống như tôi dự định.

Lời khuyên này cân bằng một chút về các bảng trong hầu hết các bố cục của tôi, và tôi cảm thấy có lỗi khi sử dụng chúng (dunny tại sao, mọi người chỉ nói rằng nó xấu nên tôi cố gắng lắng nghe chúng) dễ dàng hơn và nhanh hơn đối với tôi để sử dụng BẢNG. Tôi không được trả theo giờ, vì vậy bảng rẻ hơn đối với tôi.

13
Radu094

Tôi đoán đúng là việc sử dụng phần tử bảng để bố trí ít liên quan đến dữ liệu dạng bảng. Vậy thì sao? Sếp tôi có quan tâm không? Người dùng của tôi có quan tâm không?

Google và các hệ thống tự động khác do care, và chúng cũng quan trọng như vậy trong nhiều tình huống. Mã ngữ nghĩa dễ dàng hơn cho một hệ thống không thông minh để phân tích và xử lý.

12
ceejayoz

Phải làm việc với một trang web liên quan đến 6 lớp bảng lồng nhau được tạo bởi một số ứng dụng và có nó tạo ra HTML không hợp lệ, thực tế là một công việc 3 giờ để khắc phục sự cố cho một thay đổi nhỏ.

Tất nhiên đây là trường hợp Edge, nhưng thiết kế dựa trên bảng là không thể nhầm lẫn. Nếu bạn sử dụng css, bạn tách kiểu ra để khi sửa HTML, bạn sẽ bớt lo lắng hơn về việc phá vỡ.

Ngoài ra, hãy thử điều này với JavaScript. Di chuyển một ô của bảng từ nơi này sang nơi khác trong bảng khác. Khá phức tạp để thực hiện khi div/span chỉ hoạt động sao chép-dán-khôn ngoan.

"Sếp tôi có quan tâm không"

Nếu tôi là ông chủ của bạn. Bạn sẽ quan tâm. ;) Nếu bạn coi trọng cuộc sống của bạn.

8
Kent Fredric

Bố cục linh hoạt
[.__.] Hãy tưởng tượng bạn đang tạo một trang có số lượng lớn hình thu nhỏ.
[.__.] DIV:
[.___ Làm cho cửa sổ hẹp hơn và BAM - đó là 6 trên một hàng, hoặc 2, hoặc tuy nhiên nhiều phù hợp.
[.__.] BẢNG :
[.___.] Bạn phải nói rõ ràng có bao nhiêu ô trong một hàng. Nếu cửa sổ quá hẹp, người dùng phải cuộn theo chiều ngang.

Khả năng bảo trì
[.__.] Tương tự như trên. Bây giờ bạn muốn thêm ba hình thu nhỏ vào hàng thứ ba.
[.__.] DIV :
[.__.] Thêm chúng vào. Bố cục sẽ tự động điều chỉnh.
[.__.] BẢNG : Dán các ô mới vào hàng thứ ba. Rất tiếc! Bây giờ có quá nhiều mặt hàng ở đó. Cắt một số từ hàng đó và đặt chúng vào hàng thứ tư. Bây giờ có quá nhiều mặt hàng ở đó. Cắt một số từ hàng đó ... (vv)
[.__.] (Tất nhiên, nếu bạn đang tạo các hàng và ô có kịch bản phía máy chủ, điều này có thể sẽ không thành vấn đề.)

7
Nathan Long

Tôi nghĩ rằng thuyền đã đi thuyền. Nếu bạn nhìn vào hướng mà ngành công nghiệp đã thực hiện, bạn sẽ nhận thấy rằng CSS và Tiêu chuẩn mở là người chiến thắng trong cuộc thảo luận đó. Điều đó có nghĩa là đối với hầu hết các công việc html, ngoại trừ các biểu mẫu, các nhà thiết kế sẽ sử dụng div thay vì bảng. Tôi có một thời gian khó khăn với điều đó bởi vì tôi không phải là một chuyên gia CSS nhưng đó là như vậy.

7
Thomas Wagner

Ngoài ra, đừng quên, các bảng không hiển thị tốt trên trình duyệt di động. Chắc chắn, iPhone có trình duyệt kick-ass nhưng mọi người đều không có iPhone. Kết xuất bảng có thể là đậu phộng cho các trình duyệt hiện đại, nhưng đó là một loạt dưa hấu cho các trình duyệt di động.

Cá nhân tôi thấy rằng nhiều người sử dụng quá nhiều thẻ <div>, nhưng trong chừng mực, nó có thể cực kỳ sạch sẽ và dễ đọc. Bạn đề cập rằng mọi người có thời gian đọc CSS khó hơn bảng; về mặt 'mã' có thể đúng; nhưng về mặt đọc nội dung (view> source) thì việc hiểu cấu trúc với các bảng định kiểu sẽ dễ hơn rất nhiều so với bảng.

5
Swati

Có vẻ như bạn chỉ quen với các bảng và đó là nó. Đặt bố cục trong một bảng giới hạn bạn chỉ cho bố cục đó. Với CSS, bạn có thể di chuyển các bit xung quanh, hãy xem http://csszengarden.com/ Và không, bố cục không yêu cầu nhiều divs lồng nhau.

Không có bảng để bố trí và ngữ nghĩa thích hợp, HTML sẽ sạch hơn rất nhiều, do đó dễ đọc hơn. Tại sao một người không thể hiểu CSS cố gắng đọc nó? Và nếu ai đó coi mình là nhà phát triển web thì việc nắm bắt tốt CSS là điều bắt buộc.

Lợi ích SEO đến từ khả năng có nội dung quan trọng nhất cao hơn trang và có tỷ lệ đánh dấu nội dung tốt hơn.

http://www.hotdesign.com/seybold/

5
Rimantas

Toàn bộ ý tưởng xung quanh đánh dấu ngữ nghĩa là tách biệt đánh dấu và trình bày, bao gồm bố cục.

Div không thay thế các bảng, chúng có cách sử dụng riêng trong việc tách nội dung thành các khối nội dung liên quan (,). Khi bạn không có kỹ năng và đang dựa vào các bảng, bạn sẽ thường phải tách nội dung của mình vào các ô để có bố cục mong muốn, nhưng bạn không cần phải chạm vào đánh dấu để đạt được trình bày khi sử dụng đánh dấu ngữ nghĩa. Điều này thực sự quan trọng khi đánh dấu đang được tạo chứ không phải các trang tĩnh.

Các nhà phát triển cần ngừng cung cấp đánh dấu ngụ ý bố cục để những người trong chúng ta có kỹ năng trình bày nội dung có thể tiếp tục với công việc của chúng tôi và nhà phát triển không phải quay lại mã của họ để thay đổi khi nhu cầu thuyết trình thay đổi.

5
Steve Perks
  • Tuân thủ 508 - khả năng cho trình đọc màn hình có ý nghĩa về đánh dấu của bạn.
  • Chờ kết xuất - các bảng không hiển thị trong trình duyệt cho đến khi kết thúc phần tử </table>.
5
Rick Glos

Đây không thực sự là về việc "div tốt hơn bảng để bố trí". Ai đó hiểu CSS có thể sao chép bất kỳ thiết kế nào bằng cách sử dụng 'bảng bố cục' khá đơn giản. Chiến thắng thực sự là sử dụng các yếu tố HTML cho những gì họ đang ở đó. Lý do bạn sẽ không sử dụng bảng cho dữ liệu không theo bảng là lý do tương tự bạn không lưu trữ số nguyên dưới dạng chuỗi ký tự - công nghệ hoạt động dễ dàng hơn nhiều khi bạn sử dụng nó cho mục đích mà nó được mô tả. Nếu nó là cần thiết để sử dụng các bảng để bố trí (vì những thiếu sót của trình duyệt vào đầu những năm 1990) thì chắc chắn không phải bây giờ.

4
domgblackwell

Thật đáng để tìm ra CSS và div để cột nội dung trung tâm tải và hiển thị trước thanh bên trong bố cục trang. Nhưng nếu bạn đang vật lộn để sử dụng các div nổi để sắp xếp theo chiều dọc logo với một số văn bản tài trợ, chỉ cần sử dụng bảng và tiếp tục với cuộc sống. Tôn giáo vườn Zen không tạo ra nhiều tiếng vang.

Ý tưởng tách nội dung khỏi bản trình bày là phân vùng ứng dụng để các loại công việc khác nhau ảnh hưởng đến các khối mã khác nhau. Đây thực sự là về quản lý thay đổi. Nhưng các tiêu chuẩn mã hóa chỉ có thể kiểm tra trạng thái mã hiện tại một cách hời hợt.

Nhật ký thay đổi cho một ứng dụng phụ thuộc vào các tiêu chuẩn mã hóa để "tách nội dung khỏi bản trình bày" sẽ hiển thị một mẫu các thay đổi song song trên các silo dọc. Nếu một thay đổi đối với "nội dung" luôn đi kèm với thay đổi thành "bản trình bày", thì việc phân vùng thành công như thế nào?

Nếu bạn thực sự muốn phân vùng mã của bạn một cách hiệu quả, hãy sử dụng Subversion và xem lại nhật ký thay đổi của bạn. Sau đó, sử dụng các kỹ thuật mã hóa đơn giản nhất - div, bảng, JavaScript, bao gồm, hàm, đối tượng, tiếp tục, bất cứ điều gì - để cấu trúc ứng dụng sao cho các thay đổi phù hợp một cách đơn giản và thoải mái.

3
Patrick May

Các bảng không nói chung dễ dàng hơn hoặc dễ bảo trì hơn CSS. Tuy nhiên, có một vài vấn đề bố cục cụ thể trong đó các bảng thực sự là giải pháp đơn giản và linh hoạt nhất.

CSS rõ ràng là thích hợp hơn trong trường hợp đánh dấu trình bày và CSS hỗ trợ cùng một kiểu thiết kế, không ai có thể cho rằng các thẻ font- tốt hơn so với chỉ định kiểu chữ trong CSS, vì CSS cung cấp cho bạn sức mạnh tương tự so với các thẻ font-, nhưng theo cách sạch sẽ hơn nhiều.

Tuy nhiên, vấn đề với các bảng về cơ bản là mô hình bố trí bảng trong CSS không được hỗ trợ trong Microsoft Internet Explorer. Do đó, bảng và CSS là không tương đương về sức mạnh. Phần còn thiếu là hành vi dạng lưới của các bảng, trong đó các cạnh của các ô thẳng hàng theo chiều dọc và chiều ngang, trong khi các ô vẫn mở rộng để chứa nội dung của chúng. Hành vi này không dễ dàng đạt được trong CSS thuần mà không cần mã hóa một số kích thước, điều này làm cho thiết kế cứng nhắc và dễ vỡ (miễn là chúng tôi phải hỗ trợ Internet Explorer - trong các trình duyệt khác, điều này có thể đạt được bằng cách sử dụng display:table-cell).

Vì vậy, đây thực sự không phải là câu hỏi liệu bảng hay CSS có thích hợp hơn không, nhưng đó là câu hỏi để nhận ra các trường hợp cụ thể trong đó việc sử dụng bảng có thể làm cho bố cục linh hoạt hơn.

Lý do quan trọng nhất để không sử dụng bảng là khả năng truy cập. Nguyên tắc truy cập nội dung web http://www.w3.org/TR/WCAG10/ khuyên dùng bằng cách sử dụng bảng để bố trí. Nếu bạn lo ngại về khả năng truy cập (và trong một số trường hợp bạn có thể phải tuân thủ pháp lý), bạn nên sử dụng CSS ngay cả khi các bảng đơn giản hơn. Lưu ý rằng bạn có thể luôn luôn tạo cùng bố cục với CSS như với các bảng, nó có thể chỉ cần nhiều công việc hơn.

3
JacquesB

Các công cụ sử dụng bố trí bảng có thể trở nên cực kỳ nặng do số lượng mã cần thiết để tạo bố cục. Theo mặc định, Cổng thông tin Netweaver của SAP sử dụng TABLE để bố trí các trang của họ.

Cổng thông tin sản xuất SAP tại buổi biểu diễn hiện tại của tôi có một trang chủ có HTML nặng hơn 60K và đi sâu bảy bảng, ba lần trong trang. Thêm vào Javascript, việc sử dụng sai 16 iframe với các vấn đề tương tự trong bảng, CSS quá nặng, v.v. và trang nặng hơn 5MB.

Dành thời gian để giảm trọng lượng trang để bạn có thể sử dụng băng thông của mình để thực hiện các hoạt động hấp dẫn với người dùng là điều đáng để nỗ lực.

3
Mike Cornell

Thao tác DOM là khó khăn trong cách bố trí dựa trên bảng.

Với các div ngữ nghĩa:

$('#myawesomediv').click(function(){
    // Do awesome stuff
});

Với các bảng:

$('table tr td table tr td table tr td.......').click(function(){
    // Cry self to sleep at night
});

Bây giờ, được cho phép, ví dụ thứ hai là loại ngu ngốc và bạn luôn có thể áp dụng ID hoặc các lớp cho một phần tử bảng hoặc td, nhưng điều đó sẽ thêm giá trị ngữ nghĩa, đó là điều mà những người đề xuất bảng phản đối kịch liệt.

3
Chris Fletcher

Tôi đã rất ngạc nhiên khi thấy một số vấn đề chưa được đề cập, vì vậy đây là 2 xu của tôi, ngoài tất cả các điểm rất hợp lệ được thực hiện trước đó:

.1. CSS & SEO :

a) CSS được sử dụng để có tác động rất lớn đến SEO bằng cách cho phép định vị nội dung trong trang bất cứ nơi nào bạn muốn. Một vài năm trước, Công cụ tìm kiếm đã nhấn mạnh đáng kể đến các yếu tố "trên trang". Một cái gì đó ở đầu trang được coi là có liên quan đến trang hơn là một cái gì đó nằm ở dưới cùng. "Đầu trang" cho một con nhện có nghĩa là "ở đầu mã". Sử dụng CSS, bạn có thể sắp xếp nội dung giàu từ khóa của mình ở đầu mã và vẫn định vị nó ở bất cứ đâu bạn thích trong trang. Điều này vẫn có liên quan, nhưng các yếu tố trên trang ngày càng ít quan trọng đối với xếp hạng trang.

b) Khi bố cục được chuyển sang CSS, trang HTML sẽ nhẹ hơn và do đó tải nhanh hơn cho một công cụ tìm kiếm. (nhện không bận tâm tải xuống các tệp css bên ngoài). Tải trang nhanh là một cân nhắc xếp hạng quan trọng đối với một số công cụ tìm kiếm, bao gồm Google

c) Công việc SEO thường yêu cầu thử nghiệm và thay đổi mọi thứ, thuận tiện hơn nhiều với bố cục dựa trên CSS

.2. Nội dung được tạo :

Một bảng dễ dàng hơn để tạo lập trình so với bố trí CSS tương đương.

foreach ($comment as $key=>$value)
{
   echo "<tr><td>$key</td><td>$value</td></tr>";
}

Tạo một bảng là đơn giản và an toàn. Nó là khép kín và tích hợp tốt trong bất kỳ mẫu nào. Để làm điều tương tự với CSS khó hơn đáng kể và có thể không có lợi ích gì cả: khó chỉnh sửa biểu định kiểu CSS trên chuyến bay và thêm nội tuyến kiểu không khác gì sử dụng bảng (nội dung không tách rời khỏi bố cục).

Hơn nữa, khi một bảng được tạo, nội dung (theo biến) đã được tách khỏi bố cục (theo mã), làm cho nó dễ dàng sửa đổi.

Đây là một lý do tại sao một số trang web được thiết kế rất tốt (ví dụ SO) vẫn sử dụng bố cục bảng.

Tất nhiên, nếu các kết quả cần được xử lý thông qua JavaScript, các div rất đáng để gặp rắc rối.

.3. Kiểm tra chuyển đổi nhanh

Khi tìm ra những gì hiệu quả cho một đối tượng cụ thể, sẽ rất hữu ích khi có thể thay đổi bố cục theo nhiều cách khác nhau để tìm ra điều gì mang lại kết quả tốt nhất. Bố cục dựa trên CSS làm cho mọi thứ dễ dàng hơn đáng kể

.4. Các giải pháp khác nhau cho các vấn đề khác nha

Các bảng bố trí thường bị loại bỏ vì "mọi người đều biết div & CSS" là cách để đi.

Tuy nhiên, thực tế là các bảng được tạo nhanh hơn, dễ hiểu hơn và mạnh mẽ hơn so với hầu hết các bố cục CSS. (Có, CSS có thể mạnh mẽ như vậy, nhưng nhìn nhanh qua mạng trên các trình duyệt khác nhau và độ phân giải màn hình cho thấy nó không thường xuyên như vậy)

Có rất nhiều nhược điểm trên bàn, bao gồm bảo trì, thiếu linh hoạt ... nhưng chúng ta đừng ném em bé bằng nước tắm. Có rất nhiều cách sử dụng chuyên nghiệp cho một giải pháp vừa nhanh vừa đáng tin cậy.

Cách đây một thời gian, tôi đã phải viết lại một bố cục CSS đơn giản và gọn gàng bằng các bảng vì một phần đáng kể người dùng sẽ sử dụng phiên bản cũ hơn của IE với sự hỗ trợ thực sự tồi cho CSS

Tôi, trước hết, tôi phát ốm và mệt mỏi với phản ứng giật đầu gối "Ôi trời! Bàn để bố trí!"

Đối với "nó không nhằm mục đích đó và do đó bạn không nên sử dụng nó theo cách này", đó có phải là đạo đức giả không? Bạn nghĩ gì về tất cả các thủ thuật CSS mà bạn phải sử dụng để làm cho công cụ này hoạt động tốt trong hầu hết các trình duyệt? Họ có nghĩa là cho mục đích đó?

3
Sylverdrag

Bởi vì nó HELL để duy trì một trang web sử dụng các bảng và mất nhiều thời gian hơn để viết mã. Nếu bạn sợ div nổi, hãy tham gia một khóa học về chúng. Chúng không khó hiểu và chúng hiệu quả hơn khoảng 100 lần và giảm một triệu lần đau mông (trừ khi bạn không hiểu chúng - nhưng này, chào mừng bạn đến với thế giới máy tính).

Bất cứ ai xem xét việc bố trí của họ với một bảng tốt hơn không mong đợi tôi duy trì nó. Đó là cách ngược nhất để kết xuất một trang web. Cảm ơn chúa, chúng tôi có một sự thay thế tốt hơn nhiều bây giờ. Tôi sẽ không bao giờ quay trở lại.

Thật đáng sợ khi một số người có thể không nhận thức được lợi ích về thời gian và năng lượng từ việc tạo một trang web bằng các công cụ hiện đại.

3
Chuck Le Butt
  1. Cố gắng hợp nhất/tách một 10/20 một cái gì đó sâu colspan/rowspan. Đã hơn một lần tôi phải kiềm chế bản năng của mình để bắt đầu một cuộc chiến với ai đó. [?!]
  2. Cố gắng thay đổi thứ tự mã nguồn mà không thay đổi thứ tự hiển thị. [SEO, khả năng sử dụng, ...]
  3. Trang rất (rất đơn giản) mà chúng tôi đang xem là ~ 150K. Tôi cá là nó gần như có thể giảm đi một nửa bằng cách sử dụng CSS thích hợp. [SEO (Có, SEO, đọc thông số kỹ thuật mới nhất của Google, v.v.), perfo, ...]
  4. Cố gắng tạo một mẫu lặp có thể hoạt động ở bất kỳ chiều rộng nào.
  5. Cuộc thảo luận về vấn đề trong phương tiện dựa trên bảng này của SO can gây ra sự kỳ dị và phá hủy tất cả chúng ta
2
Halil Özgür

Vấn đề phân tách nghiêm ngặt phần trình bày và nội dung gây cho tôi gần giống với việc tách các tệp tiêu đề khỏi các tệp thực hiện trong C++. Nó có ý nghĩa, nhưng nó cũng có thể là một nỗi đau. Chứng kiến ​​Java và C # trong đó các lớp được định nghĩa trong một tệp nguồn duy nhất. Các tác giả của các ngôn ngữ mới hơn nhận thấy điều gì đó khiến các lập trình viên đau đầu và họ đã loại bỏ nó. Đó dường như là ý chính của cuộc thảo luận này. Một bên nói CSS quá khó, bên còn lại nói một người phải trở thành bậc thầy CSS.

Đối với các vấn đề bố cục đơn giản tại sao không uốn cong quy tắc nói rằng trình bày phải hoàn toàn tách biệt? Điều gì về một thẻ mới (hoặc một số phần mở rộng cho thẻ div) cho phép chúng tôi kiểm soát bản trình bày trực tiếp trong HTML? Rốt cuộc, không phải chúng ta đã rò rỉ bản trình bày sang HTML sao? Nhìn vào h1, h2 ... h6. Chúng ta đều biết những bài thuyết trình kiểm soát này.

Khả năng đọc mã (và HTML là mã) là rất quan trọng. Gurus có xu hướng bỏ qua tầm quan trọng của việc tạo ra một môi trường lập trình càng dễ tiếp cận với công chúng càng tốt. Thật là thiển cận khi nghĩ rằng chỉ những lập trình viên chuyên nghiệp mới quan trọng.

2
user825628

Một vấn đề lớn đối với tôi là các bảng, đặc biệt là các bảng lồng nhau, mất nhiều thời gian để kết xuất hơn so với triển khai css được bố trí đúng. (Bạn có thể làm cho css chậm như vậy).

Tất cả các trình duyệt kết xuất css nhanh hơn vì mỗi div là một thành phần riêng biệt, do đó, một màn hình có thể được tải khi người dùng đang đọc. (Đối với các tập dữ liệu khổng lồ, vv). Tôi đã sử dụng css thay vì các bảng trong trường hợp đó thậm chí không xử lý bố cục.

Một bảng lồng nhau (các bảng bên trong các ô, v.v.) sẽ không hiển thị cho cửa sổ trình duyệt cho đến khi tìm thấy "/ bảng" cuối cùng. Thậm chí tệ hơn - một bảng được xác định kém sẽ đôi khi thậm chí không hiển thị! Hoặc khi nó làm, mọi thứ hoạt động sai. (không colspanning đúng cách với "TD", v.v.)

Tôi sử dụng bảng cho hầu hết mọi thứ, nhưng khi nói đến dữ liệu lớn và mong muốn có màn hình hiển thị nhanh cho người dùng cuối - tôi cố gắng hết sức để sử dụng những gì CSS cung cấp.

2
Tim Fischer

Tôi đã phải thực hiện các trang web theo cả hai cách đó, cộng với một phần ba, bố cục "lai" đáng sợ với các bảng, div và kiểu: Divs/CSS thắng một cách khéo léo.

Bạn sẽ phải lồng ba div sâu để phù hợp với trọng lượng mã của chỉ một ô, ngay lập tức. Đó là quy mô hiệu ứng với các bảng lồng nhau.

Tôi cũng muốn thực hiện một thay đổi bố cục, so với một thay đổi cho mỗi trang trong trang web của tôi.

Tôi có toàn quyền kiểm soát mọi khía cạnh của bản trình bày với divs/css. Các bảng gây rối theo những cách ghê tởm, đặc biệt là trong IE, một trình duyệt mà tôi chưa bao giờ có tùy chọn không hỗ trợ.

Thời gian của tôi để bảo trì hoặc thiết kế lại trang web divs/css là một phần nhỏ của những gì nó sẽ có trong bảng.

Cuối cùng, tôi có thể đổi mới nhiều bố cục có thể chuyển đổi bằng CSS và hầu như bất kỳ ngôn ngữ kịch bản nào. Điều đó là không thể đối với tôi với các bảng.

Chúc may mắn với ROI của bạn khi bạn đưa ra quyết định.

2
John Dunagan

Một ví dụ: bạn muốn tập trung vào khu vực nội dung chính của một trang, nhưng để chứa các phần nổi bên trong nó, nó cần phải được thả nổi. Không có "float: centre" trong CSS.

Đó không phải là cách duy nhất để "chứa phao" bên trong một phần tử trung tâm. Vì vậy, không phải là một cuộc tranh luận tốt ở tất cả!

Theo một cách nào đó, đó là một tiền đề sai lầm, điều "divs vs bảng".

Phân chia nhanh và bẩn của một trang thành ba cột? Bảng được dễ dàng hơn, thành thật mà nói. Nhưng không có chuyên gia sử dụng chúng nữa để bố trí, bởi vì họ khóa vị trí của các yếu tố trang vào trang.

Đối số thực sự là "định vị được thực hiện bởi CSS (hy vọng trong một tệp từ xa)" trái ngược với "định vị được thực hiện bởi HTML trong trang". Chắc chắn ai cũng có thể thấy lợi ích của cái trước trái ngược với cái sau?

  1. Kích thước - nếu bố cục trang của bạn nằm trong HTML, trong các trang, nó không thể được lưu trong bộ nhớ cache và phải được lặp lại trên mỗi trang. Bạn sẽ tiết kiệm được lượng băng thông khổng lồ nếu bố cục của bạn nằm trong tệp CSS được lưu trong bộ nhớ cache chứ không phải trong trang.
  2. Nhiều nhà phát triển có thể làm việc trên cùng một trang cùng một lúc - Tôi làm việc trên HTML, người khác làm việc trên CSS. Không cần kho lưu trữ, không có vấn đề với việc ghi đè, khóa tệp, v.v.
  3. Thực hiện các thay đổi dễ dàng hơn - sẽ có vấn đề với bố cục trong các trình duyệt khác nhau, nhưng bạn chỉ phải sửa một tệp, tệp CSS, để sắp xếp chúng.
  4. Khả năng tiếp cận, như đã đề cập rất nhiều trước đây. Bảng giả định bố trí hai chiều làm việc cho tất cả mọi người. Đó không phải là cách một số người dùng xem nội dung của bạn và đó không phải là cách Google xem nội dung của bạn.

Xem xét điều này:

[ picture ] [ picture ] [ picture ]
[ caption ] [ caption ] [ caption ]

đại diện cho hai hàng của một bảng có 6 ô. Ai đó có thể nhìn thấy bố cục bảng 2 chiều sẽ thấy chú thích dưới mỗi hình ảnh. Nhưng bằng cách sử dụng tổng hợp giọng nói, hoặc một thiết bị PDA và cho một công cụ tìm kiếm, đó là

picture picture picture caption caption caption

và mối quan hệ, rõ ràng với bảng tại chỗ, biến mất.

Các DIV và CSS có tốt hơn cho nhiệm vụ chỉ cần đặt các hình chữ nhật trên trang HTML để đạt được một thiết kế nhất định trong thời gian ngắn nhất? Không, có lẽ chúng không như vậy. Nhưng tôi không kinh doanh nhanh chóng đặt ra các hình chữ nhật để đạt được một thiết kế nhất định. Tôi đang nghĩ về một bức tranh lớn hơn nhiều.

2
AmbroseChapel

Sự tách biệt giữa nội dung và bố cục giúp tạo các bố cục thân thiện với máy in hoặc chỉ các giao diện (kiểu) khác nhau cho trang web của bạn mà không phải tạo các tệp html khác nhau. Một số trình duyệt (như Firefox) thậm chí còn hỗ trợ chọn biểu định kiểu từ menu xem.

Và tôi nghĩ việc duy trì bố cục không cần bàn là dễ dàng hơn. Bạn không phải lo lắng về hàng, colspans, v.v. Bạn chỉ cần tạo một số div-container và đặt nội dung mà bạn cần. Và điều đó nói rằng tôi nghĩ nó cũng dễ đọc hơn (<div id="sidebar"> so với <tr><td>...</td><td>...<td>sidebar</td></tr>).

Đó chỉ là một 'mẹo nhỏ' mà bạn phải học (và một khi bạn thành thạo mánh khóe, tôi nghĩ nó dễ dàng hơn và có ý nghĩa hơn).

2
Grad van Horck

Để trả lời đối số "bảng chậm hơn" - bạn đang nghĩ thời gian kết xuất, đó là số liệu sai. Rất thường xuyên, các nhà phát triển sẽ viết ra một bảng lớn để thực hiện toàn bộ bố cục cho một trang - điều này làm tăng đáng kể kích thước của trang sẽ được tải xuống. Dù muốn hay không, vẫn còn rất nhiều người dùng quay số ngoài kia.

Xem thêm: lạm dụng ViewState

1
Greg Hurlman

Từ kinh nghiệm trong quá khứ, tôi phải đến DIV. Ngay cả trong OOP, mục đích chính là giảm sự ghép nối giữa các đối tượng, vì vậy khái niệm này có thể được áp dụng cho DIVS và các bảng. Các bảng được sử dụng để giữ dữ liệu, không phải để sắp xếp nó xung quanh một trang. Một DIV được thiết kế đặc biệt để sắp xếp các mục xung quanh một trang, vì vậy thiết kế nên sử dụng DIV, nên sử dụng các bảng để lưu trữ dữ liệu.

Ngoài ra, chỉnh sửa các trang web được tạo bằng bảng chỉ đơn giản là khó khăn (theo ý kiến ​​của tôi)

1
Richard

định vị div và CSS cho phép thiết kế linh hoạt hơn, dẫn đến sửa đổi và tạo khuôn mẫu dễ dàng hơn cho các trang web của bạn.

Điều đó nói rằng, nếu bạn không quan tâm đến tính linh hoạt thì việc sử dụng bảng thay vì một số div được đưa vào bảng bằng CSS chắc chắn sẽ dễ dàng hơn rất nhiều và nhanh chóng hơn để đánh bại. Tôi có xu hướng sử dụng các bảng khi gõ một thiết kế chỉ để làm cho nó trông đúng hơn một chút nhanh hơn.

1
workmad3

Khi tôi thiết kế bố cục của mình bằng CSS, tôi thường cung cấp cho mỗi phần chính div gốc (mức cơ thể) và sử dụng định vị tương đối/tuyệt đối để đưa nó vào đúng vị trí của nó. Điều này linh hoạt hơn một chút so với các bảng, vì tôi không giới hạn ở một sự sắp xếp mà tôi có thể biểu diễn bằng các hàng và cột.

Hơn nữa, nếu tôi quyết định rằng tôi muốn sắp xếp lại bố cục (giả sử tôi muốn thanh điều hướng ở ngay bây giờ), tôi có thể chỉ cần thay đổi vị trí cho các thành phần ở một nơi (tệp CSS) và HTML không ' t phải thay đổi. Nếu tôi đang làm điều đó với các bảng, tôi sẽ phải đi vào và tìm thông tin và thực hiện nhiều sửa đổi thuộc tính, sao chép và dán để có được hiệu ứng tương tự.

Trong thực tế, bằng cách sử dụng CSS, tôi thậm chí có thể có người dùng chọn cách họ muốn bố cục của họ hoạt động. Miễn là kích thước chung của các khu vực nội dung không thay đổi, tôi hoàn toàn ổn khi sử dụng một chút PHP kịch bản để xuất CSS của tôi dựa trên tùy chọn của người dùng và cho phép họ sắp xếp lại trang web để ý thích riêng của họ. Một lần nữa, có thể với các bảng, nhưng khó hơn nhiều để duy trì.

Cuối cùng, CSS cho phép một lợi ích CHÍNH mà các bảng sẽ không bao giờ cung cấp: khả năng định dạng lại nội dung dựa trên thiết bị hiển thị. CSS cho phép tôi sử dụng một bộ kiểu hoàn toàn khác (bao gồm vị trí, định dạng, v.v.) cho máy in so với kiểu tôi sử dụng cho màn hình. Điều này cũng có thể được mở rộng sang các phương tiện khác, một ví dụ tuyệt vời là Opera Show, cho phép một trang nâng cao CSS được thiết kế thông minh (và rất chuẩn) được xem như một trình chiếu.

Vì vậy, cuối cùng, sự linh hoạt và quản lý là người chiến thắng thực sự. Nói chung, CSS cho phép bạn làm nhiều hơn với bố cục. Không có gì về mặt kỹ thuật không chuẩn về cách bố trí dựa trên bảng, nhưng tại sao bạn lại muốn giới hạn bản thân?

1
Nicholas Flynt

Trước đây, trình đọc màn hình và phần mềm trợ năng khác có thời gian xử lý các bảng khó khăn một cách hiệu quả. Ở một mức độ nào đó, điều này trở nên được xử lý trong trình đọc màn hình bằng cách trình đọc chuyển đổi giữa chế độ "bảng" và chế độ "bố cục" dựa trên những gì nó thấy bên trong bảng. Điều này thường sai và do đó người dùng phải tự chuyển đổi chế độ khi điều hướng qua các bảng. Trong mọi trường hợp, các bảng lớn, thường được lồng rất cao, và ở một mức độ lớn, vẫn rất khó điều hướng thông qua việc sử dụng trình đọc màn hình.

Điều này cũng đúng khi các div hoặc các phần tử mức khối khác được sử dụng để tạo lại các bảng và được lồng rất cao. Mục đích của div là được sử dụng như một yếu tố sắp xếp và bố cục, và như vậy, được dùng để giữ thông tin tương tự, và đặt nó trên màn hình cho người dùng trực quan. Khi trình đọc màn hình bắt gặp một trang, nó thường bỏ qua mọi thông tin bố cục, cả dựa trên CSS, cũng như thuộc tính html (Điều này không đúng với tất cả các trình đọc màn hình, nhưng đối với những trình duyệt phổ biến nhất, như JAWS, Windows Eyes, và Orca cho Linux nó là).

Cuối cùng, dữ liệu dạng bảng, nghĩa là dữ liệu có ý nghĩa logic được sắp xếp theo hai chiều trở lên, với một số loại tiêu đề, được đặt tốt nhất trong các bảng và sử dụng div để quản lý bố cục nội dung trên trang. (một cách khác để nghĩ về "dữ liệu dạng bảng" là gì khi cố gắng vẽ nó dưới dạng biểu đồ ... nếu bạn không thể, nó có thể không được thể hiện tốt nhất trong một bảng)

Cuối cùng, với cách bố trí dựa trên bảng, để đạt được sự kiểm soát chi tiết về vị trí của các thành phần trên trang, các bảng được lồng cao thường được sử dụng. Điều này có hai hiệu ứng: 1.) Kích thước mã tăng cho mỗi trang - Vì điều hướng và cấu trúc chung thường được thực hiện với các bảng, nên cùng một mã được gửi qua mạng cho mỗi yêu cầu, trong khi bố cục dựa trên div/css kéo tệp css hơn một lần, và sau đó sử dụng div ít chữ. 2.) Các bảng được lồng cao sẽ mất nhiều thời gian hơn để trình duyệt của khách hàng hiển thị, dẫn đến thời gian tải chậm hơn một chút.

Trong cả hai trường hợp, sự gia tăng băng thông "dặm cuối", cũng như máy tính cá nhân nhanh hơn giảm thiểu các yếu tố này, nhưng dù sao đi nữa, chúng vẫn là vấn đề tồn tại của nhiều trang web.

Với tất cả những điều này, như những người khác đã nói, các bảng dễ dàng hơn, bởi vì chúng được định hướng theo lưới nhiều hơn, cho phép ít suy nghĩ hơn. Nếu trang web được đề cập không được mong đợi tồn tại lâu hoặc sẽ không được duy trì, thì có thể có ý nghĩa để làm những gì dễ nhất, bởi vì nó có thể hiệu quả nhất về chi phí. Tuy nhiên, nếu cơ sở người dùng dự đoán có thể bao gồm một phần đáng kể các cá nhân bị khuyết tật hoặc nếu trang web sẽ được duy trì bởi những người khác trong một thời gian dài, cuối cùng bạn sẽ dành thời gian để làm mọi thứ một cách ngắn gọn, có thể truy cập được.

1
cdeszaq

Tôi vẫn không hiểu làm thế nào div/CSS giúp thay đổi thiết kế trang dễ dàng hơn khi bạn xem xét số lượng thử nghiệm để đảm bảo các thay đổi hoạt động trên tất cả các trình duyệt, đặc biệt là với tất cả các bản hack, v.v. Đó là một quá trình cực kỳ bực bội và tẻ nhạt gây lãng phí thời gian và tiền bạc lớn. Rất may, luật 508 chỉ áp dụng cho Hoa Kỳ (vùng đất tự do - đúng rồi) và vì vậy khi tôi ở Vương quốc Anh, tôi có thể phát triển các trang web theo bất kỳ phong cách nào tôi chọn. Trái với niềm tin phổ biến (Hoa Kỳ), luật pháp được ban hành tại Washington không áp dụng với phần còn lại của thế giới - cảm ơn chúa vì điều đó. Đó chắc hẳn là một ngày tốt lành trong thế giới thiết kế web vào ngày luật pháp có hiệu lực. Tôi nghĩ rằng tôi ngày càng trở nên yếm thế khi tôi già đi với 25 năm trong ngành CNTT nhưng tôi cảm thấy chắc chắn loại luật này chỉ để bảo vệ công ăn việc làm. Trong thực tế, bất cứ ai cũng có thể gõ một trang web hợp lý với một vài bảng. Phải mất nhiều nỗ lực và kiến ​​thức hơn để làm điều này với DIVs/CSS. Theo kinh nghiệm của tôi, có thể mất hàng giờ đồng hồ để tìm giải pháp cho các vấn đề khá đơn giản và đọc các bài báo khó hiểu trong các diễn đàn đầy nhiệt huyết lý tưởng, tất cả đều tranh luận về cách làm 'đúng'. Bạn không thể nhúng ngón chân xuống nước và khiến mọi thứ hoạt động bình thường trong mọi trường hợp. Đối với tôi, dường như việc thiếu một hướng dẫn dứt khoát về việc sử dụng "ngoài luồng" DIVS/CSS, áp dụng cho tất cả các tình huống, làm việc trên trình duyệt và viết bằng ngôn ngữ 'bình thường' không có tiếng nói, cũng có mùi của một chút của chủ nghĩa bảo hộ.
[.__.] Tôi là một nhà phát triển ứng dụng và tôi sẽ nói rằng phải mất gần gấp đôi thời gian để tìm ra các vấn đề về bố cục và kiểm tra tất cả các trình duyệt so với việc tạo ứng dụng cơ bản, thiết kế và triển khai các đối tượng kinh doanh và tạo cơ sở dữ liệu kết thúc trở lại. Thời gian của tôi = tiền, cả tôi và khách hàng đều như vậy nên tôi rất tiếc nếu tôi không từ chối tất cả các đối số DIV/CSS chuyên nghiệp để cắt giảm chi phí và cung cấp giá trị đồng tiền cho khách hàng của mình. Có thể đó chỉ là cách mà các nhà phát triển làm việc, nhưng đối với tôi, việc thay đổi cấu trúc bảng phức tạp dễ dàng hơn nhiều so với việc sửa đổi DIVs/CSS. Rất may, bây giờ có vẻ như một giải pháp cho những vấn đề này hiện đã có sẵn - nó được gọi là WPF.

1
Tim Black

Tôi nghĩ không ai quan tâm làm thế nào một trang web được thiết kế/thực hiện khi nó hoạt động tốt và nó hoạt động nhanh.

Tôi sử dụng cả hai thẻ "bảng" và "div"/"span" trong đánh dấu HTML.

Hãy để tôi cung cấp cho bạn một vài lập luận tại sao tôi chọn divs:

  1. đối với một bảng bạn phải viết ít nhất 3 thẻ (bảng, tr, td, thead, tbody), để có một thiết kế đẹp, đôi khi bạn có rất nhiều bảng lồng nhau

  2. Tôi muốn có các thành phần trên trang. Tôi không biết làm thế nào để giải thích chính xác nhưng sẽ cố gắng. Giả sử bạn cần một logo và cái này phải được đặt, chỉ là một phần nhỏ của nó, trên nội dung trang tiếp theo. Sử dụng các bảng bạn phải cắt 2 hình ảnh và đặt nó thành 2 TD khác nhau. Sử dụng DIV, bạn có thể có một CSS đơn giản để sắp xếp nó theo ý muốn. Bạn thích giải pháp nào nhất?

  3. khi có hơn 3 bảng lồng nhau để làm một cái gì đó tôi đang nghĩ để thiết kế lại nó bằng cách sử dụng DIV

NHƯNG tôi vẫn đang sử dụng bảng cho:

  1. dữ liệu dạng bảng

  2. nội dung đang tự mở rộng

  3. giải pháp nhanh (nguyên mẫu), vì mô hình hộp DIV khác nhau trên mỗi trình duyệt, vì nhiều trình tạo đang sử dụng bảng, v.v.

1
Dani

Bằng cách vẫn sử dụng bảng cho bố cục, chúng tôi thiếu về sự đổi mới ở phía div.

Nhiều người đã đưa ra các giải pháp giúp việc tạo bố cục cho div dễ dàng hơn. Phổ biến nhất là kiến ​​trúc lưới. Có máy phát bố trí động dựa trên kiến ​​trúc này. Kiểm tra: 1) 960.gs và (http://grids.heroku.com/) 2) bản thiết kế và rất nhiều bản trễ.

Tôi chưa thấy nhiều sự đổi mới về kiến ​​trúc và công cụ với cách bố trí bảng.

Tôi có thể nói, tất cả các lý thuyết sang một bên, thực tế bố trí với CSS và div đều nhanh hơn. Thay vì đổi mới theo hướng này làm cho nó dễ dàng hơn bất cứ điều gì.

1
Pixelgrey

Các bảng rất tốt cho HTML mà bạn đang kết hợp với nhau vì một cái gì đó đơn giản hoặc tạm thời. Nếu bạn đang xây dựng một trang web quy mô lớn, bạn nên sử dụng div và CSS, vì nó sẽ dễ duy trì hơn theo thời gian khi trang web của bạn thay đổi.

1
Adam Rosenfield

1: Có, người dùng của bạn quan tâm. Nếu họ sử dụng trình đọc màn hình, nó sẽ bị mất. Nếu tôi sử dụng bất kỳ công cụ nào khác cố gắng trích xuất thông tin từ trang, việc gặp phải các bảng không được sử dụng để thể hiện dữ liệu dạng bảng là sai lệch.

Một div hoặc span được chấp nhận để phân tách nội dung vì đó chính xác là ý nghĩa của các yếu tố đó. Khi tôi, một công cụ tìm kiếm, trình đọc màn hình hoặc bất cứ thứ gì khác gặp phải thành phần bảng, chúng tôi hy vọng rằng điều này có nghĩa là "sau đây là dữ liệu dạng bảng, được biểu thị trong bảng". Khi chúng tôi gặp một div, chúng tôi mong đợi "đây là một yếu tố được sử dụng để div ide nội dung của tôi thành các phần hoặc khu vực riêng biệt.

2: Dễ đọc: Sai. Nếu tất cả các mã trình bày là trong css, tôi có thể đọc html và tôi sẽ hiểu nội dung của trang. Hoặc tôi có thể đọc css và hiểu bài thuyết trình. Nếu mọi thứ bị xáo trộn với nhau trong html, tôi phải loại bỏ tất cả các bit liên quan đến bản trình bày trước khi tôi có thể thấy nội dung là gì và nội dung nào không. Hơn nữa, tôi rất sợ gặp một nhà phát triển web không hiểu css, vì vậy tôi thực sự không nghĩ đó là một vấn đề.

3: Bàn chậm hơn: Có, chúng là. Lý do rất đơn giản: Các bảng phải được phân tích cú pháp hoàn toàn, bao gồm nội dung của chúng trước khi có thể được hiển thị. Một div có thể được hiển thị khi gặp phải, thậm chí trước nội dung của nó đã được phân tích cú pháp. Điều đó có nghĩa là div sẽ xuất hiện trước khi trang tải xong.

Và sau đó là phần thưởng, các bảng dễ vỡ hơn nhiều và sẽ không luôn được hiển thị giống nhau trong các trình duyệt khác nhau, với các phông chữ và kích thước phông chữ khác nhau và tất cả các yếu tố khác có thể khiến bố cục thay đổi. Bảng là một cách tuyệt vời để đảm bảo rằng trang web của bạn sẽ bị tắt bởi một hoặc hai pixel trong một số trình duyệt nhất định, sẽ không mở rộng tốt khi người dùng thay đổi kích thước phông chữ của mình hoặc thay đổi cài đặt của mình theo bất kỳ cách nào khác.

Tất nhiên # 1 là lớn. Rất nhiều công cụ và ứng dụng phụ thuộc vào ý nghĩa ngữ nghĩa của trang web. Ví dụ thông thường là trình đọc màn hình cho người dùng khiếm thị. Nếu bạn là nhà phát triển web, bạn sẽ thấy rằng nhiều công ty lớn có thể thuê bạn làm việc trên một trang web, yêu cầ rằng trang web có thể truy cập được ngay cả trong trường hợp này. Điều đó có nghĩa là bạn phải suy nghĩ về ý nghĩa ngữ nghĩa của html của bạn. Với web ngữ nghĩa, hoặc phù hợp hơn, microformats, rss reader và các công cụ khác, nội dung trang của bạn không còn được xem độc quyền thông qua trình duyệt.

1
jalf

Tôi xin lỗi vì tiếng Anh của tôi nhưng đây là một lý do khác:

Tôi đã làm việc trong một số tổ chức chính phủ và lý do số một để không sử dụng BẢNG, là dành cho những người khuyết tật. Họ sử dụng máy móc để "dịch" các trang web.

Vấn đề là "máy dịch" này không thể đọc trang web nếu nó được thực hiện bởi BẢNG. Tại sao ? Bởi vì BẢNG là dành cho DATAS.

thực tế, nếu bạn sử dụng BẢNG, đối với mỗi CELLS, bạn phải chỉ định một số thông tin để cho người khuyết tật biết họ đang ở đâu trong BẢNG. Hãy tưởng tượng bạn có một bảng lớn và phải phóng to để chỉ nhìn thấy 1 ô trên màn hình: bạn phải biết bạn đang ở dòng nào/col.

Vì vậy, DIV được sử dụng và người khuyết tật có thể chỉ cần đọc văn bản và không nhận được một số thông tin kỳ lạ về dòng/cols khi họ không phải ở đó.

Tôi cũng thích BẢNG để tạo các mẫu nhanh và dễ dàng, nhưng giờ tôi đã quen với CSS ... nó rất mạnh, nhưng bạn thực sự phải biết bạn đang làm gì ... :)

1
RVeur23

Flex có một thẻ để đặt mọi thứ trong các cột dọc. Tôi không nghĩ rằng họ có toàn bộ bố cục/nội dung đúng hoặc trung thực, nhưng ít nhất họ đã giải quyết vấn đề đó.

Giống như nhiều người thất vọng với CSS, tôi cũng đã tìm kiếm một câu trả lời dễ dàng, bị lừa vì cảm thấy phấn chấn khi tôi nghĩ rằng tôi đã tìm thấy nó và rồi hy vọng của tôi tan vỡ khi tôi mở trang trong Chrome. Tôi chắc chắn không đủ kỹ năng để nói rằng điều đó là không thể, nhưng tôi chưa thấy ai đưa ra mã mẫu để đánh giá ngang hàng chứng minh một cách chắc chắn rằng nó có thể được thực hiện một cách đáng tin cậy.

Vì vậy, ai đó từ phía CSS của hòn đảo này có thể đề xuất một tư duy/phương pháp luận để đặt các cột dọc không? Tôi đã thử định vị tuyệt đối ở hàng thứ hai và thứ ba, nhưng tôi kết thúc với những thứ chồng chéo ở mọi nơi và nổi có vấn đề tương tự nếu trang bị thu hẹp.

Nếu có câu trả lời cho điều này, tôi sẽ ngây ngất - hãy làm điều đúng - Chỉ cần nói với tôi điều gì đó như, "Hey bạn đã thử ** chảy: dọc | ngang" và tôi hoàn toàn ra khỏi tóc của bạn.

1
Shanimal

Google ưu tiên rất thấp cho nội dung văn bản có trong một bảng. Tôi đã đưa ra một số lời khuyên SEO cho một tổ chức từ thiện địa phương. Khi kiểm tra trang web của họ, nó đã sử dụng các bảng để bố trí trang web. Nhìn vào từng trang, bất kể từ nào - hoặc kết hợp các từ - từ các trang của chúng tôi đã sử dụng trong hộp tìm kiếm của Google, các trang sẽ không xuất hiện trong bất kỳ trang tìm kiếm hàng đầu nào. (Tuy nhiên, bằng cách chỉ định trang web trong tìm kiếm, trang đã được trả lại.) Một trang được sao chép tốt theo tiêu chuẩn thông thường để tạo ra kết quả tốt trong tìm kiếm nhưng vẫn không xuất hiện trong bất kỳ trang đầu tiên nào về kết quả tìm kiếm . (Lưu ý văn bản này nằm trong một bảng.) Sau đó tôi phát hiện ra một phần văn bản trên các trang nằm trong div chứ không phải bảng. Chúng tôi đặt một vài từ trong div đó vào công cụ tìm kiếm. Kết quả? Nó đến ở số 2 trong kết quả tìm kiếm.

1
Simon Measures

Tôi đã từng biết rằng một bảng tải cùng một lúc, nói cách khác là khi kết nối chậm, không gian nơi bảng sẽ trống cho đến khi toàn bộ bảng được tải, mặt khác, div tải từ trên xuống dưới nhanh như dữ liệu đến và bất kể nó đã hoàn thành hay chưa.

1
Davy

Sử dụng các bảng khi bạn cần đảm bảo rằng các yếu tố cần duy trì trong mối quan hệ vật lý cụ thể trong bố cục. Đối với dữ liệu, bảng nói chung là phần tử bố cục tốt nhất để sử dụng vì bạn không muốn các cột của mình được bọc theo một cách bất ngờ và gây nhầm lẫn cho các liên kết.

Người ta cũng có thể lập luận rằng các yếu tố phi dữ liệu phải duy trì trong một mối quan hệ cụ thể cũng nên được hiển thị trong một bảng.

Bố cục css linh hoạt phù hợp với nội dung phù hợp với thiết bị di động, màn hình lớn và in ấn và các loại màn hình khác, nhưng đôi khi, nội dung chỉ phải được hiển thị theo một cách rất cụ thể và nếu điều đó đòi hỏi người đọc màn hình có thể dễ dàng truy cập nó, nó rất có thể được biện minh.

1
Sal

Tôi cố gắng tránh BẢNG càng nhiều càng tốt, nhưng khi chúng tôi thiết kế các hình thức phức tạp pha trộn nhiều loại điều khiển và các vị trí chú thích khác nhau với các điều khiển khá nghiêm ngặt về nhóm, sử dụng DIV là không đáng tin cậy hoặc thường gần như không thể.

Bây giờ, tôi sẽ không tranh luận rằng các hình thức này không thể được thiết kế lại để phù hợp hơn với bố cục dựa trên DIV, nhưng đối với một số người trong số họ, khách hàng của chúng tôi rất kiên quyết về việc không thay đổi bố cục hiện tại từ phiên bản trước (viết bằng ASP cổ điển) mẫu giấy mà người dùng của họ quen thuộc.

Bởi vì việc trình bày các biểu mẫu là động (trong đó việc hiển thị một số phần dựa trên trạng thái của trường hợp hoặc quyền của người dùng), chúng tôi sử dụng các bộ DIV xếp chồng lên nhau, mỗi phần chứa BẢNG các phần tử biểu mẫu được nhóm hợp lý. Mỗi cột của BẢNG được phân loại để chúng có thể được điều khiển bằng CSS. Bằng cách đó, chúng ta có thể tắt các phần khác nhau của biểu mẫu mà không gặp vấn đề không phải là bảng để bọc các hàng trong DIV.

1
CMPalmer

Tôi đã nghiên cứu vấn đề về trình đọc màn hình và bảng vài năm trước và đưa ra thông tin mâu thuẫn với những gì hầu hết các nhà phát triển tin rằng:

http://www.webaim.org/techniques/tables/

"Bạn có thể sẽ nghe một số người ủng hộ khả năng truy cập nói rằng các bảng bố cục là một ý tưởng tồi và thay vào đó các kỹ thuật bố trí CSS nên được sử dụng. điều mà bạn có thể làm về khả năng tiếp cận. Những người bị khuyết tật có thể dễ dàng truy cập các bảng, miễn là các bảng được thiết kế có khả năng tiếp cận trong tâm trí. "

1
Rimian

Tôi tin rằng đây là một vấn đề liên quan đến một vấn đề chung. Khi HTML ra đời, không ai có thể thấy trước việc sử dụng rộng rãi của nó. Một công nghệ khác gần như sụp đổ dưới sức nặng của sự thành công của chính nó. Khi các trang HTML được viết bằng vi trên thiết bị đầu cuối văn bản màu xanh, BẢNG là tất cả những gì cần thiết để trình bày dữ liệu cho khách truy cập của trang và chủ yếu là dữ liệu có ý nghĩa ở dạng bảng.

Chúng ta đều biết mọi thứ phát triển như thế nào. BẢNG đã đi ra khỏi thời trang tương đối gần đây, nhưng có rất nhiều lý do để thích các bố cục dựa trên DIV và CSS (khả năng truy cập không phải là cuối cùng của chúng). Tất nhiên tôi không thể viết CSS để cứu cuộc đời mình :-) và tôi nghĩ rằng một chuyên gia thiết kế đồ họa phải luôn sẵn sàng.

Điều đó nói rằng ... có rất nhiều dữ liệu nên được trình bày trong một bảng ngay cả trong một trang web hiện đại.

1
Manrico Corazzi

Nếu bạn đang hỗ trợ góc bàn trên này, hãy tìm một trang có bảng và sau đó tự tìm cho mình một trình đọc màn hình - tắt trình đọc màn hình và tắt màn hình của bạn.

Sau đó thử nó với một trang web bố trí div đúng ngữ nghĩa.

Bạn sẽ thấy sự khác biệt.

Các bảng không xấu nếu dữ liệu trong đó là dạng bảng không để bố trí trang.

1
Allen Hardy

Theo kiến ​​thức của tôi trên các bảng, nếu có quá nhiều bảng được lồng vào nhau, có một chi phí rất lớn cho trình duyệt trong việc hiển thị trang.

1 - Trình duyệt đã chờ để hiển thị chế độ xem cuối cùng chờ cho đến khi toàn bộ bảng được tải.

2 - Thuật toán để hiển thị bảng rất tốn kém và không phải trong một lần. Trình duyệt, khi và khi nào có được nội dung, sẽ cố gắng kết xuất tính toán chiều rộng và chiều cao nội dung. Vì vậy, nếu bạn đang có các bảng lồng nhau, giả sử, trình duyệt đã nhận được hàng đầu tiên và ô thứ nhất có số lượng lớn nội dung và chiều rộng và chiều cao không được xác định, nó sẽ tính chiều rộng và sẽ hiển thị hàng đầu tiên. trong khi hàng thứ 2 sẽ có ô số 2 có vô số nội dung! Bây giờ nó sẽ tính chiều rộng cho các ô hàng thứ 2 .. Còn cái đầu tiên thì sao? Nó sẽ tính toán chiều rộng đệ quy. Điều đó thật tệ ở phía khách hàng. (Để lấy ví dụ về trang web) Là một lập trình viên, bạn sẽ tối ưu hóa các thứ như thời gian để tìm nạp dữ liệu, cấu trúc dữ liệu được tối ưu hóa, v.v. 8 giây. Có chuyện gì ở đây vậy? 1. Có thể mạng bị chậm! Nếu mạng ổn thì sao? Mạng đang phân phối nội dung trong 1 giây tiếp theo là gì? 5 giây này được tiêu thụ ở đâu? Điều đáng lo ngại-- Trình duyệt có thể mất nhiều thời gian trong việc ước tính và hiển thị các bảng!

Làm thế nào để tối ưu hóa bảng? Nếu bạn đang sử dụng bảng, tôi sẽ đề xuất, luôn xác định chiều rộng cho các ô. Điều này không đảm bảo rằng trình duyệt sẽ chỉ lấy độ rộng này một cách mù quáng, nhưng sẽ giúp ích rất nhiều cho trình duyệt trong việc quyết định độ rộng ban đầu.

Nhưng, cuối cùng, div là cách tuyệt vời vì CSS có thể được lưu trữ bởi trình duyệt; trong khi bảng không được lưu trữ!

1
Biranchi Panda

Các bảng được sử dụng làm bố cục thuần túy gây ra một số vấn đề về khả năng truy cập (mà tôi đã nghe). Nhưng tôi hiểu những gì đang được hỏi ở đây rằng bằng cách nào đó bạn làm tê liệt web bằng cách sử dụng bảng để đảm bảo căn chỉnh chính xác của một cái gì đó trên trang của bạn.

Trước đây, tôi đã nghe mọi người tranh luận rằng các nhãn FORM và đầu vào trên thực tế là dữ liệu và chúng nên được cho phép vào các bảng.

Đối số sử dụng bảng để đảm bảo một vài phần tử xếp hàng chính xác gây ra sự gia tăng mã lớn này có xu hướng bao gồm các ví dụ về cách một DIV duy nhất có thể đáp ứng tất cả các nhu cầu của chúng. Chúng không phải lúc nào cũng bao gồm 10 dòng CSS và các bản hack trình duyệt đặc biệt mà chúng phải viết cho IE5, IE5.5, IE6, IE7 ...

Tôi nghĩ rằng nó vẫn còn về việc sử dụng sự cân bằng trong thiết kế của bạn. Các bảng nằm trong hộp công cụ, chỉ cần nhớ những gì chúng dành cho ...

0
HB

Chắc chắn OP có một chút sóng gió, các cuộc tranh luận dường như rất tuần và dễ dàng phản bác.

Các trang web là miền của các nhà phát triển web và nếu họ nói div & CSS tốt hơn các bảng đủ tốt cho tôi.

Nếu một bố cục đạt được bằng các bảng được tạo bởi ứng dụng máy chủ, thì bố cục mới có nghĩa là thay đổi ứng dụng, xây dựng lại và cung cấp lại ứng dụng, như được thay đổi thành tệp css.

Thêm vào đó, khả năng tiếp cận. Các bảng được sử dụng để bố trí làm cho một trang web không thể truy cập, vì vậy đừng sử dụng chúng. Đó là một không có trí tuệ, không đề cập đến bất hợp pháp.

0
Ian

Câu trả lời siêu ngắn: thiết kế trang web có thể bảo trì là khó khăn với các bảng và đơn giản với cách tiêu chuẩn để làm điều đó.

Một trang web không phải là một bảng, nó là một tập hợp các thành phần tương tác với nhau. Mô tả nó như một bảng không có ý nghĩa.

0
Rich Bradshaw

Về mặt bảo trì trang web và đại tu thiết kế trong khi duy trì nội dung (luôn luôn xảy ra, đặc biệt là trong Thương mại điện tử):

Nội dung và thiết kế được kết hợp với nhau thông qua các bảng = cập nhật cả nội dung và thiết kế.

Nội dung tách biệt với thiết kế = cập nhật thiết kế và có thể một chút nội dung.

Nếu tôi làm theo cách của mình, tôi sẽ giữ nội dung của mình trong PHP tạo XML, được chuyển đổi thành đánh dấu trong XSLT và được thiết kế bằng CSS và Javascript để tương tác. Đối với khía cạnh Java, hãy chuyển sang JSTL để tạo đánh dấu.

0
mltorrefranca

Sử dụng DIV, bạn có thể dễ dàng chuyển đổi mọi thứ. Ví dụ: bạn có thể thực hiện điều này:

Menu | Content

Content | Menu

Menu
----
Content

Thật dễ dàng để thay đổi nó trong CSS, không phải trong HTML. Bạn cũng có thể cung cấp một số kiểu (thuận tay phải, thuận tay trái, đặc biệt cho màn hình nhỏ).

Trong CSS, bạn cũng có thể ẩn menu trong biểu định kiểu đặc biệt được sử dụng để in.

Một điều tốt nữa là nội dung của bạn luôn theo cùng một thứ tự trong mã (menu trước, nội dung sau) ngay cả khi trực quan nó được trình bày theo cách khác.

0
ofaurax