HTML学习笔记（五）表格

表格

表格由 标签来定义。每个表格的若干行（由 标签定义），每行被分割为若干单元格（由：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。

带标题的表格与跨行或跨列的表格单元格：

  
    
带标题的粗边框表格
    

标签定义，即列）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 table标签常用属性： width：表格宽度  单位px(可省略) height：表格高度  单位px(可省略) align：表格对齐方式  left|center|right border:边框属性。边框宽度值。不定义边框属性，表格就不显示边框。 cellpadding：单元格的内边距 cellspacing：单元格的外边距 td标签的合并单元格相关属性： rowspan：行合并 colspan：列合并 基本结构： row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 举个栗子： 两行三列小栗子： 哈哈 呵呵 嘻嘻 哼哼 嗯嗯 噢噢 表格的表头 使用	标签进行定义： 栗子延伸： 表头1 表头2 表头3 哈哈 呵呵 嘻嘻 哼哼 嗯嗯 噢噢 表头1 哈哈 哼哼 表头2 呵呵 嗯嗯 表头3 嘻嘻 噢噢 图示：

我的标题

100	200	300
400	500	600

横跨两列的单元格

姓名		职业
小白	小黑	攻城狮

横跨两行的单元格：

姓名	小白
	小黑
职业	攻城狮

图示：

表格内的标签：在表格内添加别的标签

  
    

      

        

          
我是一个段落
          
我也是一个段落
        
        

        我这儿有个表格：
          

            

              
A
              
B
            
            

              
C
              
D
            
          
        
      
      

        

        我这儿有两个个列表：
          

            
橘子
            
葡萄
            
菠萝
          
          

            
美术
            
音乐
            
骑行
          
        
        
该写点儿啥？
      
    
  

单元格内边距：

  
    
没有单元格内边距：
    

      

        
小A
        
小B
      
      

        
小C
        
小D
      
    
    

    
带有单元格内边距：
    

      

        
小A
        
小B
      
      

        
小C
        
小D
      
    
  

图示：

单元格外边距：

  
    
没有单元格外边距：

    

      

        
小A
        
小B
      
      

        
小C
        
小D
      
    
    

    
带有单元格外边距：
    

      

        
小A
        
小B
      
      

        
小C
        
小D
      
    
  

在表格中排列内容：

使用 "align" 属性排列单元格内容。

  
    
没有使用align属性时：
    

      

        
姓名
        
爱好
        
职业
      
      

        
小白
        
看书
        
程序猿
      
      

        
小黑
        
绘画
        
攻城狮
      
    
    
使用了align属性后：
    

      

        
姓名
        
爱好
        
职业
      
      

        
小白
        
看书
        
程序猿
      
      

        
小黑
        
绘画
        
攻城狮
      
    
  

图示：

框架（frame）属性： 控制围绕表格的边框

  
    
frame="box"：
    

      

        
姓名
        
爱好
      
      

        
小慕
        
绘画
      
    
    
frame="above"：
    

      

        
姓名
        
爱好
      
      

        
小慕
        
绘画
      
    
    
frame="below"：
    

      

        
姓名
        
爱好
      
      

        
小慕
        
绘画
      
    
    
frame="hsides"：
    

      

        
姓名
        
爱好
      
      

        
小慕
        
绘画
      
    
    
frame="vsides"：
    

      

        
姓名
        
爱好
      
      

        
小慕
        
绘画
      
    
  

图示：

	

    	

        	
A1
A2
A3
        
    	

        	
B1
B2
B3
        
        

        	

            	

                	

                    	
C1
                        
C2
                    
                
            
        
    

空单元格  使用 " " 处理没有内容的单元格。