HTML表格布局
表格布局簡單有層次感：隻需表格标簽就能實作
二話不說直接上代碼和效果圖：
效果圖：
無标題文檔
| 網站logo | 網頁的頭 | ||||||||||||||||
|
|
| |||||||||||||||
| 底部 |
布局代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
</head>
<body bgcolor="ffffff" text="#000000">
<table width="95%" height="100%" cellpadding="1" cellspacing="1" align="center">
<tr height="10%">
<td width="100" height="69">網站logo</td>
<td colspan="2" align="center">網頁的頭</td>
</tr>
<tr height="80%">
<td height="100%" width="20%">
<table width="100%" height="848" cellpadding="1" align="center" cellspacing="1" bgcolor="#33FF00">
<tr><td width="100%"> 标題欄 </td></tr>
<tr><td> 标題欄 </td></tr>
<tr><td> 标題欄 </td></tr>
<tr><td> 标題欄 </td></tr>
<tr><td> 标題欄 </td></tr>
<tr><td> 标題欄 </td></tr>
<tr><td> 标題欄 </td></tr>
<tr><td> 标題欄 </td></tr>
<tr><td> 标題欄 </td></tr>
<tr> <td height="462" align="center" bgcolor="#FF0000"> 頁面其他内容</td>
</tr>
</table>
</td>
<td width="50%">
<table width="100%" height="846" cellpadding="1" cellspacing="1" bgcolor="#FFFFFF">
<tr><td align="center"> 中間内容 </td> </tr>
<tr> <td align="center"> 中間内容 </td>
</tr>
</table>
</td>
<td width="30%">
<table width="100%" height="846" cellpadding="1" cellspacing="1">
<tr><td height="20%" align="center"> 右邊内容 </td></tr>
<tr><td height="30%" align="center"> 右邊内容</td></tr>
<tr><td height="50%" align="center"> 右邊内容 </td></tr>
</table>
</td>
</tr>
<tr >
<td height="70" align="center" colspan="3"> 底部</td>
</tr>
</table>
</body>
</html>
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)