Nên dùng tag Div hay Table trong thiết kế website?

[tuanngocpt]

khi mình dàn trang thì nên dùng thẻ Div nhưng khi mà giả sủ cần tạo một bố cục nhỏ gần giống table thì nên dùng Div hay nên dùng table.
có thể thay thế hoàn toàn table bằng thẻ Div không

[Xcross87]

khi mình dàn trang thì nên dùng thẻ Div nhưng khi mà giả sủ cần tạo một bố cục nhỏ gần giống table thì nên dùng Div hay nên dùng table.
có thể thay thế hoàn toàn table bằng thẻ Div không

<div> là TAG chuyện dùng để đánh dấu định dạng style và phân nhóm thôi bạn.
<table> là cách chia không gian hiển thị thông tin.
=> <div> và <table> mang ý nghĩa khác nhau, không cũng làm một việc nên không thể so sánh; và dĩ nhiên là nó khác nhau rồi.

Bạn dùng <div> hay <table> gì cũng thế cả, nhét vào cái 'class' cúa CSS là nó sẽ ok thôi.

[ledongthuc]

Không có vụ Div hay Table cũng như nhau đâu
Nếu tìm hiểu kỹ tí thì sẽ biết dc là mô hình DOM khi load table rất là cực, đó là 1 phần làm chậm tốc độ xử lý của trình duyệt (khi load table vào DOM hoặc xử lý DOM trong javascript). Ngoài ra, việc sử dụng kỹ thuật without table sẽ giúp việc định dạng dành hoàn toàn dành cho css => bảo dưỡng, chỉnh sửa sẽ tốt hơn. Thêm vào đó, khi sử dụng kỹ thuật đó, css sẽ được tải về 1 lần và lưu trên cache và ko cần load lại, trong khi sử dụng kỹ thuật table desgin, mỗi lần load trang sẽ load lại đoạn table đó sẽ dài hơn so với việc load div.

Thường thì chỉ nên sử dụng table khi muốn hiển thị dữ liệu dưới dạng bảng thôi (những trang như thống kê, lữ liệu cần show dạng bảng ), chứ đừng thiết kế, design chia layout bằng table

[mrfour.it]

Thức trong "thi thức" có khác. Một trang web hoàn toàn ko dùng 1 cái tag Table nào bạn à. Div dùng linh hoạt hơn nhiều. Khi dùng Div thì trang web sẽ load nhanh hơn rất nhiều. Nguyên nhân là, Div đọc tới đâu thì hiển thị tới đó, còn table à=>chờ tới khi xong mới thấy.hehe

[zstar]

- ko có chuyện div load nhanh hơn table
- div có cơ chế load đến đâu ,hiển thị đến đó. còn table load xong hết mới hiển thị => người ta có cảm giác div load nhanh hơn.nhưng thực sự ko phải thế !
- table thì dễ định dạng bảng hơn, dùng div mà định dạng bảng thì vỡ mồm (nhiều lúc fix cả buổi chẳng xong !)

tùy vào mục đích mà sử dụng thôi. ai có nhiều kinh nghiệm thì nên dùng div

[ledongthuc]

Sao mạnh miệng nói "không có chuyện div load nhanh hơn table" hay thế

Tính về load trên đường truền mạng nhá , VD muốn định dạng 1 layout lồng nhé :

Table (97 characters không tính khoảng trắng) :

         <table>                <tr>                       <td>                              <table>                                      <tr>                                            <td>                                                    Cot 1                                            </td>                                            <td>                                                    Cot 2                                            </td>                                      </tr>                              </table>                       </td>                       <td>                              Cot 3                       </td>                </tr>         </table>

Without Table (ko tính khoảng trắng thì là 57 characters)

         <div>               <div>                       Cot 1               </div>               <div>                       Cot 2               </div>         </div>         <div>               Cot 3         </div>

file css đính kèm :

div {      float:left}

Như đã nói là file css đính kèm còn dc hỗ trợ việc lưu cache nên chỉ load lần đầu tiên. Nhìn là đủ thấy size của file html sẽ dc giảm đáng kể rồi đấy. Thêm vào đó source code nhìn sẽ thoáng hơn, thuận tiện cho việc bảo trì hoặc nhìn lại. Trong quá trình code, việc bạn repeat lại 1 đoạn là rất thường xuyên, dẫn tới source code html nặng nề => trình duyệt load file html chậm hơn. Chính những thứ nhỏ nhặt này làm tăng tốc độ của website.

