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%" border="1" 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" border="1" 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" border="1" 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" border="1" 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>