• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML表格布局实例讲解

    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元素时class比id所具有的优势
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML表格布局实例讲解 HTML,表格,布局,实例,讲解,