Ngoài chuyện dữ liệu trung chuyển giữa sever và client có sự khác nhau ra, thì việc load table vào bộ nhớ của DOM trong javascript cũng có sự chên lệch đáng kể. Cũng là ví dụ trên, nếu load các node table vào DOM thì nó sẽ như sau :

Table
   | _  _  THEAD
   |
   | _  _  TBODY
                |  _  _ TR
                           |  _  TD
                           |       | _ Table
                           |               | _  _ THEAD
                           |               |
                           |               | _  _ TBODY
                           |                            | _  _ TR
                           |                                      | _ _ TD
                           |                                      |        |_ "Cot 1"
                           |                                      |
                           |                                      | _ _  TD
                           |                                               |_ "Cot 2"              
                           |  _   TD
                                     | _ "Cot 3"

Trong khi đó khi load DIV vào DOM, bộ nhớ lưu trữ chĩ có như vầy :

         DIV
           | _ _ DIV
                    | _ _ "Cot 1"
                    |
                    | _ _ "Cot 2"
           DIV
            | _  _  "Cot 3"

Bạn thấy những cái này quá là lý thuyết đúng ko, bạn thử viết slide hình hoặc hiệu ứng 3d đi rồi sẽ biết, khi mà 1 khối lượng lớn dữ liệu dc load vào DOM, việc bạn truy suất vào nó sẽ tốn thời gian như thế nào.

Như vậy là đủ thấy sẽ có chuyện load Div nhanh hơn Table rồi đấy (load theo nghĩa từ server xuống client lẫn từ text/pain vào bộ nhớ của trình duyệt). Mà cái việc quan trọng hơn tại sao ng` ta có xu hướng chuyển sang xài tableless là do tính dễ nâng cấp. Bạn cứ thử nghĩ lúc 1,2h đêm, khách bảo có critical bugs, và bạn bật file html lên table lồng loạn xạ nhau, lúc đó thì có nước đập đàu vào màn hình mà chết (đặc biệt, nếu ai đã có từng trong tình huống này sẽ rất dễ lộn td của table con với td của table cha ). Khi bạn sử dụng div, bạn tách biệt việc format ra file css, như thế bạn làm code html của bạn trong sáng hơn , ko có mớ lằng nhằng width với height hay align gì ở trong đống div của bạn.

Còn việc bạn bảo table định dạng dễ hơn thì cũng đúng dành cho ng` không có trình độ thôi. Quả thật là sinh viên ra trường chưa chắc đã thạo tableless. Sẽ tốn công 1 chút nhưng rất tốt cho sau này phải đọc lại. Không ai dám chắc là dăm ba ngày sau là ko có change request.

Nhưng nói nãy giờ không có nghĩa là ko xài table... Thằng nào như vậy thì còn ngu hơn những thằng tối ngày xài table ) Cần thì cứ xài (hoặc làm biến thì xài). Thường tabless chỉ sử dụng để thiết kế layout, chia cột cho website. Khi vào tới nội dung trong, cần show thông tin dạng bảng (vd bảng báo giá, thống kê theo cột, ...) mà xài tableless thì thằng đó ngu hết chỗ nói.

Như bạn Zstar nói. Tùy mục đính thì sử dụng.
Ở đây chỉ muốn làm rõ việc Table và Div không như nhau. mắc công 1 số member đọc vào tưởng 2 cái đều như nhau thì mệt

[VoTichSu]

