113

Có thể trùng lặp:
Tại sao không sử dụng bảng để bố trí trong HTML?

Trong những điều kiện nào bạn nên chọn bảng thay vì DIV trong mã HTML?

|
194

Toàn bộ điều "Bàn vs Divs" hầu như không bỏ lỡ dấu ấn. Đó không phải là "bảng" hay "div". Đó là về việc sử dụng html ngữ nghĩa.

Ngay cả thẻ div chỉ đóng một phần nhỏ trong một trang được bố trí tốt. Đừng lạm dụng nó. Bạn không cần nhiều như vậy nếu bạn đặt html của bạn chính xác. Những thứ như danh sách, bộ trường, truyền thuyết, nhãn, đoạn văn, v.v. có thể thay thế phần lớn những gì một div hoặc span thường được sử dụng để thực hiện. Div nên được sử dụng chủ yếu khi có ý nghĩa để chỉ ra div logic khái niệm và chỉ được sử dụng để bố trí thêm khi thực sự cần thiết. Điều này cũng đúng với bảng; sử dụng nó khi bạn có dữ liệu dạng bảng, nhưng không thì khác.

Sau đó, bạn có một trang ngữ nghĩa hơn và bạn không cần nhiều lớp được định nghĩa trong CSS của bạn; thay vào đó bạn có thể nhắm mục tiêu các thẻ trực tiếp. Có thể quan trọng nhất, bạn có một trang sẽ ghi điểm tốt hơn với Google (giai thoại) so với bảng tương đương hoặc trang div-heavy. Hầu hết tất cả sẽ giúp bạn kết nối tốt hơn với một phần khán giả của bạn.

Vì vậy, nếu chúng ta quay lại và xem xét nó theo bảng so với div, thì ý kiến ​​của tôi là chúng ta thực sự đã đến thời điểm mà div được sử dụng quá mức và bảng được sử dụng quá mức. Tại sao? Bởi vì khi bạn thực sự nghĩ về nó, có rất nhiều thứ nằm ngoài danh mục "dữ liệu dạng bảng" có xu hướng bị bỏ qua. Câu trả lời và nhận xét trên trang web này, ví dụ. Chúng bao gồm nhiều bản ghi, mỗi bản ghi có cùng một bộ trường. Họ thậm chí còn được lưu trữ trong một bảng máy chủ sql, vì khóc to. Đây là định nghĩa chính xác của dữ liệu dạng bảng. Điều này có nghĩa là thẻ bảng html hoàn toàn sẽ là một lựa chọn ngữ nghĩa tốt để bố trí một cái gì đó giống như các bài đăng ở đây trên Stack Overflow. Nguyên tắc tương tự cũng áp dụng cho nhiều thứ khác. Có thể không nên sử dụng thẻ bảng để thiết lập bố cục ba cột, nhưng nó '

|
  • 1

    Đã đồng ý. Cách đây nhiều năm, khi tôi lần đầu tiên bước ra khỏi bố cục dựa trên bàn, tôi đã có toàn bộ câu thần chú "sử dụng div" được khoan vào não. Mã kết quả thậm chí còn ít ngữ nghĩa. Khi bạn đã biết HTML và tất cả những gì nó cung cấp, bạn học cách viết mã có ý nghĩa và tất cả trở nên đơn giản.

    – Lý Kim Thư 05:08:49 16/09/2008
  • 1

    +1 Thật vui khi thấy điều này được thể hiện rất tốt.

    – Trịnh Khắc Ninh 19:01:40 29/01/2009
  • 1

    Thật thú vị khi thấy các trang web lớn sử dụng bảng. Tải plugin WebDeveloper cho Firefox và sử dụng tính năng cho phép bạn phác thảo các bảng. Sau đó đi đến các trang web lớn. Bạn sẽ thấy bàn ở một số nơi thú vị. Ví dụ: Amazon có một bảng hiển thị số lượng sản phẩm thay đổi tùy thuộc vào độ rộng của cửa sổ. Hầu hết mọi thứ được thực hiện tốt nhất dưới dạng div, nhưng một số trường hợp khó khăn sẽ tốt hơn với bảng khi bạn xem xét các trình duyệt cũ.

    – Bùi Hữu Trác 14:21:09 10/06/2009
  • 1

    Tôi phải không đồng ý về việc sử dụng bảng StackOverflow để phân tách bài đăng và bình luận. Về cơ bản, tôi có một quy tắc ngón tay cái: nếu bảng chỉ có trthẻ, divthay vào đó hãy sử dụng s.

    – Hoàng Ánh Minh 20:09:36 07/03/2010
  • 1

    @Joel Coehoorn Mặc dù tôi đồng ý về việc lạm dụng DIV nhưng tôi sẽ dính vào BẢNG trên dữ liệu TABULAR. Mặc dù bố cục của SO ngày nay có thể là một chút về phía bảng, nhưng bản thân DATA không phải là TABULAR. Vì vậy, các bảng sẽ được ra khỏi đường.

    – Oki ru 04:59:24 14/06/2010
