站内搜索

 

精品内容

html表格的嵌套

[ 来源:互联网 | 作者: | 时间:2008-05-09 | 浏览: 人次 ]

在html页面中,使用表格排版是通过嵌套来完成的,即一个表格内部可以嵌套另一个表格,用表格来排版页面的思路是:由总表格规划整体的结构,由嵌套的表格负责各个子栏目的排版,并插入到表格的相应位置,这样就可以使页面的各个部分有条不紊,互不冲突,看上去清晰整洁。在实际做网页时一般不显示边框,边框的显示可根据自己的爱好来设定。在实例中为了让大家能够看清楚,都设置了有边框。

实例

<html>
<head>
<title>表格嵌套</title>
</head>

<body bgcolor="#555555" text="#FFFFFF">
<table width="560" border="3" cellspacing="1" cellpadding="1" align="center">
<tr>
<td width="100" height="69">网页标志</td>
<td colspan="2"><div align="center">广告条</div></td>
</tr>
<tr>
<td height="330"><table width="100" height="321" border="3" align="center" cellpadding="1" cellspacing="1">
<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>标题栏</td>
</tr>
<tr>
<td height="90">内容六</td>
</tr>
</table></td>
<td width="275"><table width="275" height="325" border="3" cellpadding="1" cellspacing="1">
<tr>
<td width="263">内容一</td>
</tr>
<tr>
<td>内容二</td>
</tr>
</table></td>
<td width="163"><table width="157" height="320" border="3" cellpadding="1" cellspacing="1" align="center">
<tr>
<td width="136" height="94">内容三</td>
</tr>
<tr>
<td height="62">内容四</td>
</tr>
<tr>
<td height="160">内容五</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

效果:

网页标志
广告条
标题栏
标题栏
标题栏
标题栏
标题栏
标题栏
标题栏
标题栏
标题栏
内容六
内容一
内容二
内容三
内容四
内容五

最新评论 共有有 0 位网友发表了评论

发表评论

评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名:(注册)
密码:
验证码:
匿名?