HTML 基础表格 学习笔记（table）

一 . 基础表格语法：

结构：

        
            
        
           
        
             
        
......
......
......
......
......
......

二 . 带结构的表格。(作用是 从上至下加载表格，并非全部加载完再显示)

分为：表头，主体，脚注。

thead ： 表格的头 （放标题之类的内容）
tbody ： 表格的主体（放数据主体）
tfoot ： 表格的脚  （放表格的脚注）

结构：

             
                    
                    
      

  

    
表头
    
  

  

    
主体
    
  

  

    
脚注
    
  

三 . 表格  标签属性：

表格语法 ：
定义表格   

表格边框 （可以设定数值,0为无边框）  

单元格左右间距   

单元格上下间距  

表格宽度  （以pixels为单位）  

表格宽度比率  （页宽为100%）  

...表格位置,置左  

...表格位置,置中  

...背景图片的URL=就是路径网址  

...设定表格边框大小(使用数字)  

...设定表格的背景颜色  

...设定表格边框的颜色 
 
...设定表格暗边框的颜色 
 
...设定表格亮边框的颜色  

...指定内容与格线之间的间距(使用数字)  

...指定格线与格线之间的距离(使用数字)  

...指定表格的栏数  

...设定表格外框线的显示方式  

...指定表格的宽度大小(使用数字)  

...指定表格的高度大小(使用数字)  

四 . 表格行  标签属性：

表格行   

表格行内容对齐   

五 . 单元格  标签属性：

...   指定储存格合并栏的栏数(使用数字)  

...   指定储存格合并列的列数(使用数字)  

单元格  （须与tr并用）  

单元格内容对齐   

不换行   

单元格背景颜色   

单元格占几列   

单元格占几行   

单元格宽度  （以pixels为单位）  

单元格宽度比率  （页宽为100%）  

六  . 标题格  标签属性：

标题格  （跟一样，不过会对中并加粗）  

标题格对齐   

标题格不换行   

标题格占几列   

标题格占几行   

标题格宽度  （以pixels为单位） 

标题格宽度比率  （页宽为100%） 

七 . 标头属性 ：

表格标头   

表格标头位置 （在表格之上/之下）

八 . 表格嵌套：

     

		
...
		

			

				

					
...
					
...
				
			
		
	

 

练习效果图及代码：

 

  

  近三年前端工程师的平均工资
  
  

    
城市
    
2014年
    
2015年
    
2016年
  
  

    
上半年
    
下半年
  
  

    
北京
    
8000
    
9000
    
10000
    
12000
  
  

    
上海
    
6000
    
7000
    
8000
    
10000
  
  

    
合计
    
7000
    
8000
    
9000
    
11000