html作业填写信息,HTML作业——表格篇

前言###

对于表格(table标签)，在这次学习之前其实还真没想过真的用它去做表格。。。这句话看着有些奇怪。但是看了我这么说可能就能明白了，我最初利用table标签做过一些东西，但它的作用是规划页面布局。现在也能看到有一些有年头的网站的HTML代码中也利用了table来完成布局。但是后来，听过一个前辈说，使用table标签做布局看似很规整，但是在浏览器加载的过程中，渲染会很费劲。我当时不是很理解，只是想着这样做可能不好。现在大概了解了一点点，就是说用table做布局会有些笨重，没有div标签+CSS样式那样轻便。不过这些都是题外话，今天的目的是用table标签完成它的本职工作——做表格！

作业简述###

写一篇博客详细说明以下表格是如何实现的：

作业分析###

首先可以看到这个表格是有表名的，也就是说，会用到caption标签。

其次，整个表应该是5行4列的结构，前两行和第一列都是以表头th的格式标记内容的。并且其中有几个单元格会用到跨行rowspan、跨列colspan显示的标签。

至此，题目分析完成，可以动手写代码啦。

我的HTML###

购物车

名称	2016-11-22		小计
	重量	单价
苹果	3公斤	5元/公斤	15元
香蕉	2公斤	6元/公斤	12元
总价			27元

效果图：

这是FireFox上的效果

可以看到，和目标图比起来，内容上是没差别了，只是样式上还是有些小出入：我的表格显得有些拥挤。之后学了CSS,调整一下应该就没问题啦。