因爲公司業務需要，從上週開始我便開始研究web前端開發，目的就是爲公司開發出一個相對比較完善的管理平臺，那麼下面我們來詳細的說一下怎樣使用表格嵌套的形式開發一個簡單的網頁佈局。程序效果如圖所示：
首先講一下table相關的基礎知識:(思維導圖稍後會上傳到本人的CSDN，需要的朋友可以免費下載。)
一、組成
1）<caption>標記-表格標題，位於table之後，表格行(<tr>)標記之前。
2）<tr>標記-代表表格中的一行
3）<td>和<th>-只能嵌套在<tr>標記中，<th>代表表頭，多用於表格的第一行或第一列，其中的文字會被加粗。<td>代表表格中的一列。
二、屬性
1）<table>標籤的相關屬性
a）width屬性 以width="value"的形式來定義，value可以是一個固定的值，單位是像素，給予表格一個固定寬度。也可以是一個百分數，代表佔據整個父界面寬度的百分比。
b）height屬性 以height="value"的形式來定義，value可以是一個固定的值，單位是像素，給予表格一個固定高度。也可以是一個百分數，代表表格佔據整個父界面高度的百分比。
c）border屬性 以border=“value”的形式來定義，value是一個固定的值，單位是像素，代表表格邊框的寬度。
d）align屬性，以align=“value”的形式來定義，value=“left/right/center”，代表表格相對於它父界面的對齊方式。
e）cellspacing屬性，設置每一個單元格之間的距離，默認是2px
f）cellpadding屬性 以cellpadding=“value”的形式來定義，value是一個固定的值，代表單元格內容宇邊框的距離，默認是2px
g）frame屬性 控制表格最外層的四條邊框
h）rules屬性 控制是否顯示以及如何顯示單元格之間的分割線。枚舉值，可以自己試一下，看一下效果。
2）<caption>標籤的相關屬性
a）align屬性 表示標題在表格中擺放的位置，以align=“value”的形式來定義，枚舉值。（“top”-標題放置在表格的頂部，“bottom”-標題放置在表格的底部，“left”-標題放置在表格的左側，“right”-標題放置在表格的右側）
3）<tr>標記的相關屬性
可選屬性：
a）bgcolor-設置這一行的背景顏色
b）align屬性-設置豎直方向上的對齊方式，以align=“value”的形式來定義，value是一個枚舉值（“bottom”-靠底部對齊，“top”-靠頂端對齊， “middle”居中對齊）
c）valign屬性-設置水平方向上的對齊方式，以valign=“value”的形式來定義，value是一個枚舉值（“left”-靠左對齊，“right”-靠右對齊，“center”-居中對齊）
4）<td>標記的相關屬性(可選)
a）bgcolor-設置此列的背景顏色。
b）align-設置單元格的豎直方向上的對齊方式。
c）valign-設置單元格水平方向上的對齊方式。
d）width-設置單元格寬度。
e）height-設置單元格高度。
f）rowspan-設置單元格所佔的行數。以rowspan=“value”的形式來定義，value是一個具體的數字。
g）colspan-設置單元格所佔的列數。以colspan=“value”的形式來定義，value是一個具體的數字。
<td>標記相關屬性值的設置可以參考上面。
<body>相關的屬性：
topmargin-代表頁面內容與頁面頂端的距離。
leftmargin-代表頁面內容與頁面左側的距離。
rightmargin-代表頁面內容與頁面右側的距離。
bottommargin-代表頁面內容與頁面底部的距離。
以上四個屬性均是以屬性名=“value”的形式來定義，value是一個具體的數值。
下面附上程序相關代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網頁佈局</title>
</head>
<body topmargin="0">
<table border="0" align="center" width="960px" cellspacing="0" cellpadding="0" rules="all">
<tr height="90" bgcolor="red" align="center"><td><font size="5" color="white"><b>網頁的頭部</b></font></td></tr>
<tr height="500">
<td>
<table bgcolor="yellow" width="30%" height="500" align="left">
<tr align="center">
<td><font size="5"><b>網頁的左部分</b></font></td>
</tr>
</table>
<table bgcolor="green" width="70%" height="500" align="left">
<tr align="center">
<td><font size="5"><b>網頁的右部分</b></font></td>
</tr>
</table>
</td>
</tr>
<tr height="90" bgcolor="red" align="center"><td><font size="5" color="white"><b>網頁的底部</b></font></td></tr>
</table>
</body>
</html>
如有問題或紕漏，歡迎各位博友批評指正。思維導圖會稍後上傳到本人CSDN下載頻道，免費下載。歡迎關注。