Giữa thẻ table và div, bạn sẽ chọn thẻ nào thiết kế layout cho web?


#1

Việt nhìn vào một giao diện trang web (có thể là file photoshop hoặc trang web bất kỳ), cái đầu tiên quan trọng nhất là thấy bố cục của trang sẽ được chia thành các phần nào. Và nó là cấu trúc table thôi, chứ không có gì ghê gớm, vấn đề Web Designer phải nhìn ra.

Đã là cấu trúc table thì ta dùng hẳn thẻ table luôn chứ tại sao dùng thẻ div chi cho mệt??? Bạn nào có thể giải thích tận tường vụ này cho mình đã thông được không? hii… Xin dành tặng 2p cho câu trả lời nhanh và chính xác nhất nhé.

Have a nice day!


#2

Thẻ table/bảng : là thẻ giúp chúng ta tạo nên một khu vực thuộc dạng bảng tính, kích thước về chiều ngang thường luôn cố định, cấu trức vững chắc nhưng khó tùy biến, khó kết hợp với các thẻ cấu trúc hoặc các thẻ table khác, tốn nhiều dung lượng khi load trang.

Thẻ Div(divison)/Khu vực(phần phân chia) : là thẻ giúp chúng ta tạo nên một khu vực dạng block, kích thước không cố định khi chưa thiết lập thông số, cấu trúc mềm dẻo, dễ dàng tùy biến, dễ dàng kết hợp với các thẻ khác, hơi khó khăn trọng việc định hình với những người chưa quen thuộc, tốn ít dung lượng khi load trang.

Một ví dụ trực quan nhất là nhìn theo nghĩa đen của 2 thẻ : Table là cái bàn, còn Div là cái … tấm gỗ, tất nhiên thì bàn rất dễ sử dụng, vững chắc, nhưng chính thứ đó lại là điểm yếu khi bạn muốn tùy biến, bạn đâu thể nào tháo 2 chân bàn ra để ráp vừa với cái … giường, hay kết hợp nhiều cái bàn để ra một cái tủ đúng không, chưa kể đến việc “sơn màu” hay thay đổi kích thước của cái “bàn” đó, div hay mình ví dụ là tấm gỗ thì khác, thoạt đầu nó có vẻ lỏng lẻo, nhưng khi biết kết hợp, và thêm một số vật liệu, có khi nó lại vững hơn cả bàn ấy chứ, nó lại có thể tùy chỉnh theo ý thích của mình, bạn có thể nối thêm tấm gỗ cho giường dài ra, hay lấy tấm gỗ để đóng tủ, sơn màu cho nó cũng rất ư là đơn giản, điều quan trọng khi sử dụng tấm gỗ là “tay nghề” và “hiểu biết” của bạn, bạn phải hiểu rõ khi nào dùng loại “gỗ” nào, sơn màu nó ra sao, kết hợp với nhau như thế nào. Nhưng khi đã thành thạo, tin mình là bạn sẽ thích nó thôi!


#3

Khi trang web đơn giản, nhỏ gọn, không quá cầu kì về giao diện, ít chức năng thì sử dụng TABLE, sẽ nhanh và dễ thiết kế.

Khi trang web mang tính đa dạng, giao diện phức tạp, nhiều chức năng, thì sử dụng DIV.

TABLE phù hợp với những dự án cá nhân, đồ án front-end của sinh viên.
DIV dành cho những dự án phức tạp hơn của các developer, hoặc đồ án tốt nghiệp bao gồm cả front-end và back-end của sinh viên.

E nghĩ như vậy thôi :slight_smile:


#4

Chào mọi người, thứ nhất tại vì table sử dụng nhiều tag nên load sẽ nặng và chậm hơn, mà web nào mình cũng muốn load nhanh nên sẽ sử dụng thẻ div nhiều; thứ hai là cấu trúc table thì không responesive được mà thời đại ngày nay nhiều người giờ lướt web trên thiết bị di động nhiều nên giờ trang web phải tương thích với cả màn hình desktop lẫn các thiết bị có màn hình nhỏ, điều này rất quan trọng, đó là ý kiến của em. Mong mọi người chỉ giáo thêm ạ


#5

Sang xin chia sẻ một số quan điểm sau:

  1. Việc sử dụng table hay div thì cũng tuỳ thuộc vào nhiều thứ:

    • Mức độ sử dụng của feature như, được dùng nhiều hay ít?, hay là cả năm user mới xài 1 lần.
    • Độ phức tạp của giao diện, ví dụ như animation, tự động thay đổi theo kích thước của viewport
    • Kỹ năng làm giao diện của developers
    • Áp lực thời gian hoàn thành, vì table dễ làm hơn div.
  2. Về tốc độ:

    • Tốc độ tải trang từ server về thì tuỳ vào trường hợp cụ thể, có thể div ít mã nguồn, nhưng lại có nhiều mã CSS để trang trí.
    • Tốc độ render, tức là các bước tạo DOM, Layout, Painting thì div hơn hẳn table về tốc độ (Khoá học JavaScript DOM nói về các quá trình này). Vì table phải tự tính toán kích thước các ô sao cho phù hợp với nội dung bên trong, còn div thì không tự tính như vậy.
  3. UX

    • Vì table khi tải xong sẽ tự tính, nên quá trình các nội dung chưa tải về thì giao diện sẽ hiển thị khác (ví dụ như dùng Ajax tải nội dung chẳng hạn) còn khi nội dung tải về và được hiển thị, giao diện lại “nhảy nhảy” khác, làm cho user khó chịu. Div khắc phục được cái này, chỉ cần style để div có hình dạng, sau khi dữ liệu đổ về, thì nó chỉ đổ vào chỗ developer quy định.

Xu hướng hiện nay đang là “Loading Skeleton” tức là tạo một cái khung, đẩy dữ liệu rỗng, chờ tải xong, sẽ đẩy dữ liệu thật vào.

Đây là ví dụ của LinkedIn:

Bạn thấy các khung bố trí đẹp chứ? nó sẽ nằm yên đó, chờ tải dữ liệu bằng Ajax về, sẽ nạp vào các vùng xám. Giao diện không hề nhảy múa.

Sao ta có thể dùng table ở trường hợp này được nhỉ? :smiley: Sang sẽ không thể làm được giao diện như vậy bằng Table. Phèo…

Hy vọng giúp ích cho các bạn.


#6

Wow, cảm ơn anh Sang đã chia sẻ những thông tin bổ ích như thế này :heart_eyes:


#7

Cảm ơn Mentor Sang đã làm quá rõ vấn đề này, rất nhiều thứ khi muốn đào sâu là phải có am hiểu và trải nghiệm phải không? Đăng rất vui vì chúng ta không ngại đào sâu một vấn đề nào. Và CiOne luôn hướng tới việc như vậy.

Chân thành cảm ơn 3 bạn ltv.thienchi, nari_siri và giahao nhé. Để khích lệ, các bạn được CiOne tặng 2p nhé. Cứ tiếp tục nhiệt huyết để nhận lãnh các kiến thức giá trị nhé. :wink:

Thân


#8

Hay quá bạn Sang, đọc phần giải thích của b có cảm giác như đọc explain của các bác dev Tây vậy . hihi thank yo.