Bài viết Tại sao không nên dùng thẻ <table> để thiết kế web

Mới đầu học thiết kế website thì thẻ table là sự lựa chọn hàng đầu của mọi người, nhưng khi bắt đầu sự dụng CSS thì thẻ table sẽ là bất lợi cho các designer, không những vậy chúng còn ảnh hưởng không nhỏ đến SEO và tốc độ load của website.
Trên lý thuyết, khi dùng table ta sẽ có một số vấn đề như sau:

• Website sẽ load chậm hơn so với dùng div
• W3C không khuyến khích điều này (đừng nói là không biết W3C là gì nha), do đó nó ảnh hưởng không nhỏ đến SEO và crossbrowser CSS.
• Các máy tìm kiếm của smartphone gần như bó tay với table. (Nghe nói thế thôi)
• Và một số thứ khác.

Các bạn hãy xem layout sau đây.

Bây giờ ta sẽ so sánh cách làm dùng thẻ table (cách làm cũ) và với div (cách làm mới)
Để làm được layout này thì khi dùng với table ta sẽ làm như sau

Mã HTML

HTML:

<table>
        <tr>
            <td>
                <h1>The title</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor dapibus mauris, ut ornare erat blandit a. Cras auctor mattis.</p>
            </td><!-- end td -->
            <td>
                <h1>The title</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor dapibus mauris, ut ornare erat blandit a. Cras auctor mattis.</p>
            </td><!-- end td -->
        </tr><!-- end tr -->
        <tr>
            <td>
                <h1>The title</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor dapibus mauris, ut ornare erat blandit a. Cras auctor mattis.</p>
            </td><!-- end td -->
            <td>
                <h1>The title</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor dapibus mauris, ut ornare erat blandit a. Cras auctor mattis.</p>
            </td><!-- end td -->
        </tr><!-- end tr -->
    </table><!-- end table -->

Mọi người thấy thế nào, riêng mình thấy nó giống như là một mê cung rồi, nếu thiếu một cái thẻ nào thì cũng khó phát hiện.
Code CSS dành cho table

Mã:

body{
    font: normal 12px Arial,sans-serif;
    color: #555;
}
table{
    width: 500px;
    height: 500px;
    margin: 0 auto;
}
table td{
    border: 1px solid #d7d7d7;
    padding: 6px;
}
table h1{
    text-transform: uppercase;
    color: #00bff3;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
}
table p{
    text-align: justify;
}

và kết quả

Chúng ta không thẻ tạo được khoảng cách giữa các thẻ td trong table, nếu muốn được như layout trên thì ta phải thêm thẻ div bao quanh thẻ h1 và thẻ p trong mỗi thẻ td, nhưng cách làm này chỉ làm phức tạp thêm code HTML vốn đã như mê cung rồi.
Còn cách viết bằng thẻ div như thế nào. Sau đây tôi sẽ chỉ ra code:
Mã HTML :

HTML:

<div id="wrapper">
        <div>
            <h1>the title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor dapibus mauris, ut ornare erat blandit a. Cras auctor mattis.</p>
        </div><!-- end div -->
        <div>
            <h1>the title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor dapibus mauris, ut ornare erat blandit a. Cras auctor mattis.</p>
        </div><!-- end div -->
        <div>
            <h1>the title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor dapibus mauris, ut ornare erat blandit a. Cras auctor mattis.</p>
        </div><!-- end div -->
        <div>
            <h1>the title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor dapibus mauris, ut ornare erat blandit a. Cras auctor mattis.</p>
        </div><!-- end div -->
    </div><!-- end #wrapper -->

Nó có phần đơn giản hơn, dễ đặt các comment hơn.
Mã CSS

Mã:

body{
    font: normal 12px Arial,sans-serif;
    color: #000;
}
#wrapper{
    width: 500px;
    height: 500px;
    overflow: hidden;
    margin: 0 auto;
    border: 0 solid #000;
}
#wrapper div{
    float: left;
    width: 40%;
    height: 40%;
    padding: 6px;
    border: 1px solid #d7d7d7;
    margin: 15px;
}
#wrapper div h1{
    color: #00bff3;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
}
#wrapper div p{
    text-align: justify;
    color: #555;
}

Và đây là kết quả

Tuyệt vời, nó đã giống với layer đến 99.9%, 0.1% khác là do font chữ của photoshop khác với Chrome mà thôi.

Bây giờ, nếu ta chuyển trang này từ 2 cột xuống một cột thì sao nhỉ

Nếu làm table thì ta phải 2 thẻ td sau đó tạo ra 2 thẻ tr rồi dán vào mỗi thẻ tr đó một thẻ td, nghĩa là phải thay đổi cấu trúc HTML, điều này không tốt vì trong lập trình, việc này đồng nghĩa với thay đổi đoạn mã chạy website đó thậm chí phải viết lại toàn bộ code.

Còn đối với thẻ div, ta chỉ cần vào css, tìm khối lệnh css quy định style của thẻ div, rồi tìm đến dòng có chữ “width:” rồi thay đổi chiều dài sao cho phù hợp, điều này vừa đơn giản lại vừa không phải can thiệp đến cấu trúc HTML.

Vậy ý kiến của các bạn thế nào, có nên dùng table để thiết kế website không?

Layout thì nên dùng div tốt nhất. Còn dữ liệu dạng bảng thì dùng table cho nhanh. Chậm hơn cũng không có bao nhiêu.

Đúng đó bạn, những dữ liệu nhỏ, dạng bảng thì dùng table là tốt hơn, chứ còn dùng div đối với những dữ liệu này có khi rối hơn dùng table

hay lắm bạn. mình sẻ chuyển qua dung div

Thiết kế web chuẩn HTML hiện nay không còn sử dụng thẻ Table để thiết kế, vì website hiện nay không đi theo lối mòn truyền thống nào cả bạn ạ! Sử dụng div là phương án tối ưu trong thiết kế, giúp website chuyên nghiệp, tương thích với mọi trình duyệt, tốc độ tải trang tốt hơn.
Nói chung lúc học môn thiết kế web. AI DẠY CÁC BẠN LÀM TABLE thì đừng làm theo. Nó ko tốt cho tư duy của bạn tí nào. Đây là kinh nghiệm của mình khi học thiết kế web

@Ezreal chuẩn đến mức vi khuẩn cũng phải gật gù

Bạn có thể dùng thẻ li ul trong div và sử dụng css sẻ tốt hơn