HTML 佈局

網頁佈局對改善網站的外觀非常重要。

請慎重設計您的網頁佈局。

線上例項

使用 <div> 元素的網頁佈局
如何使用 <div> 元素添加布局。

使用 <table> 元素的網頁佈局
如何使用 <table> 元素添加布局。

網站佈局

大多數網站會把內容安排到多個列中（就像雜誌或報紙那樣）。

大多數網站可以使用 <div> 或者 <table> 元素來建立多列。CSS 用於對元素進行定位，或者為頁面建立背景以及色彩豐富的外觀。

HTML 佈局 - 使用<div> 元素

div 元素是用於分組 HTML 元素的塊級元素。

下面的例子使用五個 div 元素來建立多列布局：

上面的 HTML 程式碼會產生如下結果：

HTML 佈局 - 使用表格

使用 HTML <table> 標籤是建立佈局的一種簡單的方式。

大多數站點可以使用 <div> 或者 <table> 元素來建立多列。CSS 用於對元素進行定位，或者為頁面建立背景以及色彩豐富的外觀。

下面的例子使用三行兩列的表格 - 第一和最後一行使用 colspan 屬性來橫跨兩列：

上面的 HTML 程式碼會產生以下結果：

HTML 佈局 - 有用的提示

Tip: 使用 CSS 最大的好處是，如果把 CSS 程式碼存放到外部樣式表中，那麼站點會更易於維護。通過編輯單一的檔案，就可以改變所有頁面的佈局。如需學習更多有關 CSS 的知識，請訪問我們的CSS 教程。

Tip: 由於建立高階的佈局非常耗時，使用模板是一個快速的選項。通過搜尋引擎可以找到很多免費的網站模板（您可以使用這些預先構建好的網站佈局，並優化它們）。

HTML 佈局標籤