51

Khi dữ liệu tôi đang trình bày, thực sự, là bảng.

Tôi thấy thật nực cười khi một số nhà thiết kế web đã sử dụng div trên dữ liệu dạng bảng trên một số trang web.

Một cách sử dụng khác mà tôi có cho nó sẽ là các biểu mẫu, đặc biệt là nhãn: cặp hộp văn bản. Điều này về mặt kỹ thuật có thể được thực hiện trong các hộp div, nhưng thực hiện việc này trong các bảng dễ dàng hơn nhiều và người ta có thể lập luận rằng nhãn: các cặp hộp văn bản thực chất là dạng bảng.

|
  • 1

    Các cặp Nhãn / Hộp văn bản nên sử dụng thẻ <nhãn>. Với một công việc nhỏ {display: block; float: left;} bạn có thể tạo kiểu cho tất cả các nhãn trong trường được đặt để có chiều rộng mong muốn.

    – Tạ Bảo Ngọc 14:31:01 08/09/2008
  • 1

    Tôi đồng ý với Joel về điều này. Việc ghép nối được tích hợp vào ngữ nghĩa (<nhãn for = "txtMyTextBox" />) và với css thích hợp, điều này có thể được xử lý rất sạch sẽ

    – Dương Thế Vinh 16:58:34 17/09/2008
  • 1

    Mặc dù bạn không phải sử dụng bảng, nhưng đó là "dữ liệu dạng bảng". Tưởng tượng các tiêu đề "Tên trường" và "Giá trị" trên đầu các cột. Tôi cũng đã thấy nó được thực hiện với các danh sách định nghĩa, thể hiện mối quan hệ khóa-giá trị tương tự.

    – Đặng Ngọc Duy 03:48:13 30/11/2009
  • 1

    Không, sự khác biệt là kết hợp Nhãn / TextBox cho phép bạn trình bày dưới dạng bố cục dạng bảng nếu bạn muốn hoặc không nếu bạn muốn một cái gì đó khác biệt. Sử dụng một bảng buộc nó vào bố cục dạng bảng, khiến cho việc thay đổi nó sau này trở nên khó khăn hơn nhiều nếu bạn quyết định đi theo một hướng khác.

    – Ngô Quang Thắng 20:35:29 30/06/2010
23

Tôi đã từng làm CSS thuần túy nhưng tôi đã từ bỏ sự theo đuổi đó để ủng hộ cách tiếp cận bảng / css lai như là cách tiếp cận thực dụng nhất. Trớ trêu thay, đó cũng là vì khả năng tiếp cận. Bạn đã bao giờ thử làm CSS trên Sidekick chưa? Thật là một cơn ác mộng! Bạn đã bao giờ thấy các trang web dựa trên CSS được hiển thị trên các trình duyệt mới chưa? Các yếu tố sẽ chồng lấp hoặc chỉ không hiển thị chính xác rằng tôi phải tắt CSS. Bạn đã bao giờ thử thay đổi kích thước các trang web dựa trên CSS chưa? Chúng trông khủng khiếp và thường gây bất lợi cho người mù nếu họ sử dụng các tính năng phóng to trong trình duyệt! Nếu bạn làm điều đó với các bảng, chúng có quy mô tốt hơn nhiều. Khi mọi người nói về khả năng tiếp cận, tôi thấy rằng nhiều người không có đầu mối và điều đó làm tôi khó chịu vì tôi bị khuyết tật và họ thì không. Họ đã thực sự làm việc với người mù? Người điếc? Nếu khả năng tiếp cận là mối quan tâm chính, Tại sao địa ngục 99% video không được chú thích? Nhiều người theo chủ nghĩa CSS sử dụng AJAX nhưng không nhận ra rằng AJAX thường khiến nội dung không thể truy cập được.

Về mặt thực tế, bạn có thể sử dụng một bảng duy nhất làm bố cục chính là DÀI khi bạn cung cấp thông tin theo luồng hợp lý nếu các ô được xếp chồng lên nhau (thứ bạn nhìn thấy trên điện thoại di động). Lý thuyết CSS nghe có vẻ hay nhưng một phần có thể thực hiện được trong cuộc sống thực với quá nhiều hack, một cái gì đó đi ngược lại với lý tưởng của "sự thuần khiết".

