HTML 笔记 表格

1 表格基本语法

tr：table row

th：table head

2 表格属性

2.1 基本属性

• 表格的基本属性是指表格的行、列和单元格
• 但并不是每个表格的单元格大小都是统一的，所以需要设计者通过一些属性参数来修改表格的样子，让它们可以更更多样化。
• 这些属性参数包括行高、宽度等。
  • 1．行高height属性
  • 2．宽度width属性
  • 3. 边框Border属性
  • 4．单元格大小属性height和width

   

       
 Head 1 
       
 Head 2 
   
   

        
 row, cell 1 
        
 row, cell 2 
   

百分比表示所占浏览器的大小 

绝对数字表示像素值大小

2.2 其他属性

• bgcolor: 定义表格或者单元格的背景颜色
• background: 定义表格或者单元格的背景图片

   

       
 Head 1 
       
 Head 2 
   
   

        
 row, cell 1 
        
 row, cell 2 
   

3 合并单元格

• 合并同一行的单元格时，要用到 colspan 属性
• 合并同一排的单元格时，要用到 rowspan 属性

  

    
1&2
	
3
    
4&
8&
12
  

  

    
5
    
6
	
7
  

  

    
9
    
10
	
11
  

  

    
13
    
14
	
15
	
16
  

4 表格标题

• 标签是用来给表格添加标题的。
• 默认情况下将位于表格上方居中的位置，且会根据表格的宽度自行调整位置。

   
表格题目
   

       
 Head 1 
       
 Head 2 
   
   

        
 row, cell 1 
        
 row, cell 2 
   

5 使用CSS 来定义表格属性

• 利用CSS来定义表格单元格的height和width
• 利用CSS来定义表格单元格的border属性
  • 可以按顺序设置如下属性：
    • border-width：
    • border-style:  dotted (点状) solid （实线） double （双线） dashed （虚线）;
    • border-color

	





   

       
 Head 1 
       
 Head 2 
   
   

        
 row, cell 1 
        
 row, cell 2 
   

table是最外圈

table th是head部分（内圈）

table td是 表格正文部分（内圈）