HTML表格布局实例讲解
HTML 文档中的元素是一个接着一个排列的,只是简单地在在块级元素的前后加上拆行,是一种流水布局。但是,我们所见到的 Web 页面按照一定的规则布局排版的(通常是多列的),所以就要借助一定的方法来实现这种布局,通常的解决方案是:使用区块元素 <div> 或 表格(<table>)来布局 Web 页面的内容。
使用表格进行布局,是一种较老的布局解决方案。并不推荐使用,我们应该总是使用表格来显示表格化的数据。
HTML 文档
- <!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">
- 菜品<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 文件
- /*整个点餐系统的界面*/
- #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中background-image属性的设置
栏 目:CSS/HTML
本文标题:HTML表格布局实例讲解
本文地址:https://www.xiuzhanwang.com/a1/CSS_HTML/9675.html
您可能感兴趣的文章
- 04-02表格样式css样式,css样式表单
- 04-02好看的字体样式css,好看的字体样式图片
- 04-02html中加入css样式的简单介绍
- 04-02vue中的css样式布局,vue添加css样式
- 01-10通过html为FLASH加链接的实现代码(div层)
- 01-10IE浏览器HTML Hack标签总结
- 01-10html用style添加属性示例
- 01-10HTML中rel属性分析
- 01-10HTML元素设置焦点的方法
- 01-10在html文件里include文件内容的方法小结
阅读排行
本栏相关
- 04-02表格样式css样式,css样式表单
- 04-02好看的字体样式css,好看的字体样式图
- 04-02分页样式css,分页样式jq
- 04-02分页样式css,分页样式栏里用来定义首
- 04-02css样式的引入,css样式怎么引入
- 04-02css滚动条样式,css滚动条的样式
- 04-02css样式引入方式有几种,网页引入css样
- 04-02html中加入css样式的简单介绍
- 04-02vue中的css样式布局,vue添加css样式
- 04-02内嵌样式css,内嵌样式表,内部样式表
随机阅读
- 08-05织梦dedecms首页调用缩略图为背景
- 08-05dedecms织梦模板编辑文档的同时自动更
- 01-10vue实现分页加载效果
- 01-10C++ 类访问控制的条件总结
- 01-11常用的HTML富文本编译器UEditor、CKEdi
- 01-10C语言打印杨辉三角示例汇总
- 08-05dedecms织梦模板全站调用收藏数的方法
- 01-10C++实现将数组中的值反转
- 08-05DEDECMS点击主栏目默认显示第一个子栏
- 01-10bat批处理彻底隐藏文件的方法(使用