Bố cục HTML

Website thường hiển thị nội dung theo nhiều cột (như tạp chí và báo纸).

Bố cục HTML sử dụng <div>

Chú ý:<div> Định dạng thường được sử dụng làm công cụ bố cục vì nó có thể dễ dàng định vị thông qua CSS.

Ví dụ này sử dụng bốn phần tử <div> để tạo giao diện đa cột:

Ví dụ

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London là thủ đô của Anh. Nó là thành phố đông dân nhất ở Vương quốc Anh,
với khu vực đô thị có hơn 13 triệu cư dân.
</p>
<p>
Nằm trên dòng Thames, London đã là một khu định cư quan trọng trong hai nghìn năm,
Lịch sử của nó trở lại từ khi được thành lập bởi người La Mã, họ đã đặt tên là Londinium.
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

Thử ngay

CSS:

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>

Lưới trang web sử dụng HTML5

Các phần tử ngữ nghĩa mới của HTML5 đã định nghĩa các phần khác nhau của trang web:

Các yếu tố ngữ nghĩa HTML5

header Định nghĩa tiêu đề của tài liệu hoặc phần
nav Định nghĩa hộp chứa liên kết điều hướng
section Định nghĩa phần trong tài liệu
article Định nghĩa bài viết tự bao gồm độc lập
aside Định nghĩa nội dung bên ngoài (ví dụ như thanh bên)
footer Định nghĩa chân trang của tài liệu hoặc phần
details Định nghĩa chi tiết thêm
summary Định nghĩa tiêu đề của phần details

Ví dụ này sử dụng <header>, <nav>, <section>, và <footer> để tạo giao diện đa cột:

Ví dụ

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
London là thủ đô của Anh. Nó là thành phố đông dân nhất ở Vương quốc Anh,
với khu vực đô thị có hơn 13 triệu cư dân.
</p>
<p>
Nằm trên dòng Thames, London đã là một khu định cư quan trọng trong hai nghìn năm,
Lịch sử của nó trở lại từ khi được thành lập bởi người La Mã, họ đã đặt tên là Londinium.
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

Thử ngay

CSS

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
section {
    width:350px;
    float:left;
    padding:10px; 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

Bố cục HTML sử dụng bảng

Chú ý:Phần tử <table> không được thiết kế để là công cụ bố cục.

Phần tử <table> được sử dụng để hiển thị dữ liệu biểu đồ.

Sử dụng phần tử <table> để đạt được hiệu ứng bố cục, vì có thể thiết lập kiểu dáng của phần tử bảng qua CSS:

Ví dụ

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    The table element was not designed to be a layout tool.
  </td>
</tr>
</table>
</body>

Thử ngay

CSS

<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp td {
    width:40px;
}
</style>