HTML表格(table、tr、td、th、thead、tbody、tfoot标签)

目录

  • HTML表格
  • table表格属性

***HTML表格**




	表格
	

	
     
     
表格标题
2014年 2015年 2016年
8000 10000 12000

【注意】:浏览器一般是通过加载全部表格数据后才显示,但是当数据量很大时,希望能加载一部分,即显示一部分??

--- 使用 带结构的表格!!!

HTML表格(table、tr、td、th、thead、tbody、tfoot标签)_第1张图片 带结构的表格

HTML表格(table、tr、td、th、thead、tbody、tfoot标签)_第2张图片 三个标签 需要同时使用,但是不影响布局展示

 

**table表格属性:

HTML表格(table、tr、td、th、thead、tbody、tfoot标签)_第3张图片

HTML表格(table、tr、td、th、thead、tbody、tfoot标签)_第4张图片

HTML表格(table、tr、td、th、thead、tbody、tfoot标签)_第5张图片

【说明】:

(1)没有设置width,则按照文字的多少展示表格的大小;

 

HTML表格(table、tr、td、th、thead、tbody、tfoot标签)_第6张图片

HTML表格(table、tr、td、th、thead、tbody、tfoot标签)_第7张图片

HTML表格(table、tr、td、th、thead、tbody、tfoot标签)_第8张图片

HTML表格(table、tr、td、th、thead、tbody、tfoot标签)_第9张图片

【注意】:如果需要单元格合并???---使用 跨列属性colspan、rowspan

城市 2014年 2015年 2016年
上半年 下半年
北京 8000 9000 10000 12000
上海 6000 7000 8000 10000
合计 7000 8000 9000 11000

HTML表格(table、tr、td、th、thead、tbody、tfoot标签)_第10张图片

HTML表格(table、tr、td、th、thead、tbody、tfoot标签)_第11张图片

【总结】:

(1)尽量少的使用表格嵌套;

(2)尽量少的使用表格跨行跨列;

 

详情参考《表格资料》

你可能感兴趣的:(前端基础入门,html/html5)