常用嵌套表格示例,出自《网页开发手记:HTML+CSS+JavaScript实战详解》
<html> | |
<head> | |
<title>嵌套表格布局网页</title> | |
</head> | |
<body topmargin="0" bottommargin="0"> | |
<table width="500" height="400" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#999999"> | |
<tr> | |
<td height="100"><table width="100%" height="100%" border="0" cellspacing="2"> | |
<tr> | |
<td width="112" align="center" bgcolor="#CCCCCC">企业标志</td> | |
<td align="center">企业宣传动画</td> | |
<td width="120"><table width="100%" height="100" border="0"> | |
<tr> | |
<td>Email联系我们</td> | |
</tr> | |
<tr> | |
<td>业务电话:</td> | |
</tr> | |
<tr> | |
<td>公司地址:</td> | |
</tr> | |
</table></td> | |
</tr> | |
</table></td> | |
</tr> | |
<tr> | |
<td height="20"><table width="80%" border="0" align="center" cellpadding="0" cellspacing="2"> | |
<tr align="center"> | |
<td bgcolor="#CCCCCC">公司首页</td> | |
<td>公司介绍</td> | |
<td>公司产品</td> | |
<td>公司文化</td> | |
<td>公司论坛</td> | |
</tr> | |
</table></td> | |
</tr> | |
<tr> | |
<td valign="top"><table width="100%" height="100%" border="0"> | |
<tr> | |
<td width="20%" valign="top"><table width="100%" height="200" border="0" bgcolor="#CCCCCC"> | |
<tr> | |
<td align="center">文章列表</td> | |
</tr> | |
<tr> | |
<td>1.文章标题1</td> | |
</tr> | |
<tr> | |
<td>2.文章标题2</td> | |
</tr> | |
<tr> | |
<td>3.文章标题3</td> | |
</tr> | |
<tr> | |
<td>4.文章标题4</td> | |
</tr> | |
</table></td> | |
<td valign="top"><table width="100%" height="200" border="0" cellspacing="0"> | |
<tr> | |
<td height="45" align="center"><strong>文章标题</strong></td> | |
</tr> | |
<tr> | |
<td valign="top" bgcolor="#cccccc">文章内容</td> | |
</tr> | |
</table></td> | |
</tr> | |
</table></td> | |
</tr> | |
<tr> | |
<td height="75"><table width="200" border="0" align="center"> | |
<tr> | |
<td>网站备案:</td> | |
</tr> | |
<tr> | |
<td>公司信息:</td> | |
</tr> | |
<tr> | |
<td>公司年份:</td> | |
</tr> | |
</table></td> | |
</tr> | |
</table> | |
</body> | |
</html> |
表格效果: