HTML学习11-表格布局
1、
布局时应该尽量少的使用嵌套，尽量少使用跨行、跨列，便于维护；
应该学会多思考；
<table width="100%" > <tr align="center" bgcolor="red"> <!--页头--> <td> <td> </tr> <tr> <!--上空行--> <td>上空行</td> </tr> <tr align="center" valign="top"> <!--内容--> <td> <table align="center" width="1024px"> <tr> <td width="240px" valign="top" > <table width="100%" bgcolor="white" > <tr align="center" height="60px"><td>关于我们</td></tr> <tr align="center" height="60px"><td>团队介绍</td></tr> <tr align="center" height="60px"><td>人才招聘</td></tr> <tr align="center" height="60px"><td>讲师招募</td></tr> <tr align="center" height="60px"><td>联系我们</td></tr> <tr align="center" height="60px"><td>常见问题</td></tr> <tr align="center" height="60px"><td>意见反馈</td></tr> <tr align="center" height="60px"><td>友情链接</td></tr> </table> </td> <td width="20px"> </td> <td width="764px" bgcolor="white"> 关于我们 什么是慕课（MOOC） 源于国外，Massive（大规模）Open（开放）Online（在线）Course（课程）。 慕课网是什么MOOC 专注做好IT技能教育的MOOC，符合互联网发展潮流接地气儿的MOOC。我们免费，我们只教有用的，我们专心做教育。 为什么做慕课网 慕课网的小伙伴希望所有热爱互联网的同学能更加便捷的获取学习资源，用互联网思维改变我们的学习。 我们提供最新的知识，帮你应对变化的世界！ 慕课网在做什么 做更多实用的课程，做更好体验的产品，研究更牛的技术！ 慕课网的追求是什么 让更多热爱互联网的同学来慕课网学习，多年以后，圈子里一批技术牛说：我在慕课网学习过，这就够了。 慕课网有移动端吗 有啊，手机端、iPad版请扫描下方二维码下载 关于我们 什么是慕课（MOOC） 源于国外，Massive（大规模）Open（开放）Online（在线）Course（课程）。 慕课网是什么MOOC 专注做好IT技能教育的MOOC，符合互联网发展潮流接地气儿的MOOC。我们免费，我们只教有用的，我们专心做教育。 为什么做慕课网 慕课网的小伙伴希望所有热爱互联网的同学能更加便捷的获取学习资源，用互联网思维改变我们的学习。 我们提供最新的知识，帮你应对变化的世界！ 慕课网在做什么 做更多实用的课程，做更好体验的产品，研究更牛的技术！ 慕课网的追求是什么 让更多热爱互联网的同学来慕课网学习，多年以后，圈子里一批技术牛说：我在慕课网学习过，这就够了。 慕课网有移动端吗 有啊，手机端、iPad版请扫描下方二维码下载 关于我们 什么是慕课（MOOC） 源于国外，Massive（大规模）Open（开放）Online（在线）Course（课程）。 慕课网是什么MOOC 专注做好IT技能教育的MOOC，符合互联网发展潮流接地气儿的MOOC。我们免费，我们只教有用的，我们专心做教育。 为什么做慕课网 慕课网的小伙伴希望所有热爱互联网的同学能更加便捷的获取学习资源，用互联网思维改变我们的学习。 我们提供最新的知识，帮你应对变化的世界！ 慕课网在做什么 做更多实用的课程，做更好体验的产品，研究更牛的技术！ 慕课网的追求是什么 让更多热爱互联网的同学来慕课网学习，多年以后，圈子里一批技术牛说：我在慕课网学习过，这就够了。 慕课网有移动端吗 有啊，手机端、iPad版请扫描下方二维码下载 </td> </tr> </table> </td> </tr> <tr> <!--下空行--> <td >下空行</td> </tr> <tr> <!--页脚--> <td>页脚</td> </tr> </table>
显示效果如下：
