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

Dường như đó là ý 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 sai lầm; 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?
  
  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ễ hơn sử dụng div và CSS.
  
  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.

• 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 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 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. 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.

• Một đại tu bố trí dễ dàng hơn mà không cần bàn, 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 đẹp, nhưng một chút lý thuyết. Chưa kể việc lạm dụng 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.

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 <table>phần tử 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 <table>các phần tử trên mạng 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 <table>hành xử 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 dẫn nguồn ]} . Đó là bảng là trên thực tế duy trì ít hơn nên được 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ốn kém. 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.

Các lồng sâu <div>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 được lồng 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 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ẽ hợp lý khi loại trừ nội dung dạng bảng khỏi bộ 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 khi 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 tiếp cậ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.

Đâ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ã này không có lỗi, nhưng không chính xác về mặt ngữ nghĩa . 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 <table>phần tử. 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 <table>phần tử để đạt được mục tiêu trình bày.

Phần 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.

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.

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. Ví dụ, bố cục dựa trên bả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ủ, hỗ trợ các trình duyệt truy cập như trình đọc màn hình có thể được yêu cầu .

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ề mức độ phân tách trình bày khỏi nội dung. 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 việc kết hợp lại với nhau thường là đáng giá.

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 này 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 chúng chặt chẽ.

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, đây 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.

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ó rất 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 đề nghị đọc CSS Mastery của Andy Budd. Thật tuyệt vơi.

Hình ảnh tại ecx.images-amazon.com http://ecx.images-amazon.com/images/I/41TH5NFKPEL._SL500_BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_40

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

Đó là một đối số ngụy biện vì các bảng HTML được bố trí! Nội dung là dữ liệu 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 bảng và tất cả chỉ 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 chúng tôi (chúng tôi bán một phần cứng với 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ó.

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ó 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 một bảng. Đ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 mẫu 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ạ với tôi tại sao bạn lại muốn làm điều này với một mẫu 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, đảm bảo điều đó đáp ứng khách hàng 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 - bạn có thể biện minh cho điều gì vì muốn tôi làm điều đó theo bất kỳ cách nào khác!

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 viết 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 chết tiệt 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.

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 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.

Đâ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 để suy nghĩ về: tập tin hóa . 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 đó là trên những người có modem quay số.

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 ngữ nghĩa .

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à thậ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.

Mẹo này cân bằng một chút về phía bàn 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 họ), cuối cùng, quan điểm thực dụng chỉ là 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.

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 , xem cách thay đổi biểu định kiểu có thể thay đổi bố cục mạnh mẽ và suy nghĩ xem bạn có thể đạt được cùng một cách bố trí 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 bạn là, bạn Gần như chắc chắn sẽ thấy dễ dàng hơn khi sử dụng div nổi, v.v. 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 điều chỉnh 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.

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?

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 làm dịch vụ chăm sóc, và họ cũng quan trọng 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ý.

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ệ, trên 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 cạnh, 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.

Tính linh hoạt của bố cục
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 :
Nếu bạn đặt mỗi thumbnail trong một DIV, lưu hành trái, có lẽ 10 trong số họ phù hợp trên một hàng. Làm cho cửa sổ hẹp hơn và BAM - đó là 6 trên một hàng, hoặc 2, 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. Giáo sư! 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 đó ... (v.v.)
( 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ó lẽ sẽ không thành vấn đề. )

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.

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 <div>thẻ, 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 (xem> nguồn) 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.

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ẽ gọn gàng hơn, 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/

• 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 </table>phần tử.

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à 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à các 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.

Đây thực sự không phải 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à cùng lý do 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ờ.

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. Cổng thông tin Netweaver của SAP theo mặc định 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.

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 "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.

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.

Các bảng nói chung không dễ dàng hơn hoặc dễ bảo trì hơn CSS. Tuy nhiên, có một vài cụ thể vấn đề bố cục 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 font-tags tốt hơn việc chỉ định kiểu chữ trong CSS, vì CSS mang lại cho bạn sức mạnh tương đươngfont -tags, nhưng trong một 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. Bảng và CSS do đó không tương đương về sức mạnh. Phần còn thiếu là hành vi giống như 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 dễ dàng đạt được bằng cách sử dụngdisplay: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 cho việc 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 bạn nên 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 luôn có thể 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.

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ó độc lập 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 kết quả cần phải được xử lý thông qua JavaScript, 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ể, thật hữu ích khi có thể thay đổi bố cục theo nhiều cách khác nhau để tìm ra những 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 nhau

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 việc xem nhanh qua mạng trên các trình duyệt và độ phân giải màn hình khác nhau 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 IE cũ hơn 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 đó?