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ả
![[IMG]](https://lh3.googleusercontent.com/-KmJzIvVEegc/UjHh68KimhI/AAAAAAAAUrM/l2PqVJbuQCs/NhaSinhvien.net-table.png)
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?