Tại sao chúng ta không nên sử dụng <bảng> trong thiết kế?

Một số lý do rõ ràng và hợp lý cho lý do tại sao chúng ta không nên thiết kế trang web với các bảng? Đâu là lợi ích, điều gì đã thúc đẩy ý tưởng này trong ngành? Khi nào thì dùng được bàn?

1) Bảng không nên được sử dụng cho bố cục trang vì chúng là:

• Chậm kết xuất vì trình duyệt cần tải xuống nhiều nhất - nếu không phải tất cả - của bảng để hiển thị đúng

• Chúng yêu cầu nhiều HTML hơn so với bố cục không có bảng, có nghĩa là tải và kết xuất chậm hơn, cũng như việc sử dụng băng thông tăng lên

• Chúng có thể là một cơn ác mộng để duy trì vì chúng có thể nhanh chóng trở nên phức tạp

• Họ có thể phá vỡ sao chép văn bản

• Chúng ảnh hưởng tiêu cực đến trình đọc màn hình và có thể khiến một số người dùng không thể truy cập nội dung của bạn

• Chúng không linh hoạt như sử dụng đánh dấu ngữ nghĩa thích hợp

• Chúng không bao giờ có ý định được sử dụng cho bố cục trang

• Làm cho các bảng thành một bố cục đáp ứng là rất khó kiểm soát

2) Sử dụng bảng cho dữ liệu dạng bảng. Đó là những gì bảng dành cho.

Xem thêm: Tại sao mọi người tạo bảng với div?

Bảng dành cho dữ liệu dạng bảng, không phải thiết kế. Mọi người thường hiểu sai động lực đằng sau việc tạo ra các trang "không cần thẻ".

Thật sai lầm khi sử dụng các bảng để tạo bố cục của bạn. Bạn nên sử dụng các yếu tố khác để bố trí (div, danh sách, phần, bài viết, tiêu đề, chân trang, phụ, v.v.). Và bạn có thể đạt được các hiệu ứng tuyệt vời với HTML / CSS tối thiểu (để lại mã của bạn có ý nghĩa về mặt ngữ nghĩa, nhẹ và dễ bảo trì).

Tất nhiên, dữ liệu dạng bảng phải nằm trong phần tử bảng. Nếu bạn muốn, bạn có thể cải thiện ngay cả ngữ nghĩa của các bảng bằng cách thêm thead, t feet, tbody, th, chú thích, v.v ... Tất cả những yếu tố này được dự định sẽ được sử dụng với các bảng và tin tôi, chúng có thể làm cho bảng của bạn tự mô tả hơn nhiều .

Vì vậy, điều là, không đi với thiết kế dựa trên bảng và sử dụng bất kỳ giải pháp HTML / CSS nào phù hợp. Bắt đầu từ đánh dấu ngữ nghĩa HTML, sau đó xây dựng thiết kế bằng CSS. Điều này sẽ giữ bất cứ ai an toàn. Sử dụng điều này như là một quy tắc của ngón tay cái.

Các bảng được cho là chứa dữ liệu, và không phải là các yếu tố thiết kế.

Bảng chỉ nên được sử dụng khi hiển thị dữ liệu dạng bảng. Nếu không, chúng thường là một lựa chọn kém để hiển thị.

Nguyên nhân thực sự để không sử dụng bảng là:

Bố cục mặc định của bảng là: table-layout:fixed

Điều này cho trình duyệt phân tích bảng và sửa các ô để chứa các phần tử bên trong chúng, việc này sẽ mất một thời gian. (đây là lý do tại sao các bảng rất tốt cho dữ liệu phức tạp)

Dòng dưới cùng: bảng sẽ hiển thị sau khi tất cả nội dung bên trong nó được hiển thị, trái ngược với khi sử dụng các phần tử DIV ví dụ.

Tôi sử dụng các bảng cho cấu trúc thiết kế web trong chất lỏng trộn với cố định và tôi biết nhiều bảng nói là dành cho những người khác nói rằng chúng dành cho những người học cũ, những người luôn nói rằng DIVS là tốt nhất nhưng sự thật là các bảng tốt hơn cho một số thứ và DIVS cho điều khác.

Điều gì tốt hơn a <br>hay a <p></p>? Giống nhau cả thôi

Tôi và các bảng cũ trong thiết kế web mới 2015 của tôi có thể đá với bất kỳ ai có chiều rộng 100% di động thân thiện của tôi được trộn với 2 cột bên 200 pixel mỗi cột.

Rõ ràng bên trong các bảng là xấu khi đặt ngày càng nhiều bảng, đó là nơi DIVS có ích. Bảng có thể làm những điều mà div không thể và div có thể làm những điều mà bảng không thể.

Những người nói bố trí bảng mặc định là cố định? Tôi cho bạn một ví dụ

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>

Bạn có thấy tiềm năng bây giờ không? Hãy xem nó trên PC và điện thoại di động. À vâng và tôi thậm chí không cần bootstrap.

Bây giờ để làm điều tương tự với div, bạn phải viết rất nhiều mã CSS để hiển thị căn chỉnh float và crap. Ai viết ít mã? Tôi! Khách hàng cần gì? Một chàng trai kết thúc một trang trong 1 năm hoặc trong 1 tháng?

Bây giờ hãy cải thiện thiết kế với div

<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>
<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>

Thật đẹp, bố trí thiết kế 5 cột bằng cách sử dụng div và bảng.

Câu trả lời của bạn là: cả hai cùng hoạt động tốt hơn và nhanh hơn và nó sẽ trông tốt trên mọi thiết kế ngay cả trên TV và điện thoại di động nhỏ.