两分钟吃透表格（table）

表格设计

表格常用属性如下：border-collapse;caption-side;border-spacing;table;tr;td;th;caption;thead;tbody;tfoot;

1.创建语义化的表格结构

我们在HTML中，讲到和表格相关的标签有如下几个：table、tr、td/th

实际上， 除了这几个之外，还有一些相应的标签。
caption：表格标题，实际上使用并不是很多
thead：表头部分
tbody：表主体部分
tfoot：表尾部分

在行的方向上，我们可以将这些行分成不同的组，有三种：thead、tbody、tfoot
如果没有增加上述中的任意一个，默认所有的tr都会在tbody中。
我们可以人为的对tr进行分组：
有了这些标签，可以给我们带来两大好处：
我们的html更加具备语义化
我们在写CSS的时候，可以节省很多的class属性。直接使用元素选择器即可。

• 一般而言，thead和tbody使用比较多，而tfoot使用相对较少。

2.表格相关css属性

和表格有关的新的属性：

border-collapse：重点掌握
caption-side
border-spacing

默认情况下，表格的边框构建方式是分隔式（分离式），其特点如下：
table本身有一个独立的边框每一个单元格（td/th）也都具备自己独立的边框
实际上，在所有的网站中，都需要去更改表格边框的构建方式。
我们希望单元格之间能够共用其中的某一个边框。

在css中，我们可以使用border-collapse，来设置。
它有两个属性值：
separate：分隔，默认值
collapse：消融，融合

• caption-side：表示标题的所处的位置，一般可以设置如下两个值：
  top：在表格的上方
  bottom：在表示的下方
  它既可以在table中设置，也可以在caption中设置。
• border-spacing
  设置单元格边框的之间的距离，类似于border-spacing属性的作用。

但是，它有前提，必须是分离式的边框，如果是collapse，则无效。

实际上，由于表格都是基于collapse的，所以根本就用不着它。了解即可。
有了这些，结合其他的一些css属性，就可以很好的完成表格的美化。

• 关于表格，需要注意的一些地方：
  表格是块级元素。
  不是严格意义上的块级元素，它并不会占据一整行，默认情况下，它是能够容纳表中的内容就可以了。
  我们可以通过width和height去修改它的大小，但是这个大小是指最小的那个值，实际上有可能比设置的值要大

使用css来设置边框的时候，我们可以分别对table，tr，td/th单独来设置边框，遵循盒模型的边框规则
在我们使用background设置table、tr、td的时候，table在最底层，tr是在中间，td是最上面，默认的背景颜色都是transparent，也就是透明的。

关于设置thead或者tr的背景图片的时候，在firefox/chrome都会显示有些异常，但是在ie下去认识正确的解析效果。

针对这种情况，我们需要换一种方式，针对每个单元格独立设置。然后使用背景定位实现。