HTML 文档中的元素是一个接着一个排列的,只是简单地在在块级元素的前后加上拆行,是一种流水布局。但是,我们所见到的 Web 页面按照一定的规则布局排版的(通常是多列的),所以就要借助一定的方法来实现这种布局,通常的解决方案是:使用区块元素 <div> 或 表格(<table>)来布局 Web 页面的内容。
使用表格进行布局,是一种较老的布局解决方案。并不推荐使用,我们应该总是使用表格来显示表格化的数据。
HTML 文档
CSS Code复制内容到剪贴板- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <!-- 链接到外部样式表 -->
- <link rel="stylesheet" href="css/mystyle.css">
- <title>Island estaurant</title>
- </head>
- <body>
- <table id="container">
- <!-- 头部 -->
- <tr>
- <td id="header" colspan="2">
- <h1>点菜系统</h1>
- </td>
- </tr>
- <!-- 主体 -->
- <tr>
- <!-- 菜单 -->
- <td id="menu">
- <b>菜品</b><br>
- <div id="dishes">
- 小鸡炖蘑菇<br>
- 家常豆腐<br>
- 酸辣土豆丝<br>
- </div>
- </td>
- <!-- 内容 -->
- <td id="content">
- 小鸡炖蘑菇:<br>
- 幼鸡一只
- </td>
- </tr>
- <!-- 尾部 -->
- <tr>
- <td id="footer" colspan="2">世俗孤岛的餐厅</td>
- </tr>
- </table>
- </body>
- </html>
CSS 文件
CSS Code复制内容到剪贴板- /*整个点餐系统的界面*/
- #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,表格,布局
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“HTML表格布局实例讲解”评论...
更新日志
2024年05月29日
2024年05月29日
- 鸣潮安可角色培养材料大全 安可突破材料清单汇总
- 《我推的孩子》第2季全新PV公开!今年7月3日开播
- 外媒:下一代Xbox与前代截然不同 或能运行Steam
- 曝索尼正在开发新动作冒险游戏:以突厥神话为主题
- 黄莺莺【黄莺莺精选1-2】2CD[WAV+CUE]
- 群星《寂寞の诱惑HQ》wav分轨
- 群星《测耳聆听》[LPCD]3CD[WAV]
- 鸣潮桃祈角色培养材料大全 桃祈突破材料清单汇总
- 鸣潮卡卡罗角色培养材料大全 卡卡罗突破材料清单汇总
- 鸣潮维里奈角色培养材料大全 维里奈突破材料清单汇总
- 群星《红歌汇》HQ黑胶2CD[WAV分轨]
- 发烧名盘《超级名作3·寂静仙境HQ》2CD[DTS-WAV]
- 【古典天碟】(XRCD24)桑多尔·韦格《莫扎特-小夜曲、嬉游曲》1987[WAV/分轨]
- 请愿发起人庆祝《剑星》取消服装审查:玩家的胜利!
- 身陷桃色丑闻!70岁声优古谷彻承认出轨致其节目关停