解析Table标签，不要再把td、th、tr搞混了！

摘要

html中table标签自己一直掌握的都不是很好，经常把td、th、tr搞混。虽说现在的开发中很少使用原生的html，基本都是用别人写好的前端组件，但别人写的table组件一般也是按照原生table的那些层次来设计的。【推荐：html视频教程】

所以今天干脆就好好总结一下!

基本结构

table表格最顶级标签border：边框宽度；width：表格宽度；align：表格数据的对齐方式；cellpadding：表示每个单元格中内容与边框的距离，该值越大，表格给人的视觉感受越大；cellspacing表示每个相邻单元格之间的距离thead表头的父标签
tr(table row)列名称的父标签，一般一个thead中只有一个tr，因为一般一个表只有一行列名
th(table header cell)表示表头单元格，里面的数据就是列名
tbody表单数据部分的父标签
td（table data cell）数据单元格，具体的数据就是放在这个标签中
tfoot表示表格页脚colspan表示列合并；rowspan表示行合并

案例

  
      
      
项目
        
单价/元
  
数量/斤
  
金额/元
    
  
  
      
      
白菜
        
1.00
  
3
  
3.00
    
    
     
西瓜
     
0.50
     
10
     
5.00
    
  
    
        
      
合计:8.00
        
  

总结

除了th、td可以制定具体的数据外，其他基本上都是类似于不能制定具体内容的父标签。th指定表头中的列名，二td指定具体的数据值

table主要分为三部分，即表头thead、表数据主体tbody、表格页脚tfoot

th、td的父标签都是tr，就是说必须将th、td放在tr中

thead指定数据使用th，tbale和tfoot指定数据使用td

以上就是解析Table标签，不要再把td、th、tr搞混了！的详细内容，更多请关注创想鸟其它相关文章！