CSS - Bố cục
Hy vọng bạn rất hài lòng với các bảng HTML và bạn có hiệu quả trong việc thiết kế bố cục trang bằng cách sử dụng Bảng HTML. Nhưng bạn biết đấy CSS cũng cung cấp nhiều điều khiển để định vị các phần tử trong tài liệu. Vì CSS là làn sóng của tương lai, tại sao bạn không học và sử dụng CSS thay vì các bảng cho mục đích dàn trang?
Danh sách sau đây thu thập một số ưu và nhược điểm của cả hai công nghệ:
Hầu hết các trình duyệt hỗ trợ bảng, trong khi hỗ trợ CSS đang dần được áp dụng.
Các bảng dễ dung thứ hơn khi kích thước cửa sổ trình duyệt thay đổi - biến đổi nội dung và gói của chúng để phù hợp với các thay đổi. Định vị CSS có xu hướng chính xác và khá linh hoạt.
Các bảng dễ học và thao tác hơn nhiều so với các quy tắc CSS.
Nhưng mỗi đối số này có thể bị đảo ngược -
CSS đóng vai trò quan trọng trong tương lai của tài liệu Web và sẽ được hầu hết các trình duyệt hỗ trợ.
CSS chính xác hơn các bảng, cho phép tài liệu của bạn được xem như bạn dự định, bất kể cửa sổ trình duyệt.
Theo dõi các bảng lồng nhau có thể là một nỗi đau thực sự. Các quy tắc CSS có xu hướng được tổ chức tốt, dễ đọc và dễ thay đổi.
Cuối cùng, chúng tôi khuyên bạn nên sử dụng bất kỳ công nghệ nào phù hợp với bạn và sử dụng những gì bạn biết hoặc những gì trình bày tài liệu của bạn một cách tốt nhất.
CSS cũng cung cấp thuộc tính bố cục bảng để làm cho bảng của bạn tải nhanh hơn nhiều. Sau đây là một ví dụ -
<table style = "table-layout:fixed;width:600px;">
<tr height = "30">
<td width = "150">CSS table layout cell 1</td>
<td width = "200">CSS table layout cell 2</td>
<td width = "250">CSS table layout cell 3</td>
</tr>
</table>Bạn sẽ nhận thấy những lợi ích nhiều hơn trên các bảng lớn. Với HTML truyền thống, trình duyệt phải tính toán từng ô trước khi hiển thị bảng. Tuy nhiên, khi bạn đặt thuật toán bố cục bảng thành cố định , nó chỉ cần xem hàng đầu tiên trước khi hiển thị toàn bộ bảng. Nó có nghĩa là bảng của bạn sẽ cần có chiều rộng cột và chiều cao hàng cố định.
Bố cục cột mẫu
Dưới đây là các bước để tạo một Bố cục Cột đơn giản bằng CSS -
Đặt lề và phần đệm của tài liệu hoàn chỉnh như sau:
<style style = "text/css">
<!--
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
-->
</style>Bây giờ, chúng tôi sẽ xác định một cột có màu vàng và sau đó, chúng tôi sẽ đính kèm quy tắc này vào <div> -
<style style = "text/css">
<!--
#level0 {
background:#FC0;
}
-->
</style>Cho đến thời điểm này, chúng ta sẽ có một tài liệu với nội dung màu vàng, vì vậy bây giờ chúng ta hãy xác định một bộ phận khác bên trong cấp0 -
<style style = "text/css">
<!--
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
-->
</style>Bây giờ, chúng ta sẽ lồng thêm một bộ phận nữa vào bên trong level1 và chúng ta sẽ chỉ thay đổi màu nền -
<style style = "text/css">
<!--
#level2 {
background:#FFF3AC;
}
-->
</style>Cuối cùng, chúng ta sẽ sử dụng cùng một kỹ thuật, lồng một bộ phận cấp 3 vào bên trong cấp độ2 để có được bố cục trực quan cho cột bên phải -
<style style = "text/css">
<!--
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {
background:#CCC;
}
-->
</style>Hoàn thành mã nguồn như sau:
<style style = "text/css">
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
#level0 {background:#FC0;}
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
#level2 {background:#FFF3AC;}
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {background:#CCC;}
</style>
<body>
<div id = "level0">
<div id = "level1">
<div id = "level2">
<div id = "level3">
<div id = "main">
Final Content goes here...
</div>
</div>
</div>
</div>
</div>
</body>Tương tự, bạn có thể thêm thanh điều hướng trên cùng hoặc thanh quảng cáo ở đầu trang.
Nó sẽ tạo ra kết quả sau: