本文实例为大家解析了html5 div布局与桌子布局，供大家参考，具体内容如下

div布局：实现简单布局。

#容器中高度不能写成百分数，必须为具体高度。

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title div布局/title style type=' text/CSS ' body { margin 33600；padding:0 } #容器{宽度：；高度：650像素背景-color : aqua；} #标题{宽度：；高度：10%;背景-color : azure；} #内容菜单{宽度：30%；高度：80%;背景-color :图表重用；float:left} #内容-正文{宽度：70%；高度：80%;背景色：巧克力；float:left} #页脚{宽度：；高度：10%;背景颜色：深灰色；clear:两者；}/style/head body div id=' container ' div id=' heading '头部/div div id='内容-菜单'内容菜单/div div id='content-body '内容主体/div div id='页脚'底部/div /div /body /html

效果图：

table布局：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 '标题表布局/title/head body margin width=' 0px ' margin heat=' 0px ' table width=' ' height=' 650 px ' style=' background-color : aqua ' tr TD colspan=' 3 ' width=' ' height=' 10% ' style=' background-color : chart reuse '这是头部/TD/tr tr TD宽度=' 20% ' 高度=' 80% '样式='底色：仿古白'左菜单TD/TD宽度='60% '高度='80% '样式='背景-color: coral '内容/TD TD宽度=' 20% '高度=' 80% '样式='底色：矢车菊蓝色'右菜单/TD/tr TD栏跨度=' 3 '宽度=' '高度=' 10% '样式='背景色：深红色'这是底部/td /tr /table /body /html