Kể từ khi sử dụng CSS với cách tiếp cận bảng, tôi đã tiết kiệm được rất nhiều thời gian để thiết kế trang web và việc bảo trì dễ dàng hơn nhiều. Ít hack hơn, trực quan hơn. Tôi nhận được ít cuộc gọi hơn từ những người nói rằng "Tôi đã chèn một DIV và bây giờ tất cả đều bị hỏng!" Và thậm chí quan trọng hơn, hoàn toàn KHÔNG có vấn đề tiếp cận.

|
  • 1

    Vâng, tôi đã thấy rằng việc mở rộng văn bản lên không được xử lý tốt bởi nhiều trang web dựa trên DIV. Bàn xử lý tốt hơn.

    – Tạ Phúc Khang 14:23:52 10/06/2009
  • 1

    Người mù sử dụng các tính năng phóng to hình ảnh trong trình duyệt? (Những trình duyệt nào có khả năng thu phóng không trực quan?)

    – Phan Xuân Phúc 03:51:17 30/11/2009
  • 1

    @Roger: Mù không phải là boolean; một số người mù có thể nhìn thấy, nhưng không thể tạo ra chi tiết tốt. Rõ ràng, làm cho các chi tiết lớn hơn là hữu ích cho họ, vì vậy họ sử dụng zoom (khi nó không bị phá vỡ khủng khiếp).

    – Dương Mạnh Thắng 21:00:31 16/06/2011
21

Thông thường bất cứ khi nào bạn không sử dụng bảng để cung cấp bố cục.

Bảng -> dữ liệu

Divs -> bố cục

(chủ yếu)

|
  • 1

    Nhưng dữ liệu có thể được hiển thị theo các cách khác ngoài lưới và để làm như vậy, với CSS, bạn có thể làm cho <bảng> trông không giống như lưới. Tuy nhiên, thay vào đó tôi chỉ dự trữ <bảng> cho dữ liệu ở dạng lưới. Mặt khác, tôi sử dụng <div> vì CSS ưa thích trên <bảng> có thể khó sử dụng với khả năng tương thích giữa nhiều trình duyệt.

    – Ngô Hoàng Dung 00:12:43 22/06/2010
20

Lưu ý: Tại thời điểm câu hỏi được hỏi, có những lý do thực tế để sử dụng bảng cho một số mục đích bố trí. Điều này không còn cần thiết nữa do cải tiến trình duyệt, vì vậy tôi đã cập nhật câu trả lời.

HTML <table> nên được sử dụng khi dữ liệu có cấu trúc hai chiều. Nếu dữ liệu có thể được cấu trúc theo hàng và cột và bạn có thể áp dụng các tiêu đề cho cả hàng và cột một cách có ý nghĩa, thì có lẽ bạn có dữ liệu dạng bảng.

Tôi bạn chỉ có một hàng hoặc một cột dữ liệu, thì đó không phải là dữ liệu dạng bảng - nó chỉ là nội dung tuyến tính. Bạn cần ít nhất hai hàng và hai cột trước khi có thể được coi là dữ liệu dạng bảng.

Vài ví dụ:

Sử dụng bảng để đặt thanh bên và đầu trang / chân trang. Đây không phải là dữ liệu dạng bảng mà là bố cục trang. Một cái gì đó như lưới css hoặc flexbox là phù hợp hơn.

Sử dụng bảng cho cột kiểu báo. Đây không phải là dữ liệu dạng bảng - bạn vẫn sẽ đọc nó một cách tuyến tính. Một cái gì đó như cột css là thích hợp hơn.

|
  • 1

    Đây là một trong số rất ít ý kiến ​​thực sự làm cho một điểm tốt, các bảng chính xác là công cụ DUY NHẤT cho bất kỳ quản lý bố cục nào (tương tự như Java AWT / Swing hoặc bất kỳ phần bố cục GUI dựa trên ràng buộc nào khác).

    – Vũ Trí Hùng 02:24:24 03/05/2009
  • 1

    IE hỗ trợ hiển thị: bảng trong 8+. Hiện tại việc sử dụng nó là khá khả thi, đặc biệt là khi bạn có thể bổ sung với các bảng định kiểu có điều kiện nếu IE cũ là một điều cần cân nhắc. quirksmode.org/css/display.html

    – Hoàng Hà Mi 21:54:21 20/04/2011
  • 1

    @StaxMan: Tôi không thể đồng ý nhiều hơn.

    – Lê Đại Tú 07:09:45 16/07/2013
