用html5创建表格



1.表格的基本结构
     

:一个表格只允许出现一对
,html5不再支持它的任何属性
      :表示表格的行数,html5不再支持它的任何属性
      内,表示该行有多少个单元格,html5中,   //A1 B1左右合并为一个大的单元格
             b.用rowspan(整数)属性合并上下单元格
                         //A1上下合并为一个大的单元格
上下左右都合并单元格:


  
      上下左右合并单元格
  
  
      
:写在
只有colspan和rowspan两个属性


  
      表格的基本结构
  
  
     
         
            
            
            
         
         
            
            
            
         
         
            
            
            
         
     
A1B1C1
A2B2C2
A3B3C3

  

用html5创建表格_第1张图片
2.创建表格
      (1)创建普通表格


  
     

一列


     
        
           
        
     
1

     

一行一列


     
        
           
           
           
        
     
1。2。3。

     

两行三列


     
        
           
           
           
        
        
           
           
           
        
      
112233
102030

  
           

用html5创建表格_第2张图片
      (2)创建一个带有标题的表格


  
     

带标题的表格


     
        
        
           
           
           
        
        
           
           
           
        
     
数据表
12 3
1122 33

  

用html5创建表格_第3张图片
3.编辑表格
      (1)表格边框类型
             设置使用表格的border属性
      (2)表格表头
             表头有垂直和水平两种


  
     

水平表头


     
        
           
           
           
        
        
           
           
           
        
     
姓名性别年龄
小米 11

     

垂直表头


     
        
           
           
        
        
           
           
        
        
           
           
        
     
姓名小妹
性别
年龄15

  

用html5创建表格_第4张图片
      (3)表格背景
             a.表格背景颜色
                  


             b.表格背景图片
                  

      (4)单元格背景


  
     

单元格背景


     

        
           
        
        
           
        
        
           
        
     
000000
111111
222222

  

用html5创建表格_第5张图片
      (5)合并单元格
             a.用colspan(整数)属性合并左右单元格
                  

A1 B1A1

         
            
            
         
         
            
         
         
            
            
            
         
      
A1B1
A2B2
C1
C2
A3B3C3

  

用html5创建表格_第6张图片
             c.使用Dreamweaver CS6合并单元格
                   在“插入”中选择“表格”,可在光标处创建一个空白表格
      (6)排列单元格内容
             使用align属性可以排列单元格内容
             项目   //可使表头在单元格内靠左显示
             衣服  //可使单元格内容靠右显示
      (7)设置单元格的行高与列宽
              使用cellpadding来创建单元格内容与边框之间的空白,调整表格的行高和列宽
            


4.完整的表格标记
      以后要学习css样式,更方便制作各种表格,表格除了表头还会有主体,脚注等。表格的行分组可成为"行组",不同行组具有不同意义,行组分为三类—“表头”“主体”“脚注”对应html中.
      为表格标题;表示一个单元格,表示该单元格使这一行的"行头"


  
      完整表格
     
  
  
     
        
        
           
              
           
        
        
           
              
           
        
        
           
              
           
           
              
           
        
     
学生成绩单
姓名性别成绩
540
小妹560
小小520

  

用html5创建表格_第7张图片

你可能感兴趣的:(前端的进步,html5,基础,表格)