如何进行HTML页面的布局怎样合并html中的单元格 _布局

刚开始学Web前端的时候，对HTML页面的布局特别感兴趣。在上一讲“CSS入门”中，我们讲授了CSS的基础知识。现在我们来介绍一下HTML布局的知识。
HTML布局计划包括表格布局，更流行的DIV布局，以及HTML5建议的DIV布局的替代计划。
当阅读器显示HTML内容时，所有的HTML页面都是一个显示信息和操作的界面。我们经常看到类似如下的界面:
用word设计的简单界面
在这个界面中，所有的HTML页面分为标题区、导航区、内容区和状态栏区。接下来我们用HTML5建议的表格布局、div布局、布局规划分别实现这个界面。
1.表格布局平面图使用表格布局计划，所有阅读器的显示部分是一个表格，然后我们可以设置表格的单元格的大小和合并。以下是应用表格布局计划的HTML页面:
<!DOCTYPEhtml><html><head><title>layout001</title><metacharset="utf-8"/><styletype="text/css">html,body,table{width:100%;height:100%;}#first_row{height:6%;}#second_row{height:91%;}#third_row{height:3%;}body{margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;&nb红豆博客sp;}#header{border:1pxblacksolid;color:white;text-align:center;background:green;}#navigator{border:1pxblacksolid;color:white;text-align:center;background:blue;}#content{border:1pxblacksolid;color:white;text-align:center;background:gray;}#footer{border:1pxblacksolid;color:white;text-align:center;background:orange;}</style></head><body><table><trid="first_row"><tdid="header"colspan="2">题目区</td></tr><trid="second_row"><tdid="navigator"width="15%">导航区</td><tdid="content"width="85%">内容区</td></tr><trid="third_row"><tdid="footer"colspan="2">状况栏区</td></tr></table></body></html>当读者打开这个HTML文档时，结果如下:

在这个框架建立之后，我们可以在每个
2.DIV布局图当应用DIV布局计划时，所有阅读器的显示部分由每个DIV分配。以下是应用DIV布局计划的HTML页面:
<!DOCTYPEhtml><html><head><title>layout002</title><metacharset="utf-8"/><styletype="text/css">html,body{width:100%;height:100%;}body,#header,#second_row,#navigator,#content,#footer{margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;}#header{height:6%;width:100%;color:white;text-align:center;background:green;}#second_row{height:91%;width:100%;}#navigator{height:100%;width:15%;float:left;color:white;text-align:center;background:blue;}#content{height:100%;width:85%;float:right;color:white;text-align:center;background:gray;}#footer{height:3%;width:100%;color:white;text-align:center;background:orange;}</style></head><body><divid="header">题目区</div><divid="second_row"><divid="navigator">导航区</div>&nbsp红豆博客;<divid="content">内容区</div></div><divid="footer">状况栏区</div></body></html>当读者打开这个HTML文档时，结果如下:

在这个框架建立之后，我们可以在每个
是的，通过应用DIV元素，我们可以更方便地布局页面。
3.HTML5推荐的布局图DIV布局图的应用特别方便，基本上是前端开发者的首选。但是在HTML5的尺度上，每个DIV的含义不明确，建议用特殊元素代替DIV 。这是根据HTML5推荐的实现的布局规划页面:
<!DOCTYPEhtml><html><head><title>layout003</title><metacharset="utf-8"/><styletype="text/css">html,body{width:100%;height:100%;}body,header,#second_row,nav,main,footer{margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;}header{height:6%;width:100%;color:white;text-align:center;background:green;}#second_row{height:91%;width:100%;}nav{height:100%;width:15%;&n红豆博客bsp;float:left;color:white;text-align:center;background:blue;}main{height:100%;width:85%;float:right;color:white;text-align:center;background:gray;}footer{height:3%;width:100%;color:white;text-align:center;background:orange;}</style></head><body><header>题目区</header><divid="second_row"><nav>导航区</nav><main>内容区</main></div><footer>状况栏区</footer></body></html>应用程序打开这个HTML文档，结果与上面完全一样:

这个计划的应用，除了应用的明确意义之外
这种做法在HTML中看起来更清晰，但实际上增加了元素的类型，让开发者的记忆变得繁琐，容易出错。所以前端程序员根本不喜欢这个方案。
【如何进行HTML页面的布局怎样合并html中的单元格】

如何进行HTML页面的布局 怎样合并html中的单元格

如何进行HTML页面的布局怎样合并html中的单元格