Layout nghĩa là bố trí, bố cục.
Việc bố trí nội dung cho một trang web là rất quan trọng. Nội dung thường được hiển thị trong nhiều cột và để làm việc đó chúng ta dùng <table> hoặc <div>
1. HTML layout dùng <table>
Việc sử dung <table> để phân chia bố cục thường không được sử dụng
Ví dụ:
2. HTML layout dùng <div>
Hầu như các trang web hiện nay đều sử dụng thẻ <div> để thiết kế bố cục
Ví dụ:
Việc bố trí nội dung cho một trang web là rất quan trọng. Nội dung thường được hiển thị trong nhiều cột và để làm việc đó chúng ta dùng <table> hoặc <div>
1. HTML layout dùng <table>
Việc sử dung <table> để phân chia bố cục thường không được sử dụng
Ví dụ:
<html>Kết quả:
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:red;">
<h1>Logo hay tiêu đề trang web</h1>
</td>
</tr>
<tr>
<td style="background-color:green;width:100px;">
<b>Menu</b><br>
Menu 1<br>
Menu 2<br>
Menu 3
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;text-align:center;">
Nội dung</td>
</tr>
<tr>
<td colspan="2" style="background-color:pink;text-align:center;">
©Blog DX</td>
</tr>
</table>
</body>
</html>
2. HTML layout dùng <div>
Hầu như các trang web hiện nay đều sử dụng thẻ <div> để thiết kế bố cục
Ví dụ:
<html>Kết quả:
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:red;">
<h1 style="margin-bottom:0;">Logo hay tiêu đề trang web</h1></div>
<div id="nav" style="background-color:green;height:200px;width:100px;float:left;">
<b>Menu</b><br>
Menu 1<br>
Menu 2<br>
Menu 3<br>
</div>
<div id="section" style="background-color:#eeeeee;height:200px;width:400px;float:left;text-align:center;">
Nội dung</div>
<div id="footer" style="background-color:pink;;clear:both;text-align:center;">
©Blog DX</div>
</div>
</body>
</html>
Tags
HTML