13

Tôi sẽ phân biệt HTML giữa các trang web công cộng (bảng no-no-no, divs yes-yes-yes) và HTML cho các ứng dụng web bán công khai hoặc riêng tư, nơi tôi có xu hướng thích các bảng ngay cả đối với bố cục trang.

Hầu hết các lý do đáng kính tại sao "Bàn là xấu" thường chỉ là vấn đề đối với các trang web công cộng, nhưng không có quá nhiều vấn đề với ứng dụng web. Nếu tôi có thể có cùng bố cục và có giao diện phù hợp hơn trên các trình duyệt bằng cách sử dụng BẢNG so với CSS + DIV phức tạp, thì tôi thường đi trước và phân tích BẢNG.

|
11

Như nhiều áp phích đã đề cập, bạn nên sử dụng bảng để hiển thị dữ liệu dạng bảng.

Các bảng được giới thiệu trong HTML 3.2 ở đây là đoạn có liên quan từ thông số kỹ thuật về cách sử dụng của chúng:

[bảng] có thể được sử dụng để đánh dấu tài liệu dạng bảng hoặc cho mục đích bố trí ...

|
  • 1

    "Hoặc cho mục đích bố trí" - loại hình bán thân mà huyền thoại cho rằng các bảng không bao giờ có ý định bố trí bởi các nhà thiết kế HTML

    – Bùi Thanh Phong 09:33:28 09/03/2010
  • 1

    @Matthew: HTML 3.2 có đầy đủ html hiện tại, như thẻ FONT, thuộc tính BGCOLOR, v.v. thực hành và hầu hết đã bị phản đối một lần nữa trong HTML 4.

    – Trịnh Quốc Dũng 17:39:12 29/05/2011
8

Đồng ý với Thomas - quy tắc chung là nếu nó có ý nghĩa trên bảng tính, bạn có thể sử dụng bảng. Nếu không thì không.

Chỉ không sử dụng bảng làm bố cục cho trang, đó là vấn đề chính mà mọi người gặp phải với chúng.

|
7

Tôi có thể thấy đối số cho các bảng cho các biểu mẫu, nhưng có một cách khác đẹp hơn ... bạn chỉ cần xắn tay áo và học CSS.

ví dụ:

<fieldset>
  <legend>New Blog Post</legend>

  <label for="title">Title:</label>
  <input type="text" name="title" />

  <label for="body">Body:</label>
  <textarea name="body" rows="6" cols="40">
  </textarea>
</fieldset>

Bạn có thể lấy html đó và bố trí biểu mẫu theo nhãn bên cạnh hoặc nhãn trên đầu hộp văn bản (dễ dàng hơn). Có sự linh hoạt thực sự có ích. Nó cũng ít HTML hơn bảng tương đương.

Đối với một số ví dụ tuyệt vời về biểu mẫu CSS, hãy xem các ví dụ tuyệt vời sau:

http://jeffhowden.com/code/css/forms/

http://www.sitepoint.com/article/fancy-form-design-css/

http://www.smashingmagazine.com/2006/11/11/css-basing-forms-modern-solutions/

|
  • 1

    Tôi sẽ đánh dấu câu trả lời này lên hai lần nếu tôi có thể. Liên kết thứ hai có câu trả lời chính xác cho một vấn đề tôi đang gặp phải. Cảm ơn!

    – Đỗ Hoài Thương 01:33:24 23/09/2008
  • 1

    Tôi đã đọc hàng tá bài viết về lý do tại sao CSS tốt hơn bảng và thậm chí các ví dụ về cách thực hiện bố cục. Một nửa thời gian, ví dụ không hoạt động. Và nhiều lần họ không giải quyết các vấn đề đơn giản, như khoảng cách dọc, v.v ... Hãy tin tôi, tôi đã nghiên cứu CSS và đôi khi phương pháp div hoạt động với tôi. Nhưng nhiều lần sau nhiều giờ thất vọng tôi chỉ quay lại một cái bàn và tôi có một giải pháp đơn giản hoạt động với mọi trình duyệt.

    – Hoàng Tuấn Ngọc 16:19:16 18/03/2013
6

Tôi thường sẽ chọn các bảng để hiển thị thông tin loại biểu mẫu (Tên, Họ, Địa chỉ, v.v.) trong đó các nhãn lót và các trường trên nhiều hàng là quan trọng. DIV tôi sử dụng để bố trí.

Tất nhiên cái bàn được bọc trong một DIV :)

