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> <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>Kết quả:
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> <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>Kết quả:
Tags
HTML