首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

HTML表格布局实例讲解

所属分类： 网页制作 / HTML/Xhtml 阅读数： 1424
收藏 0 赞 0 分享

HTML 文档中的元素是一个接着一个排列的，只是简单地在在块级元素的前后加上拆行，是一种流水布局。但是，我们所见到的 Web 页面按照一定的规则布局排版的（通常是多列的），所以就要借助一定的方法来实现这种布局，通常的解决方案是：使用区块元素 <div> 或 表格（<table>）来布局 Web 页面的内容。

使用表格进行布局，是一种较老的布局解决方案。并不推荐使用，我们应该总是使用表格来显示表格化的数据。

HTML 文档

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <!-- 链接到外部样式表 -->   
  6.     <link rel="stylesheet" href="css/mystyle.css">   
  7.     <title>Island estaurant</title>   
  8. </head>   
  9. <body>   
  10.     <table id="container">   
  11.         <!-- 头部 -->   
  12.         <tr>   
  13.             <td id="header" colspan="2">   
  14.                 <h1>点菜系统</h1>   
  15.             </td>   
  16.         </tr>   
  17.         <!-- 主体 -->   
  18.         <tr>   
  19.             <!-- 菜单 -->   
  20.             <td id="menu">   
  21.                 <b>菜品</b><br>   
  22.                 <div id="dishes">   
  23.                     小鸡炖蘑菇<br>   
  24.                     家常豆腐<br>   
  25.                     酸辣土豆丝<br>   
  26.                 </div>   
  27.             </td>   
  28.             <!-- 内容 -->   
  29.             <td id="content">   
  30.                 小鸡炖蘑菇：<br>   
  31.                 幼鸡一只   
  32.             </td>   
  33.         </tr>   
  34.         <!-- 尾部 -->   
  35.         <tr>   
  36.             <td id="footer" colspan="2">世俗孤岛的餐厅</td>   
  37.         </tr>   
  38.     </table>   
  39. </body>   
  40. </html>   
  41.   

CSS 文件

CSS Code复制内容到剪贴板
  1. /*整个点餐系统的界面*/  
  2. #container   
  3. {   
  4.     width: 600px;   
  5.     margin: 100px;   
  6.     /*取消单元格边框之间的边距*/  
  7.     border-spacing: 0;   
  8. }   
  9. /*点餐系统界面的头部*/  
  10. #header  
  11. {   
  12.     background-color: red;   
  13.     text-align: center;   
  14. }   
  15. h1   
  16. {   
  17.     margin-bottom: 0px;   
  18. }   
  19. /*点餐系统界面的菜单*/  
  20. #menu  
  21. {   
  22.     background-color: #FFD700;   
  23.     height: 200px;   
  24.     width: 150px;   
  25. }   
  26. #dishes  
  27. {   
  28.     padding-top: 10px;   
  29.     padding-left: 10px;   
  30.     line-height: 20px;   
  31. }   
  32. /*点餐系统界面的菜品详情*/  
  33. #content   
  34. {   
  35.     background-color: gray;   
  36.     height: 200px;   
  37.     width: 450px;   
  38. }   
  39. /*点餐系统界面的尾部*/  
  40. #footer  
  41. {   
  42.     background-color: blue;   
  43.     height: 25px;   
  44.     text-align: center;   
  45. }  

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助。

更多精彩内容其他人还在看

浅谈HTML代码中的空格和空行

下面小编就为大家带来一篇浅谈HTML代码中的空格和空行。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

全面了解html.css溢出

下面小编就为大家带来一篇全面了解html.css溢出。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

htm初学笔记(新手必看)

下面小编就为大家带来一篇htm初学笔记(新手必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

HTML中文件上传时使用的<input type="file">元素的样式自定义

这篇文章主要介绍了HTML中文件上传时使用的<input type=
收藏 0 赞 0 分享

关于input的file 控件及美化

下面小编就为大家带来一篇关于input的file 控件及美化。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Html/Css(新手入门第一篇必看攻略)

下面小编就为大家带来一篇Html/Css(新手入门第一篇必看攻略)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

HTML 隐藏滚动条和去除滚动条的方法

这篇文章主要介绍了HTML 隐藏滚动条和去除滚动条的方法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
收藏 0 赞 0 分享

浅谈html标签的显示模式(块级标签,行内标签,行内块标签)

下面小编就为大家带来一篇浅谈html标签的显示模式(块级标签,行内标签,行内块标签)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

html制作细线表格的简单实例

下面小编就为大家带来一篇html制作细线表格的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

HTML中table表格标签的基础学习教程

用table标签在Web上显示表格内容是HTML所具有的最基本功能之一,这里我们就来看一下HTML中table表格标签的基础学习教程,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22