html篇之《表格》

1. 结构

<table> <!-- 表格标签 --> <caption>标题               ，自动居中对齐</caption> <thead> <!-- 表格结构化-表头 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，内容始终保持在页面最上方














，不受tbody和tfoot摆放顺序影响 --> <tr> <!-- 行标签 --> <th>表头,自动加粗
  
  
  
  
  
  
  
 ，居中对齐</th> <th></th> <th></th> </tr> <tr> <td>单元格标签</td> <td></td> <td></td> </tr> </thead> <tbody> <!-- 表格结构化-主体 
  
  
  
  
  
  
  ，内容始终保持在页面中间 


 


 


 


 


 


 


 

，不受thead和tfoot摆放顺序影响 --> <tr> <td colspan="2"></td> <!-- 跨列属性,合并同一行2列单元格 --> <!-- 此单元格删除
 
 
 
 
 
 
 
，以达成跨列合并单元格 --> <td></td> </tr> <tr> <td rowspan="2"></td> <!-- 跨行属性  
   
   
   
   
   
   
   ，合并同一列2行单元格 --> <td></td> <td></td> </tr> <tr> <!-- 此单元格删除 

 

 

 

 

 

 

 
，以达成跨行合并单元格 --> <td></td> <td></td> </tr> </tbody> <tfoot> <!-- 表格结构化-脚注

 

 

 

 

 

 

 

，内容始终保持在页面最下方               ，不受thead和tbody摆放顺序影响--> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td> <!-- 表格嵌套 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，在<td></td>中放入完整表格结构 --> <table> <tr> <td></td> </tr> </table> </td> <td></td> <td></td> </tr> </tfoot> </table>

2. <table>表格标签属性

（1）width

表格宽度 px | %

（2）align

表格水平对齐方式 left | center | right

（3）border

表格边框宽度 px

（4）bgcolor

表格背景颜色 rgb | 十六进制 | colorname

（5）cellpadding

单元格边沿与其内容之间的空白 px | %

（6）cellspacing

单元格之间的空白 px | %

（7）frame

规定外侧边框的哪个部分是可见的. 值： ① void

不显示外边框 ② above

显示上边 ③ below

显示下边 ④ lhs

显示左边 ⑤ rhs

显示右边 ⑥ hsides

显示上下 ⑦ vsides

显示左右 ⑧ box

显示所有边 ⑨ border

显示所有边

（8）rules

规定内侧边框的哪个部分是可见的. 值： ① none

没有线条 ② groups

位于行组和列组之间的线条 ③ rows

位于行之间的线条 ④ cols

位于列之间的线条 ⑤ all

位于行和列之间的线条

3. <tr>行标签属性

（1）align

行水平对齐方式 left | center | right | justify | char

（2）valign

行垂直对齐方式 top | middle | bottom | baseline

（3）bgcolor

行背景颜色 rgb | 十六进制 | colorname

4. <td>和<th>单元格标签属性

（1）align

单元格水平对齐方式 left | center | right | justify | char

（2）valign

单元格垂直对齐方式 top | middle | bottom | baseline

（3）bgcolor

单元格背景颜色 rgb | 十六进制 | colorname

（4）width

单元格宽度 px | %

（5）height

单元格高度 px | %

5. <thead>               、<tbody> 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 、<tfoot>结构标签属性

（1）align

水平对齐方式 left | center | right | justify | char

（2）valign

垂直对齐方式 top | middle | bottom | baseline