<abbr id="qqgmy"></abbr>
表格除了顯示數據外，還常常被用來排版。雖然如今比較流行用DIV布局頁面，但是由于表格在網頁設計時容易上手、快捷、兼容性好，所以表格布局仍然受到不少網頁設計者的青睞。
【操作步驟】
第1步，新建文檔，保存為index.html。構建網頁結構。本例中在網站建設中應用了表格嵌套，設置了外層表格outer和內層表格inner進行布局，從圖中可以看到，外層表格是一個3行1列的表格，在外層表格的第2行中，又嵌套了一個1行2列的表格。
<table class="outer">
<tr>
<td>
<img src="images/bg.jpg"></td>
</tr>
<tr>
<td><table class="inner">
<tr>
<td class="left"><ul>
<li><a href="#">
首頁</a></li>
<li><a href="#">古典音樂</a></li>
<li><a href="#">現代流行</a></li>
<li><a href="#">爵士音樂</a></li>
<li><a href="#">70后音樂</a></li>
<li><a href="#">80后音樂</a></li>
<li><a href="#">90后音樂</a></li>
</ul></td>
<td class="right"><img src="images/1.jpg" /></td>
</tr>
</table></td>
</tr>
<tr>
<td class="footer">
<p>|聯系我們 |關于我們 |</p>
<p>感謝您的支持，希望明天會更好??！</p></td>
</tr>
</table>
以上代碼定義了表格的結構，外層表格的3行分別是：
第1行設置了banner圖片，第2行是網頁正文部分，嵌套了另一個表格，第3行定義了網頁的footer部分；內層表格是一個1行2列的表格，左側單元格設置了<ul>列表，定義網頁的導航欄，右側單元格是網頁的內容部分。
第2步，定義網頁基本屬性和外層表格樣式。在<head>標簽內添加<style type="text/css">標簽，定義一個內部樣式表，然后輸入下面樣式：
body { /*網頁基本屬性*/ background: #e9e8dd; /*網頁背景顏色*/
text-align: center;
}.outer {/*外層表格樣式*/
width: 800px; /*表格寬度*/
border: 1px #999999 solid; /*表格邊框*/
margin: 0 auto;/*與父標簽中的text-align:center配合實現水平居中*/}
.footer {/*外層表格第3行單元格樣式*/
background-color: #BEC4D0; /*單元格背景顏色*/
text-align: center; /*水平居中*/
font-size: 12px; /*字體大小*/
color: #0033FF; /*字體顏色*/}
在以上代碼中，首先定義了網頁基本屬性；在outer中首先定義了表格寬度，并定義了表格的外邊框，margin:0 auto與body中的text-align:cen-ter兩條語句可實現IE與FF瀏覽器中的水平居中。在footer中，定義了外層表格中第3行單元格的樣式。此時，外層表格的所有樣式設置完畢。
第3步，設置內層表格inner樣式。
.left { /*內層表格左側單元格樣式*/
width: 150px; /*左側單元格寬度*/
background-color: #FF3300; /*背景顏色*/
border: 1px red solid; /*單元格邊框*/
text-align: center; /*水平居中*/}
.right {/*內層表格右側單元格樣式*/
width: 650px; /*右側單元格寬度*/
background-color: #BEC4D0; /*背景顏色*/
border: 1px red solid; /*單元格邊框*/
text-align: center; /*水平居中*/}
以上代碼完成了內層表格中兩個單元格樣式的設置。
第4步，設置內層表格中的左側導航條樣式。
ul {/*列表樣式*/
list-style-type: none; /*不顯示列表項目符號*/
font-weight: bold; /*字體加粗*/
font-size: 16px; /*字體大小*/}
li { height: 40px; /*列表項的高寬*/ }
上面代碼實現了導航欄的樣式。
當前文章標題：如何在網頁設計中設計音樂首頁
當前URL：http://www.margaycoffee.com/news/wzzz/3120.html
下一篇：設計個人小站
<abbr id="qqgmy"></abbr>