二、表格嵌套
嵌套表格说明：
1.要有完整的表格结构
2.放入td标签中
<table>
<tr>
<td>...</td>
<td>
<table>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
</td>
</tr>
</table>
表格属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格布局</title>
</head>
<body>
<table width="100%" bgcolor="#f2f2f2">
<tr height="80px" bgcolor="#14191e">
<td>
<span style="font-size: 28px; color:white">慕课网</span>
<span style="font-size: 14px; color:white">课程</span>
<span style="font-size: 14px; color:white">计划</span>
<span style="font-size: 14px; color:white">疑问</span>
<span style="font-size: 14px; color:white">文章</span>
</td>
</tr><!--页头-->
<tr height="10px"><td></td></tr><!--上空行-->
<tr><td>
<table align="center" width="1024px" >
<tr>
<td width="240px" valign="top">
<table width="100%" bgcolor="#ffffff">
<tr><td align="center" height="60px">关于我们</td></tr>
<tr><td align="center" height="60px">团队介绍</td></tr>
<tr><td align="center" height="60px">人才招募</td></tr>
<tr><td align="center" height="60px">讲师招募</td></tr>
<tr><td align="center" height="60px">联系我们</td></tr>
<tr><td align="center" height="60px">常见问题</td></tr>
<tr><td align="center" height="60px">意见反馈</td></tr>
<tr><td align="center" height="60px">友情链接</td></tr>
</table>
</td><!--左内容-->
<td width="20px"></td><!--空隙-->
<td width="764px" bgcolor="#ffffff" align="left">
<pre><h3>
360导航 PHP站中文网 hao123 拉勾网
web开发者 学习找工作网 腾讯云 铁粉社区
php学习网 搜孤教育 JS代码网 Boss直聘网
高博开发者论坛 微学 社讯网 挖工作
微企业 SDKcn开发平台
</h3></pre>
</td><!--右内容-->
</tr>
</table>
</td></tr>
<tr height="10px"><td></td></tr><!--下空行-->
<tr height="150px" bgcolor="#14191e">
<td align="center">
<span style="font-size: 14px; color:white">网站首页</span>
<span style="font-size: 14px; color:white">人才招聘</span>
<span style="font-size: 14px; color:white">联系我们</span>
<span style="font-size: 14px; color:white">慕课云</span>
<span style="font-size: 14px; color:white">合作专区</span>
<span style="font-size: 14px; color:white">关于我们</span>
<span style="font-size: 14px; color:white">讲师招募</span>
<span style="font-size: 14px; color:white">意见反馈</span>
<span style="font-size: 14px; color:white">友情链接</span>
<br/>
<span style="font-size: 10px; color:white">Copyright 2016 imooc.com All Right Reserved</span>
</td>
</tr><!--页尾-->
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
