您现在的位置是：网站首页> 编程资料编程资料

HTML表格布局实例讲解html5绘制的用户数据表格与饼状图形效果源码有关HTML表格边框的设置小技巧Div+CSS对HTML的table表格定位用法实例深入解析HTML的table表格标签与相关的换行问题html制作细线表格的简单实例

2021-08-30 1294人已围观

简介 这篇文章主要为大家详细介绍了HTML表格布局简单实例，HTML表格布局是HTML入门学习中的基础知识，感兴趣的小伙伴们可以参考一下

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

或 表格（）来布局 Web 页面的内容。

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

HTML 文档

CSS Code复制内容到剪贴板
  1.   
  2. "en">   
  3.   
  4.     "UTF-8">   
  5.        
  6.     "stylesheet" href="css/mystyle.css">   
  7.     Island estaurant   
  8.   
  9.   
  10.     "container">   
  11.            
  12.         
  
  •             "header" colspan="2">   
  •                 

    点菜系统

      
  •                
  •         
    •   
  •            
  •         
    •   
  •                
  •             "menu">   
  •                 菜品
      
  •                 "dishes">   
  •                     小鸡炖蘑菇
      
  •                     家常豆腐
      
  •                     酸辣土豆丝
      
  •                    
  •                
  •                
  •             "content">   
  •                 小鸡炖蘑菇：
      
  •                 幼鸡一只   
  •                
  •         
    •   
  •            
  •         
    •   
  •             "footer" colspan="2">世俗孤岛的餐厅   
  •         
    •   
  •     
    •   
  •   
  •   
  •   

    • 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. }  

    效果图：

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

    上一篇：Nofollow标签的写法以及nofollow使用介绍SEO新站点nofollow标签的妙用网站优化中nofollow标签的使用与外部链接介绍浅谈：nofollow标签的使用与分析在网站SEO优化中nofollow标签的使用与外部链接合理应用nofollow标签可以增加网站权重谷歌调整nofollow标签对PR的处理nofollow标签的作用 nofollow标签添加方法

    下一篇：详解html中background-image属性的设置用一个DIV画图通过background-image叠加实现深入浅出CSS3 background-clip,background-origin和border-image教程

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网