|
  • 1

    Tôi hiểu rằng đây là một trong những tình huống mà việc sử dụng bảng không được khuyến khích - nó sẽ lật các trình đọc màn hình cho người mới bắt đầu. Tốt nhất là sử dụng <div> <nhãn for = "firstName"> Tên: </ nhãn> <input id = "firstName" /> </ div>. CSS sau đó có thể được sử dụng để sửa chiều rộng của các thành phần nhãn.

    – Lý Đan Linh 11:49:11 27/11/2008
  • 1

    Nhưng nó thậm chí còn sai hơn khi sửa chiều rộng? Chiều rộng phải là một sản phẩm có kích thước phông chữ, đặc biệt. để tính đến khả năng tiếp cận và sự khác biệt trên phương tiện đầu ra. Và đó là tỷ lệ chiều rộng nhiều hơn (và có lẽ kích thước tối thiểu / tối đa, theo đơn vị phù hợp) cần được xác định, không phải kích thước tuyệt đối.

    – Tạ Tâm Linh 02:21:19 03/05/2009
  • 1

    Và việc sửa chiều rộng thật khó xử khi bạn phải quốc tế hóa một trang web và không biết nhãn sẽ tồn tại trong mỗi ngôn ngữ trong bao lâu. Ít nhất là sử dụng một bảng, nó sẽ (trớ trêu thay) nhiều chất lỏng hơn.

    – Dương Thiếu Anh 08:27:34 12/06/2009
  • 1

    Đây là vấn đề của tôi với bố trí div. Cho đến khi bạn có thể tạo một tập hợp các div tự động chảy như bảng, tôi mới thấy lạ khi giới thiệu div trên các bảng.

    – Đặng Việt Hương 20:51:10 13/11/2009
  • 1

    @Richard, IMO, danh sách tốt hơn một loạt các div. Kết hợp OL / LI đúng hơn về mặt ngữ nghĩa. @Damo, chiều rộng cố định không có nghĩa là chiều cao cố định. Miễn là mỗi hàng có thể mở rộng để chứa văn bản được bao bọc, đó thường không phải là vấn đề. Bạn nghĩ ứng dụng phi web xử lý nhãn trường như thế nào khi dịch?

    – Đặng Thu Huyền 02:52:41 20/05/2010
4

Tôi sử dụng bảng trong hai trường hợp:

1) Dữ liệu dạng bảng

2) Bất cứ lúc nào tôi muốn bố cục của mình tự động kích thước theo nội dung của nó

|
4

Các bảng được thiết kế cho nội dung dạng bảng, không phải để bố trí.

Vì vậy, đừng bao giờ cảm thấy tồi tệ nếu bạn sử dụng chúng để hiển thị dữ liệu.

|
3

Về chủ đề này, tôi nghĩ rằng trang web này là khá buồn cười.

|
3

Nếu dữ liệu của bạn có thể được đặt trong một lưới hai chiều, hãy sử dụng <table>. Nếu không thể, đừng. Sử dụng <table>cho bất cứ điều gì khác là một hack (mặc dù thường không phải là một thay thế phù hợp, đặc biệt là khi nói đến khả năng tương thích với các trình duyệt cũ hơn). Không sử dụng <table> cho một cái gì đó rõ ràng là một là xấu như nhau. <div><span>không cho tất cả mọi thứ; trong thực tế, hoàn toàn vô nghĩa ở cấp độ ngữ nghĩa, chúng phải được tránh bằng mọi giá có lợi cho các lựa chọn thay thế ngữ nghĩa hơn.

|
  • 1

    Chà, bảng cũng không có giá trị ngữ nghĩa rõ ràng, cũng không có nhiều ẩn ý. Nó thuộc về các thẻ cấu trúc, không phải là ngữ nghĩa. Cấp, div và span thậm chí còn trừu tượng hơn, là các phần giữ chỗ ẩn danh / nội tuyến ẩn danh hơn bất kỳ thứ gì khác.

    – Trịnh Đình Khải 02:22:47 03/05/2009
2

Bảng được sử dụng cho dữ liệu bảng. Nếu nó có ý nghĩa để đặt nó trong một bảng tính thì sử dụng một bảng. Nếu không, có một thẻ tốt hơn để bạn sử dụng như div, span, ul, v.v.

|

Câu trả lời của bạn (> 20 ký tự)

Bằng cách click "Đăng trả lời", bạn đồng ý với Điều khoản dịch vụ, Chính sách bảo mật and Chính sách cookie của chúng tôi.

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ hoặc hỏi câu hỏi của bạn.