html 文档中的元素是一个接着一个排列的，只是简单地在在块级元素的前后加上拆行，是一种流水布局。但是，我们所见到的 web 页面按照一定的规则布局排版的（通常是多列的），所以就要借助一定的方法来实现这种布局，通常的解决方案是：使用区块元素
或 表格（
）来布局 web 页面的内容。
使用表格进行布局，是一种较老的布局解决方案。并不推荐使用，我们应该总是使用表格来显示表格化的数据。
HTML 文档
nbsp;html>Island estaurant
登录后复制
点菜系统
菜品
小鸡炖蘑菇
家常豆腐
酸辣土豆丝
小鸡炖蘑菇：
幼鸡一只 世俗孤岛的餐厅
CSS 文件
立即学习“前端免费学习笔记（深入）”；
/*整个点餐系统的界面*/ #container { width: 600px; margin: 100px; /*取消单元格边框之间的边距*/ border-spacing: 0; } /*点餐系统界面的头部*/ #header { background-color: red; text-align: center; } h1 { margin-bottom: 0px; } /*点餐系统界面的菜单*/ #menu { background-color: #FFD700; height: 200px; width: 150px; } #dishes { padding-top: 10px; padding-left: 10px; line-height: 20px; } /*点餐系统界面的菜品详情*/ #content { background-color: gray; height: 200px; width: 450px; } /*点餐系统界面的尾部*/ #footer { background-color: blue; height: 25px; text-align: center; }
登录后复制
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助。
更多HTML表格布局实例讲解相关文章请关注PHP中文网！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2836194.html
