Trong bài viết này, chúng ta sẽ tìm hiểu lý do tại sao nên tránh sử dụng bảng để bố trí trong HTML. Một trang web có thể được chia thành nhiều phần khác nhau bao gồm tiêu đề, menu, nội dung và chân trang, dựa trên đó có nhiều thiết kế bố cục khác nhau có sẵn cho các nhà phát triển. Có thể tạo các bố cục khác nhau bằng cách sử dụng thẻ div HTML và thuộc tính CSS để tạo kiểu cho chúng. Bảng được sử dụng để lưu trữ hoặc xem dữ liệu ở dạng bảng.
Khi bạn xem trang web này thì bạn sẽ biết rằng trong trang web hiện tại này có một số tab hoặc thẻ khác nhau đang hiển thị thông tin khác nhau. Khi bạn nhìn vào bảng thì bạn có thể quan sát thấy rằng có các ô có cùng kích thước. Một trang web có bố cục cùng kích thước sẽ trông không đẹp bằng bố cục dạng lưới.
Những lý do tránh sử dụng bảng để bố trí trong HTML được liệt kê bên dưới
- Bảng không truy cập được. Hầu hết các công cụ tìm kiếm đọc trang web khi chúng đọc HTML và công cụ tìm kiếm khó hiển thị bố cục bảng. Đây là lý do chính tại sao chúng tôi theo định dạng HTML5
- Bàn là Tricky. Khi bạn thực hiện việc lồng trong các bảng thì rất khó để duy trì nó. Khi bạn muốn thay đổi một cái gì đó sau một vài ngày thì việc gỡ lỗi mã sẽ trở nên phức tạp đối với nhà phát triển
- Bàn không linh hoạt. Khi bạn muốn tạo bố cục bảng với chiều rộng được chỉ định thì nó sẽ trở thành bố cục cứng nhắc hoặc không linh hoạt và sau đó sẽ mất thêm thời gian để tải trang của bạn đúng cách. Bố cục linh hoạt luôn trông đẹp mắt trên mọi thiết bị
- Bảng làm tổn thương Công cụ Tìm kiếm Tối ưu hóa. Nhiều nhà phát triển tạo điều hướng ở bên trái và phần còn lại của nội dung ở bên phải. Nếu bạn sử dụng các bảng, công cụ tìm kiếm sẽ tải nội dung trước sau đó điều hướng sẽ bắt đầu tải mà không có điều hướng, nội dung sẽ trông không đẹp lắm
- Bảng không phải lúc nào cũng in tốt. Khi bạn cố in bố cục bảng, máy in sẽ thay đổi giao diện do bố cục bảng quá rộng. Sau đó, máy in sẽ cố gắng cắt bớt một số nội dung hoặc hiển thị nội dung bổ sung cho trang tiếp theo, điều này sẽ khiến nó trở nên phức tạp
- Các bảng cho bố cục không hợp lệ trong HTML 4. 01. Bạn không thể tạo bố cục bảng khi sử dụng HTML 4. 01 vì bạn chỉ được phép tạo một bảng đơn giản. Ví dụ: bảng tính hoặc cơ sở dữ liệu. Một lý do khác là các trình duyệt khác thấy khó hiển thị thông qua bố cục bảng
Bố cục bình thường.
Bố cục bảng
Như bạn có thể nhận thấy từ sơ đồ trên, phần tử bảng không phù hợp để tạo bố cục. Bạn có thể sử dụng cách bố trí bảng để tạo biểu mẫu. Bảng trong HTML được sử dụng để trình bày dữ liệu dạng bảng. Chúng tôi không hiển thị dữ liệu trên một thiết bị, có nhiều thiết bị khác có độ phân giải khác nhau và dữ liệu dạng bảng sẽ không đẹp trên một nền tảng nhỏ
ví dụ 1. Trong đoạn mã dưới đây, chúng tôi sẽ sử dụng cách bố trí bảng
HTML