.....
Còn việc bạn bảo table định dạng dễ hơn thì cũng đúng dành cho ng` không có trình độ thôi. Quả thật là sinh viên ra trường chưa chắc đã thạo tableless. Sẽ tốn công 1 chút nhưng rất tốt cho sau này phải đọc lại. Không ai dám chắc là dăm ba ngày sau là ko có change request.
....

Sau này phải đọc lại?
Chính vì cần để cho dễ hiểu mà phải theo nguyên tắc "cái gì có dạng table thì dùng table, không nên bày vẽ dùng div"
Change request: Mỗi lần phải chỉnh sửa một trang web của mấy tay khoe tài kiểu cọ là cái thằng LTV làm việc với tôi lại ch*i thề.

[nguyendinhchinh]

nếu bạn đã làm quen với HTML rồi thì theo mình thì bạn nên dùng DIV vì dùng cái đó thì bạn sẽ SEO WEB tốt hơn là dùng Table.với lại bạn dùng DIV thì khi nhúng CSS vào cũng sẽ rễ ràng và ngắn gọn hơn là nhúng vào Table.

[VoTichSu]

Nếu bạn tự làm và tự bảo trì lấy application của mình thì tùy thích. Cái nào cảm thấy hay hơn thì dùng.

Nếu bạn làm chung với người khác, hoặc chỉ khai triển rồi để cho người khác bảo trì thì nên theo nguyên tắc. Bởi vì những vấn đề "trình độ, chạy nhanh, vv..." là các quan niệm chủ quan. Có thể trông rõ ràng dễ chỉnh sửa với bạn nhưng thực ra rất khó hiểu đối với người khác.

tb. LTV "trình độ" khác với LTV "chuyên nghiệp"
trình độ: code rất nhanh và chính xác
chuyên nghiệp: code nhanh vừa phải, rất rõ ràng và dễ theo dõi.

[ledongthuc]

Tại bạn vẫn giữ cái tâm lý tốt cho bản thân, tiện cho mình thôi
Nếu chịu nghĩ cho khách hàng 1 tí, web load nhanh hơn 1 tí, javascript sẽ chạy lẹ hơn 1 tí thì có thể bạn sẽ nghĩ lại

Chuyện ở đây không phải là chuyên nghiệp hay ko chyên nghiệp. Cái chính là phải vì khách hàng, sản phẩm mình làm ra, thà là mình không biết cách tối ưu nó thì đã đành, đằng này mình biết cách tối ưu nó mà không làm, lương tâm nghề nghiệp để đâu. Khỏe thì khỏe cho mình thật đấy, đỡ phải bik về tabless, nhưng chính mình tự làm hư bản thân mình, làm sản phẩm mình không đạt được chất lượng có thể đạt được, bức rứt lắm

Hồi xưa mình cũng đâu có design tableless dc đâu. Nhưng cái nghiệp LTV hay ở 1 chỗ, luôn luôn thay đổi. Ngày đi làm về mệt, nhưng cũng ráng dành 1,2 tiếng ra ngồi đọc 1 cái gì đó (về công nghệ, về 1 cái chuẩn gì đó hoặc 1 cái gì mình thấy hứng thú, nhiều khi đọc cả Style Programming nữa). Biết thêm dc cái mới. Hiện tại mình đã đi làm, lương ổn định, bồ bịch có luôn, nhưng ko phải vì vậy mà an nhàn được.
Càng làm ngành này, mình cang mong muốn những gì mình sẽ làm ngày mai, ít nhất phải tốt hơn hôm nay. 1 ít thôi cũng được. Từng bược tự hoàn thiện bản thân

Dù sao mình chỉ muốn phân biệt là xài table với div khác nhau trong cách sử dụng thôi. Còn xài thì tùy mỗi người. 5 người mười tính, mỗi người có cách nhìn nhận vấn đề khác nhau. Không ép ai viết kiểu nào cả.

p/s: Bạn nói sao chứ khi bạn chia layout mà bằng table, nó rối hơn ấy chứ, tại sẽ tốn nhiều tag hơn, tab vào nhiều hơn nên khó coi hơn. Xài table khi chia layout web dễ lẫn lộn hơn khi xài Div, với lại đặc biệt 1 chuyện là css dùng cho table ở mỗi trình duyệt nó khác nhau (nhất là vụ padding vs spacing). Còn việc người khác xài tableless mà bạn đọc không hiểu thì thường cách giải quyết như sau, cty sẽ có 1 cái chuẩn nhất định về cách code hoặc cách thiết kế, theo chuẩn mà làm, 1 là bạn phải update thêm kỹ thuật, 2 là mọi người phải sử dụng desgin table cho bạn hiểu. Cái đấy thường công ty nó có luật hết rồi, nên cũng chả sao đâu. Nếu chưa có thì nên đề nghị với quản lý hoặc cao hơn để thống nhất 1 cái chuẩn, như vậy tốt cho công ty cũng như cho cả lập trình viên luôn