HTML佈局標簽，定義文檔區塊，塊級(block-level)；定義 span，用來組合文檔中的行內元素。雖然我們可以使用HTML table標簽來設計出漂亮的佈局，但是table標簽是不建議作為佈局工具使用的，設計表格的目的是呈現表格化數據 - 表格不是佈局工具！ ...
網頁佈局對改善網站的外觀非常重要,請慎重設計您的網頁佈局,大多數網站會把內容安排到多個列中（就像雜誌或報紙那樣）,大多數網站可以使用 <div> 或者 <table> 元素來創建多列。CSS 用於對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。
e.g:雖然我們可以使用HTML table標簽來設計出漂亮的佈局，但是table標簽是不建議作為佈局工具使用的 - 表格不是佈局工具。
HTML 佈局 - 使用<div> 元素/div 元素是用於分組 HTML 元素的塊級元素
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <div id="container" style="width:800px"> 6 7 <div id="header" style="background-color:#FFA500;"> 8 <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> 9 10 <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> 11 <b>Menu</b><br> 12 HTML<br> 13 CSS<br> 14 JavaScript</div> 15 16 <div id="content" style="background-color:#EEEEEE;height:200px;width:700px;float:left;"> 17 Content goes here</div> 18 19 <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 20 Copyright © w3cschool.cn</div> 21 22 </div> 23 24 </body> 25 </html>
HTML 佈局 - 使用table表格
使用 HTML <table> 標簽是創建佈局的一種簡單的方式;大多數站點可以使用 <div> 或者 <table> 元素來創建多列。CSS 用於對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。即使可以使用 HTML 表格來創建漂亮的佈局，但設計表格的目的是呈現表格化數據 - 表格不是佈局工具！
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <table width="500" border="0"> 6 <tr> 7 <td colspan="2" style="background-color:#FFA500;"> 8 <h1>Main Title of Web Page</h1> 9 </td> 10 </tr> 11 12 <tr> 13 <td style="background-color:#FFD700;width:100px;"> 14 <b>Menu</b><br> 15 HTML<br> 16 CSS<br> 17 JavaScript 18 </td> 19 <td style="background-color:#eeeeee;height:200px;width:400px;"> 20 Content goes here</td> 21 </tr> 22 23 <tr> 24 <td colspan="2" style="background-color:#FFA500;text-align:center;"> 25 Copyright © w3cschool.cn</td> 26 </tr> 27 </table> 28 29 </body> 30 </html>
HTML 佈局/使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那麼站點會更易於維護。通過編輯單一的文件，就可以改變所有頁面的佈局。同時由於創建高級的佈局非常耗時，使用模板是一個快速的選項。通過搜索引擎可以找到很多免費的網站模板（您可以使用這些預先構建好的網站佈局，並優化它們）。
概括：一開始我們接觸網頁製作的時候，就瞭解到html代表結構、css代表樣式、javascript代表行為，網頁製作中，我們一直強調結構與表現相分離的原則，這裡面的結構一般指HTML，此外分離是說把它們寫在不同的文件加以引用嗎？當然不是，在這裡的學習中瞭解到，分離不單是一種方法更是一種思想，簡而言之，一個平面二維坐標，其中x軸代表技術發展，y軸代表網頁製作需求，分離是根據技術發展和我們的網頁製作需求完成的！
