So sánh cấu trúc DIV vs cấu trúc TABLE

Trong suốt vài năm vừa qua , lập trình viên đã chuyển đổi từ kết cấu website dựa trên table sang kết cấu website dựa trên div. Đây là 1 thay đổi lớn nhưng cần phải xem lại ! Liệu lập trình viên có biết lý do của sự chuyển đổi này và họ có biết phải làm như thế nào? Đa số lập trình viên tránh xa sự rắc rối của table-based để rồi tiếp tục gặp rắc rối với div-based

Table vs DIV

Bài viết này sẽ tổng kết các vấn đề hay gặp với kết cấu layout trong thiết kế web:

Table Hell

Bạn đang gặp rắc rối với table và website của bạn sử dụng table để thiết kế. Table nói 1 cách tổng quát sẽ tăng sự rắc rối của văn bản và làm nó khó khăn khi bảo dưỡng. Đồng thời, nó cũng giảm tính linh hoạt của website trong điều chỉnh các media và thiết kế các thành phần trang web, và nó giới hạn chức năng website.

MAMA (chương trình phân tích & khai thác đa dữ liệu) là 1 phương tiện tìm kiếm dựa trên web của Opera Software, nó dò trang web và trả về kết quả là cấu trúc chi tiết của trang web. Nếu chúng ta nhìn vào các khóa tìm kiếm của MAMA, chúng ta sẽ thấy trung bình 1 trang web có cấu trúc table 3 tầng lồng vào nhau.Trong danh sách 10 thẻ thông dụng nhất luôn có 3 thẻ table , td , tr. Thành phần table được tìm thấy trên 80% trang mà URL được dò bởi MAMA. Các nhà ngôn ngữ nói rằng , thẻ table có nghĩa là liệt kê dữ liệu thành bảng. Không phải dùng để xây dựng cấu trúc

Cách sử dụng

Sử dụng table để xây dựng cấu trúc web là thuần vào trực giác. Chúng ta nhìn thấy dữ liệu kiểu table mỗi ngày, khái niệm dễ hiểu và sự tồn tại của các thành phần table làm cho các kỹ năng của lập trình viên mòn đi, bởi vì lập trình viên không buộc phải sử dụng các trang soạn thảo riêng biệt. Với div, lập trình viên phải sử dụng các thành phần mới hoặc sử dụng trang soạn thảo mới , vì không thể gắn các thành phẩn vào thẻ div.

Đồng thời, table không bị phá vỡ khi nội dung quá rộng. Cột không bị ép bởi 1 cột khác khi dùng cấu trúc div. Sự bổ sung này làm cảm giác sử dụng table rất an toàn.

Bảo dưỡng

Table bao gồm nhìu thẻ khác nhau : thẻ table là thẻ bao ngoài , tr cho mỗi hàng và td cho mỗi cột.Thẻ thread và tbody không được dùng cho mục đích cấu trúc vì nó thêm nghĩa vào nội dung. Để dễ đọc , mỗi thẻ thường có 1 dòng riêng và được viết cách vào. Với tất cả thẻ cho table,vài dòng code được thêm vào nội dung. Thẻ colspan và rowspan làm đoạn code rắc rối hơn, và lập trình viên bảo dưỡng trang web trong tương lại phải đọc rất nhiều dòng dư thừa để hiểu nội dung đoạn code

Như chúng ta đã thấy trong ví dụ, layout dựa trên table gồm nhiều code hơn dùng div. Hãy tưởng tượng sự khác biệt về kích thước này khi code dài ra (tỉ lệ gần như là 2:1). Trong cấu trúc dựa trên div, ta có thể bỏ qua phần liệt kê div và sử dụng 1 danh sách không cần phải sắp xếp. Table được lồng vào nhau sẽ dẫn tới sự sai sót về lập trình làm cho 1 website gặp rắc rối trong khâu viết table. Số lượng dòng code dường như không kết thúc và nhiều rắc rối. Table không thể có sự rõ ràng khi lập trình và đừng nên mang thứ gì rắc rối vào nội dung trừ khi bạn đối mặt với 1 dữ liệu kiểu table thật sự. Và nếu bạn được giao lại trách nhiệm duy trì trang web với lập trình khó đọc , không còn gì khổ hơn. Table lồng vào nhau là sự thay thế rất dở khi muốn code dễ đọc và các thành phần rõ ràng.

Một hạn chế khác của table là nó làm chúng ta khó diễn đạt nội dung từ thiết kế. Thẻ border, width, cellpadding và cellspacing được sử dụng trong 90% trang web sử dụng tables (dựa vào MAMA). Nó thêm code vào HTML thay vì trên trang soạn thảo.

Lượng code dư thừa sẽ làm chậm website và tăng chi phí bảo trì. Có 1 giới hạn về dòng mà 1 lập trình viên có thế viết mỗi h, và code dư thừa sẽ làm những người khác khó hiểu.Thậm chí người viết sẽ ko thể hiểu khi đọc lại sau 1 thời gian.

Mỗi dòng code thêm vào tăng kích thước của website, đồng nghĩa với thời gian download lâu hơn. Lập trình viên phải ghi nhớ là 1 phương tiện mới, chẳng hạn 1 thiết bị di động, thường có băng thông thấp. Trang web phải giúp đỡ phương tiên nhiều hơn các máy tính trong tương lai, và lập trình dở sẽ giới hạn khả năng đó. Code nhiều hơn sẽ gây nhiều lỗi hơn, lập trình viên phải bảo đảm lượng lỗi mỗi dòng. Do table tăng độ dài code, cấu trúc table nhiều lỗi hơn so với cấu trúc ít dòng code hơn.

Trang web với thẻ mô tả nội dung được nhận dạng dễ dàng.Tắt trang soạn thảo trên craigslist sẽ cho ta thấy hiển thị dựa trên table. Đầu dòng sẽ được đánh dấu bởi thẻ in đậm và tất cả link sẽ dễ dàng được đặt trong từng danh sách riêng.

Sự linh hoạt của phương tiện

Trong thế giới tiêu chuẩn, sự đồng bộ sẽ được sử dụng cho máy in, thiết bị di động, màn hình và các phương tiện khác. Sử dụng table cho cấu trúc sẽ làm giảm sự linh hoạt khi di chuyển cột và ẩn cột. Người dùng muốn đặt cột hông vào giữa hoặc coi phiên bản thân thiện. Với table , nó sẽ cần trang riêng biệt cho mỗi phương tiện, đồng nghĩa với chi phí bổ sung trong quá trình lập trình và tăng giá thành bảo dưỡng so với trang web dựa vào div.

Theo stoneheadstudio.com